目录

 

 

基本概念

代码与实例

---

 

基本概念

这里使用echarts，框架用vue cli，下面这个链接是vue cli导入echarts

https://blog.csdn.net/qq78442761/article/details/97756198

这里只有一点要注意！！导入后，已经集成了很多地图的json文件，或者js，只要调用就可以了！

程序运行截图如下：

 

代码与实例

vue代码如下：

<template>
  <div>
    <div>
      <div id="main" style="width: 500px; height:500px"></div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import 'echarts/map/js/province/jiangsu'
  export default {
    mounted(){
      this.drawLine();
    },
    methods: {

      //开始画图了
      drawLine() {

        let myChart = echarts.init(document.getElementById('main'));

        let option = {
          title: {
            // text: 'XXXXXXXX',
            subtext: '江苏省分布图',
            left: 'right'
          },
          tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
              let value = (params.value + '').split('.');
              value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
              return params.seriesName + '<br/>' + params.name + ': ' + value;
            }
          },
          visualMap: {
            left: 'left',
            min: 500000,
            max: 3800000,
            inRange: {
              color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            text:['High','Low'],
            calculable: true,
            show: false
          },
          series: [
            {
              name: '可调资源分布',
              type: 'map',
              roam: true,
              map: '江苏',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: 'rgba(0, 255, 0, 1)'
                  }
                }
              },
              itemStyle:{
                emphasis:{label:{show:true}}
              },
              // 文本位置修正
              textFixed: {
                Alaska: [20, -20]
              },
              data:[
                {name: '南京市', value: 4822023},
                {name: '常州市', value: 731449},
                {name: '徐州市', value: 6553255},
                {name: '淮安市', value: 2949131},
                {name: '南通市', value: 38041430},
                {name: '宿迁市', value: 5187582},
                {name: '无锡市', value: 3590347},
                {name: '扬州市', value: 917092},
                {name: '盐城市', value: 632323},
                {name: '苏州市', value: 1931751},
                {name: '泰州市', value: 9919945},
                {name: '镇江市', value: 1392313},
                {name: '连云港市', value: 1595728}
              ]
            }
          ]
        };

        myChart.setOption(option)
      }
    }
  }
</script>
<style scoped>

</style>