hunan.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>湖南省</title>
  6. </head>
  7. <style>
  8. .highcharts-credits {
  9. display: none;
  10. }
  11. .highcharts-legend {
  12. display: none;
  13. }
  14. </style>
  15. <body><div id="map" style="width:800px;height: 500px;"></div>
  16. <script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
  17. <script src="https://data.jianshukeji.com/geochina/hunan.js"></script>
  18. <script>
  19. // 随机数据
  20. var data = [{"name":"长沙","value":42},{"name":"株洲","value":81},{"name":"湘潭","value":94},{"name":"衡阳","value":8},{"name":"邵阳","value":67},{"name":"岳阳","value":38},{"name":"常德","value":7},{"name":"张家界","value":9},{"name":"益阳","value":77},{"name":"郴州","value":78},{"name":"永州","value":17},{"name":"怀化","value":83},{"name":"娄底","value":23},{"name":"湘西","value":75}];
  21. // 初始化图表
  22. var map = new Highcharts.Map('map', {
  23. title: {
  24. text: '湖南省'
  25. },
  26. colorAxis: {
  27. min: 0,
  28. minColor: 'rgb(255,255,255)',
  29. maxColor: '#006cee'
  30. },
  31. series: [{
  32. data: data,
  33. name: '随机数据',
  34. mapData: Highcharts.maps['cn/hunan'],
  35. joinBy: 'name', // 根据 name 属性进行关联
  36. states: {
  37. hover: {
  38. color: '#000'
  39. }
  40. },
  41. dataLabels: {
  42. enabled: true,
  43. format: '{point.name}'
  44. }
  45. }]
  46. });
  47. </script></body></html>