地图

china.js
echarts.min.js

map.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Document</title>
  7. </head>
  9. <body>
  10.   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.   <div id="main" style="width: 1000px;height:800px;"></div>
  12.   <script src="./js/echarts.min.js"></script>
  13.   <script src="./js/china.js"></script>
  14.   <script type="text/javascript">
  15.     var myChart = echarts.init(document.getElementById('main'), 'shine');
  17.     function randomData() {
  18.       return Math.round(Math.random() * 1000);
  19.     }
  20.     option = {
  21.       title: {
  22.         text: 'iphone销量',
  23.         subtext: '纯属虚构',
  24.         left: 'center'
  25.       },
  26.       tooltip: {
  27.         trigger: 'item'
  28.       },
  29.       legend: {
  30.         orient: 'vertical',
  31.         left: 'left',
  32.         data: ['iphone3', 'iphone4', 'iphone5']
  33.       },
  34.       visualMap: {
  35.         min: 0,
  36.         max: 2500,
  37.         left: 'left',
  38.         top: 'bottom',
  39.         text: ['高', '低'], // 文本，默认为数值文本
  40.         calculable: true
  41.       },
  42.       toolbox: {
  43.         show: false,
  44.         orient: 'vertical',
  45.         left: 'right',
  46.         top: 'center',
  47.         feature: {
  48.           dataView: {
  49.             readOnly: false
  50.           },
  51.           restore: {},
  52.           saveAsImage: {}
  53.         }
  54.       },
  55.       series: [{
  56.         itemStyle: {
  57.           normal: {
  58.             color: function (params) {
  59.               var colorList = [
  60.                 '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
  61.                 '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
  62.                 '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
  63.               ];
  64.               return colorList[params.dataIndex]
  65.             },
  67.           }
  68.         },
  69.         name: 'iphone3',
  70.         type: 'map',
  71.         mapType: 'china',
  72.         roam: false,
  73.         label: {
  74.           normal: {
  75.             show: true
  76.           },
  77.           emphasis: {
  78.             show: true
  79.           }
  80.         },
  81.         data: [{
  82.             name: '北京',
  83.             value: randomData()
  84.           },
  85.           {
  86.             name: '天津',
  87.             value: randomData()
  88.           },
  89.           {
  90.             name: '上海',
  91.             value: randomData()
  92.           },
  93.           {
  94.             name: '重庆',
  95.             value: randomData()
  96.           },
  97.           {
  98.             name: '河北',
  99.             value: randomData()
  100.           },
  101.           {
  102.             name: '河南',
  103.             value: randomData()
  104.           },
  105.           {
  106.             name: '云南',
  107.             value: randomData()
  108.           },
  109.           {
  110.             name: '辽宁',
  111.             value: randomData()
  112.           },
  113.           {
  114.             name: '黑龙江',
  115.             value: randomData()
  116.           },
  117.           {
  118.             name: '湖南',
  119.             value: randomData()
  120.           },
  121.           {
  122.             name: '安徽',
  123.             value: randomData()
  124.           },
  125.           {
  126.             name: '山东',
  127.             value: randomData()
  128.           },
  129.           {
  130.             name: '新疆',
  131.             value: randomData()
  132.           },
  133.           {
  134.             name: '江苏',
  135.             value: randomData()
  136.           },
  137.           {
  138.             name: '浙江',
  139.             value: randomData()
  140.           },
  141.           {
  142.             name: '江西',
  143.             value: randomData()
  144.           },
  145.           {
  146.             name: '湖北',
  147.             value: randomData()
  148.           },
  149.           {
  150.             name: '广西',
  151.             value: randomData()
  152.           },
  153.           {
  154.             name: '甘肃',
  155.             value: randomData()
  156.           },
  157.           {
  158.             name: '山西',
  159.             value: randomData()
  160.           },
  161.           {
  162.             name: '内蒙古',
  163.             value: randomData()
  164.           },
  165.           {
  166.             name: '陕西',
  167.             value: randomData()
  168.           },
  169.           {
  170.             name: '吉林',
  171.             value: randomData()
  172.           },
  173.           {
  174.             name: '福建',
  175.             value: randomData()
  176.           },
  177.           {
  178.             name: '贵州',
  179.             value: randomData()
  180.           },
  181.           {
  182.             name: '广东',
  183.             value: randomData()
  184.           },
  185.           {
  186.             name: '青海',
  187.             value: randomData()
  188.           },
  189.           {
  190.             name: '西藏',
  191.             value: randomData()
  192.           },
  193.           {
  194.             name: '四川',
  195.             value: randomData()
  196.           },
  197.           {
  198.             name: '宁夏',
  199.             value: randomData()
  200.           },
  201.           {
  202.             name: '海南',
  203.             value: randomData()
  204.           },
  205.           {
  206.             name: '台湾',
  207.             value: randomData()
  208.           },
  209.           {
  210.             name: '香港',
  211.             value: randomData()
  212.           },
  213.           {
  214.             name: '澳门',
  215.             value: randomData()
  216.           }
  217.         ]
  219.       }]
  220.     };
  221.     myChart.setOption(option);
  223.   </script>
  225. </body>
  227. </html>

image.png