标准地形图制作系列--接图表的制作方法

by 李远祥

接图表是标准地形图制作常用的方式，对于网络地图来说，从来不会出现接图表这东西，但是在标准地形图里面，这却是强制的规范。虽然很多行外人员都不清楚接图表是什么东西，但实际上接图表他们早就在中学的地理课本或者是街边买来的地图册上看到过（尽管这些地图不太规范）。

接图表的作用就不在这里罗嗦了，一般关注该话题的人都知道它的表达方式，这里不做论述。下面主要介绍一下如何在ArcGIS里面实现接图表。由于没有标准的数据，这里用一份比较简单的数据实现其操作步骤。

先说一下主要思路：首先要针对数据制作好地形图，这是前提条件。然后利用行政边界图层，单独制作一个地图，并插入到做好的地形图中，并作为接图表放置在地图的右上角。最后调整接图表的显示范围，让其范围与地形图范围一致。

制作地形图的过程这里省略，那是一个非常好时间和精力的事情，不要问我怎么知道，具体按照地形图规范做一下就知道有多苦逼。下面假设已经做好一张标准的地形图，我是说假设`(*∩_∩*)′  如下图所示

在【文件】--【页面和打印设置】先设置好打印的纸张大小，比例尺之类的就在图框中设置好对应的参考比例。然后调整好显示的范围等。切换到【布局】视图，这样才可以看到效果。

接下来就是需要插入接图表的关键步骤了。很多人都不会明白ArcGIS的【数据框】是什么概念，就是我们经常看到的在图层最上面的黄色的图标，感觉上有图层和图层组的位置，但【数据框】看起来一点作用都没有。下图红色箭头指向的就是【数据框】

在哲学上来说，存在的都是有价值的，何况数据框已经存在ArcGIS十多个版本中。数据框的概念其实可以看作是一张地图的组织，只不过很多人习惯性的将不同的地图放置在不同的Mxd中组织起来，而数据框的作用就是将多个地图放在同一个MXD中，需要查看不同的地图的时候可以自动激活（当然，这个是在数据视图中的做法）。而另一种非常重要的价值就是将多个地图显示在同一个纸面上，恰好接图表就是其中的一种多个地图在同一张图纸中的表现形式，只不过是一张是精细的地图，另一张类似于鹰眼的简图。

那接下来就是插入接图表的重要步骤。在菜单【插入】，可以插入一个【数据框】，如下图

标准动作是将该新建的数据框命名为“接图表”，然后选择接图表数据框，添加接图表图层。我在这里就用一个行政区界来表示，为了方便显示，将行政边界填充设置为无颜色，只显示边线。当然，如果有的只是边线数据，直接加载设置边线样式就行了。如下图

可以看到，大图中已经加入了一个小图，这个小图就是我们所说的接图表。使用选择工具，就是黑色箭头工具，将接图表移动到右上角位置，并且点击右键--属性，将修改接图表的图框样式和背景。一般将图框样式设置为简单的线，背景设置为纯白色，如下图

这样，接图表的基本模样就出来了。然后对接图表的图层显示一下标注信息，这样就像模象样了。再进一步就是要将两个图的范围对应起来，这一次就需要使用【标准工具】里面的缩放工具进行调整（千万不要用【布局】工具条上的工具，那只是相当于放大纸张在屏幕的显示而已）

最后，如果想两个数据框的范围能够对上，除了手动的方式之外，可以通过arcpy脚本来实行。可以参考mapping模块的具体方法

写完脚本之后可以在【地理处理】的Python中执行脚本进行对照。这里不做详细论述，在以后章节会有arcpy.mapping 模块的说明。

总结：接图表其实不难实现，主要是很多人不清楚使用多个数据框可以实现该效果。

场景：

大数据展示全国各省份信息，绘制地图，并在每个省份上叠加图表。
需要做的就是
1、绘制全国地图（不同省份根据数据的不同而颜色不同）
2、每个省份都需要单独叠加一个图表（饼图）
3、地图缩放、图表的大小跟随比例一起缩放
4、地图拖拽，图表根据一起移动
这里面有一些坑

效果图：

截图未截完整，示例效果。

完整代码：

mapOption.js配置项：

let obj ={
    
}
export default {
    geo: {
        map: 'china',
        show: false,
        roam: false,
        label: {
            emphasis: {
                show: false
            }
        },
        layoutSize: "100%",
        itemStyle: {
            normal: {
            }
        }
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 100,
        bottom: 45,
        showLabel: !0,
        backgroundColor:"#fff",
        text: ["高", "低"],
        pieces: [],
    },
    series: [
        {
            type: 'map',
            zoom:1.1,
            aspectScale: 0.9,
            layoutCenter: ["50%", "60%"], //地图位置
            layoutSize: "100%",
            zlevel: 3,
            scaleLimit: {
                //滚轮缩放的极限控制
                min: 1,
                max: 1.5,
            },
            geo: {
                show: true,
                map: 'china',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077',
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    }
                }
            },
            roam: true,  // 是否开启鼠标缩放和平移漫游
            selectedMode: 'false', // 是否允许选中多个区域
            emphasis:{
                label:{
                    show:true,
                    color:'#ffffff',
                }
            },
            label: {
                show: true,
                color: "#FFFFFF",
                fontSize: 12,
            },
            itemStyle: {
                normal: {
                    areaColor: "#0c3653",
                    borderColor: "#1cccff",
                    borderWidth: 2,
                },
                emphasis: {
                    areaColor:"rgb(12,76,107)",   //鼠标悬停/选中颜色
                    label: {
                        show: true,
                        color: "#fff",
                        borderColor:"rgb(2,241,177)",
                       
                    },
                },
            },
            data: [],
        },
    ]
};
  

其他例如china.json移步到datav下载即可：结构如下

<template>
  <div class="chart pt-10">
    <el-button type="primary" size="mini" @click="options.id=1">模式1</el-button>
    <el-button type="primary" size="mini" @click="options.id=11">模式2</el-button>
    <div id="mapChart" class="mapChart"></div>
  </div>
</template>

<script>
import mapOption from './echarts/map'

import chinaData from '@/assets/china.json'
import liaoningPro from './echarts/liaoning.json'
import shenyangCity from './echarts/shenyang.json'


export default {
  data(){
    return{
      myChart: null,
      chinaCode:100000,
      curMapName:'china', // 当前地图名
      selectedMaps:[
        {
          name:'china',
          code:'100000',
        }
      ],
      //地图散点数据
      mapDotData:{
        input:{
          value:{}
        },
        output:{
          value:{
            rows:[]
          }
        }
      },
      typeIndex:1,
      //上一次的缩放层级
      lastZoomLevel:0,
      // 图例
      options:{
        id:1
      }
    }

  },
  props:{
  },
  async mounted(){
    await this.getMapData('china');
    window.addEventListener('resize',this.resizeCharts);
    
    


    // //这里是做地图下钻   预留一下吧  以后需要直接放开继续写逻辑目前也算是实现了下钻的操作
    // this.myChart.on('click', (params) => {
    //     console.log('空间',params)
    //     const map = params.name;
    //     if(map){
    //       this.curMapName = params.name;
    //       this.getMapData(map);
    //       // 为地图标题菜单存入（过滤同一地图多次点击情况）点击地图信息
    //       let selectedCodes = [];
    //       this.selectedMaps.forEach( item => selectedCodes.push(item.code));
    //       if(!selectedCodes.includes(map)){
    //         this.$set(this.selectedMaps,this.selectedMaps.length,{name: this.curMapName, code: map}); 
    //       }
    //       console.log(selectedCodes)
          
    //     }else{
    //       this.$message({message: '暂无地图数据',type: 'warning',showClose: true});
    //     }
    // });
    window.addEventListener("resize", (params)=> {
      if(Number(this.options.id)<10){
        this.resetDot(this.myChart, params);
      }else{
        this.resetPie(this.myChart, params);
      }
    })
  },
  beforeDestroy() {
    window.addEventListener('resize',this.resizeCharts);
  },
  watch:{
      "options.id":{
          async handler(v){
              if(v){
                  this.myChart.dispose()
                  this.getMapData('china')
              }
          }
      },
  },
  methods:{
    // 绘制地图
    async drawMapChart(mapName,mapJSON){
      if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(document.getElementById('mapChart'));
      this.$echarts.registerMap(mapName,mapJSON);
      
      let seriesData = this.initMapData(mapJSON)

      //然后调用接口查询地图信息
      await this.getMapDotData()
      let arr = this.mapDotData.output.value.rows 

      for(var i =0;i<seriesData.length;i++){
        arr.forEach((item,index)=>{
          if(seriesData[i].name==item.xzqmc){
            seriesData[i].value = item.total
          }
        })
      }
      mapOption.series[0].map = mapName
      mapOption.series[0].data = seriesData
      //图例是配置的
      mapOption.visualMap.pieces =[{
            gt: 100,
            color: "#7f1100"
        }, {
            gte: 60,
            lte: 80,
            color: "#ff5428"
        }, {
            gte: 20,
            lt: 60,
            color: "#ff8c71"
        }, {
            gt: 0,
            lt: 20,
            color: "#ffd768"
      }],
      
      //先有个地图底图
      this.myChart.setOption(mapOption,true);
      if(Number(this.options.id)<10){
        //然后再叠加图表上去
        this.addPieToMap(this.myChart, this.mapDotData.output.value.rows );
      }else{
        this.addPartPieToMap(this.myChart, this.mapDotData.output.value.rows )
      }
      

      /*饼图跟着地图移动:pie*/
      this.myChart.on('georoam', (params)=> {
        if(Number(this.options.id)<10){
          this.resetDot(this.myChart, params);
        }else{
          this.resetPie(this.myChart, params);
        }
      });

      
    },
    initMapData(mapJson) {
      let mapData = [];
      for (let i = 0; i < mapJson.features.length; i++) {
        mapData.push({ name: mapJson.features[i].properties.name });
      }
      return mapData;
    },
    // 浏览器窗口大小改变时，重新加载图表以自适应
    resizeCharts(){
      this.$echarts.init(document.getElementById('mapChart')).resize()
    },
    // 获取地图数据
    async getMapData(map){
        if(map=='china'){
          await this.drawMapChart(this.curMapName,chinaData[0]);
        }else if(map=='辽宁省'){
          this.drawMapChart(this.curMapName,liaoningPro);
        }else{
          this.drawMapChart(this.curMapName,shenyangCity);
        }
    },

    //接口获取散点数据
    async getMapDotData(){
      //接口获取数据
      let rows = []

      if(Number(this.options.id)<10){
        rows =[
          {
              "xzqmc": "四川省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "辽宁省",
              "total": 482.99,
              "dw": "万亩",
              "xzqdm": "540000"
          },
          {
              "xzqmc": "湖南省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "湖北省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "贵州省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "云南省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "青海省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "陕西省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "山西省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "新疆维吾尔自治区",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "西藏自治区",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "宁夏回族自治区",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "甘肃省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "河南省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "安徽省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "山东省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "江苏省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "江西省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
          {
              "xzqmc": "福建省",
              "total": 9088.51,
              "dw": "万亩",
              "xzqdm": "510000"
          },
        ]
      }else{
        rows=[
            {
              "xzqmc":"辽宁省",
              "xzqdm":"xxx",
              "total":5.3,
              "rows":[
                    {
                      "name":"五等地",
                      "value":"26",
                    },
                    {
                      "name":"一等地",
                      "value":"12",
                    },
                    {
                      "name":"四等地",
                      "value":"45",
                    },
                     {
                      "name":"三等地",
                      "value":"5",
                    },
              ]
            },
            {
              "xzqmc":"四川省",
              "xzqdm":"xxx",
              "total":5.3,
              "rows":[
                    {
                      "name":"五等地",
                      "value":"26",
                    },
                    {
                      "name":"一等地",
                      "value":"12",
                    },
                    {
                      "name":"四等地",
                      "value":"45",
                    },
                     {
                      "name":"三等地",
                      "value":"5",
                    },
              ]
            }
        ]
      }

      this.mapDotData.output.value.rows = rows
    },
    //添加散点图
    addPieToMap(chart,data){
      var sd = [];
      for (var i = 0; i < data.length; i++) {
          var randomValue = 20;
          var radius = randomValue;
          // var geoCoord = geoCoordMap[data[i].name];
         
          let geoCoord = chinaData[0].features.find((item)=>{
            return item.properties.name==data[i].xzqmc
          }).properties.center
          if (geoCoord) {
              var vr = [];
              //饼图的数据不进行映射
              vr.push({
                  name: data[i].xzqmc,
                  value: data[i].total,
                  visualMap: false
              }); 
              var p = chart.convertToPixel({
                  seriesIndex: 0
              }, geoCoord);
              sd.push({
                  name: data[i].xzqmc,
                  type: 'pie',
                  // roseType: 'radius',
                  // tooltip: {
                  //     formatter: function(params) {
                  //         // return params.seriesName + "<br/>" + params.name + " : " + params.value + ' 亿元';
                  //         return params.total + ' 亩';
                  //     }
                  // },
                  radius: radius,
                  center: p,
                  data: vr,
                  zlevel: 4,
                  roam:false,
                  tooltip: {
                      formatter: '{a}<br/>{b}: {c}亿元 ({d}%)'
                  },
                  label: {
                      normal: {
                          show: true,
                          position: 'inside',
                          formatter: '{value|{c}}',
                          padding:[0,0,radius,0],
                          rich: {
                              value: {
                                  fontSize: 12,
                                  color:'#ffffff',
                              },
                          },
                      }
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },
              });
          }
      }
      //因为这个组件公用，发现配置项的series不能进行重置，所以在这里以这种方式手动重置
      mapOption.series = [ mapOption.series[0]]
      mapOption.series = mapOption.series.concat(sd)
      this.myChart.setOption(mapOption,true);
      return sd;
    },
    //重置散点图
    resetDot(chart, params) {
      var op = chart.getOption();
      var ops = op.series;
      var currentZoom = this.myChart.getOption().series[0].zoom
      

      let that = this
      ops.forEach(function(v, i) {
          if (i > 0) {
              let geoCoord = chinaData[0].features.find((item)=>{
                return item.properties.name==v.name
              }).properties.center
              var p = chart.convertToPixel({
                  seriesIndex: 0
              }, geoCoord);
              v.center = p;
              v.label = {
                  normal: {
                      show: true,
                      position: 'inside',
                      formatter: '{value|{c}}',
                      padding:[0,0,v.radius * params.zoom||v.radius,0],
                      rich: {
                          value: {
                              fontSize: 12,
                              color:'#ffffff',
                          },
                      },
                  }
              }
              //超过地图的最大最小层级  这个图表就不要再伸缩了
              if (params != 0 && params.zoom &&currentZoom!=1.5&&currentZoom!=1) {
                  v.radius = v.radius * params.zoom;
                  that.lastZoomLevel = params.zoom
                  return
              }
              
          }
      });
      chart.setOption(op, true);
    },
    //添加饼图
    addPartPieToMap(chart,data){
      var sd = [];

      for (var i = 0; i < data.length; i++) {
        var randomValue = Math.round(Math.random() * 30);
        var radius = randomValue <= 10 ? 10 : randomValue;
        let geoCoord = chinaData[0].features.find((item)=>{
          return item.properties.name==data[i].xzqmc
        }).properties.center
        if (geoCoord) {
          var vr = [];
          //饼图的数据不进行映射
          // vr.push({
          //     name: data[i].xzqmc,
          //     value: data[i].total,
          //     visualMap: false
          // }); 
          var p = chart.convertToPixel({
              seriesIndex: 0
          }, geoCoord);
          sd.push({
            name: data[i].xzqmc,
            type: 'pie',
            //clockWise: false,
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    shadowBlur: 20,
                    shadowColor: '#203665',
                    opacity:1,
                }
            },
            tooltip: {
              formatter: function(params) {
                console.log('哈哈',params)
                  // return params.seriesName + "<br/>" + params.name + " : " + params.value + ' 亿元';
                  return params.value + ' 亩';
              }
            },
            radius: [20, 30],
            // center: ['15%', '50%'],
            hoverAnimation: false,
            // radius: radius,
            center: p,
            zlevel: 4,
            data: data[i].rows
          });
        }
      }
      //因为这个组件公用，发现配置项的series不能进行重置，所以在这里以这种方式手动重置
      mapOption.series = [ mapOption.series[0]]
      mapOption.series = mapOption.series.concat(sd)
      this.myChart.setOption(mapOption,true);
      return sd;
    },
    //重置饼图
    resetPie(chart, params){
      var op = chart.getOption();
      var ops = op.series;
      ops.forEach(function(v, i) {
          if (i > 0) {
               let geoCoord = chinaData[0].features.find((item)=>{
                return item.properties.name==v.name
              }).properties.center
              var p = chart.convertToPixel({
                  seriesIndex: 0
              }, geoCoord);
              v.center = p;
              if (params != 0 && params.zoom) {
                  v.radius = v.radius * params.zoom;
              }else if (params != 0 && params.selected) {
                  var rangeFirstNumber = params.selected[0];
                  var rangeSecondNumber = params.selected[1];
                  var pd = v.data[this.typeIndex].value;
                  if (pd < rangeFirstNumber || pd > rangeSecondNumber) {
                      // v.itemStyle.normal.opacity = 0;
                      v.itemStyle = {
                          normal: {
                              label: {
                                  show: false
                              },
                              labelLine: {
                                  show: false
                              },
                              shadowBlur: 20,
                              shadowColor: '#203665',
                              opacity:0,
                          }
                      }
                  } else {
                      // v.itemStyle.normal.opacity = 1;
                      v.itemStyle = {
                          normal: {
                              label: {
                                  show: false
                              },
                              labelLine: {
                                  show: false
                              },
                              shadowBlur: 20,
                              shadowColor: '#203665',
                              opacity:1,
                          }
                      }
                  }
              }else{
                  let zoomVal = chart.getOption().series[0].zoom
                  let arr = [10, 15]
                  for(var j = 0;j<arr.length;j++){
                      arr[j] = arr[j] * zoomVal
                  }
                  v.radius = arr
              }
          
              
          }
      });
      chart.setOption(op, true);
    }
  },
}
</script>


<style lang="scss" scoped>
.chart{
  background-size: 100% 100%;
  #mapChart{
    width: 100%;
    height: 1000px;
  }
  .mapChoose {
    color: #eee;
    .title {
      padding: 5px;
      border-top: 1px solid rgba(132, 219, 233, 0.8);
      border-bottom: 1px solid rgba(147, 235, 248, 0.8);
      cursor: pointer;
    }
    .icon {
      font-family: 'simsun';
      font-size: 25px;
      margin: 0 11px;
    }
  }
}
</style>

Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）

目录

Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）

一、简单介绍

二、环境搭建

三、使用 echarts

四、自动缩放 echarts

五、数据更新，自动刷新 echart 图表

六、绘制折线图

七、绘制饼图

八、绘制全国地图

九、绘制省地图（北京为例）

 十、绘制世界地图

---

一、简单介绍

Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，vue 中添加 echarts ，然后在 vue 中简单使用 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

ECharts 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

Echarts 官网文档：Handbook - Apache ECharts

Echarts 函数简介

1、echarts. init

Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/api.html#echarts.init

echarts. init(dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number,
    renderer?: string,
    useDirtyRect?: boolean, // 从 `5.0.0` 开始支持
    ssr?: boolean,          // 从 `5.3.0` 开始支持
    width?: number|string,
    height?: number|string,
    locale?: string         // 从 `5.0.0` 开始支持
}) => ECharts

创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。

参数解释

• dom

  实例容器，一般是一个具有高宽的 DIV 元素。只有在设置opts.ssr开启了服务端渲染后该参数才是可选。

  也支持直接使用canvas元素作为容器，这样绘制完图表可以直接将 canvas 作为图片应用到其它地方，例如在 WebGL 中作为贴图，这跟使用 getDataURL 生成图片链接相比可以支持图表的实时刷新。

• theme

  应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。参见 ECharts 中的样式简介。

• opts

  附加参数。有下面几个可选项：

  • devicePixelRatio设备像素比，默认取浏览器的值window.devicePixelRatio。
  • renderer 渲染模式，支持'canvas'或者'svg'。参见 使用 Canvas 或者 SVG 渲染。
  • ssr 是否使用服务端渲染，只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染，必须要调用 renderToSVGString 方法才能得到渲染后 SVG 字符串。
  • useDirtyRect是否开启脏矩形渲染，只有在 Canvas 渲染模式有效，默认为false。参见 ECharts 5 新特性。
  • width 可显式指定实例宽度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
  • height 可显式指定实例高度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。

  • locale 使用的语言，内置 'ZH' 和 'EN' 两个语言，也可以使用 echarts.registerLocale 方法注册新的语言包。目前支持的语言见 src/i18n。

2、echartsInstance. setOption

Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/api.html#echartsInstance.setOption

echartsInstance. setOption(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

• option: ECOption

  图表的配置项和数据，具体见配置项手册。

• opts

  • notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
  • replaceMerge 可选。用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge"。详见 组件合并模式。
  • lazyUpdate 可选。在设置完 option 后是否不立即更新图表，默认为 false，即同步立即更新。如果为 true，则会在下一个 animation frame 中，才更新图表。
  • silent 可选。阻止调用 setOption 时抛出事件，默认为 false，即抛出事件。

组件合并模式

对于一种类型的组件（如：xAxis, series）：

• 如果设置opts.notMerge为true，那么旧的组件会被完全移除，新的组件会根据option创建。
• 如果设置opts.notMerge为false，或者没有设置 opts.notMerge：
  • 如果在opts.replaceMerge里指定组件类型，这类组件会进行替换合并。
  • 否则，会进行普通合并。

操作环境：

• win 10
• node v14.20.0
• npm 8.5.3
• @vue/cli 5.0.6
• vue 2.6.14
• echarts 5.3.3

二、环境搭建

1、基础的 node ,npm、vue 的环境搭建

参见博文：Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）

2、创建 vue 工程

命令：vue create project-name，这里选择的是 vue 2

3、工程创建好后，安装 echarts

命令：npm install echarts -S

三、使用 echarts

全局引入 echarts

1、main.js 组件中引入 echarts

// 引入echarts
import * as echarts from 'echarts'
// 设置全局 echarts
Vue.prototype.$echarts = echarts 

 2、添加 echart 显示容器

在 HelloWorld.vue 中修改设置一个宽高的容器

<template>
	<div class="hello">
		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
	</div>
</template>

 3、在 HelloWorld.vue 使用全局的 echarts

<script>

	export default {
		name: 'HelloWorld',
		mounted() {
			this.drawBar();
		},
		methods: {
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				// 全局使用 echarts 初始化（this.$echarts）
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				
				// 绘制图表
				myChart.setOption({
					title: {
						text: '在Vue中使用echarts'
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				});
			}
		}
	}
</script>

4、在 App.vue 引入 HelloWorld 中去除多余的，保留如图的

5、回到终端 npm run serve，在浏览器中效果

局部按需引入 echarts

6、修改 HelloWorld.vue 脚本，局部引入 echarts

<script>
	// 引入echarts
	import * as echarts from 'echarts'
	export default {
		name: 'HelloWorld',
		mounted() {
			this.drawBar();
		},
		methods: {
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				// 全局使用 echarts 
				// let myChart = this.$echarts.init(document.getElementById('myChart'))
				// 调用局部的 echarts 
				let myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				myChart.setOption({
					title: {
						text: '在Vue中使用echarts'
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				});
			}
		}
	}
</script>

四、自动缩放 echarts

Echarts本身是不支持自动缩放的，但是Echarts为我们提供了resize方法

// 设置该 chart 的 resize 方法
window.addEventListener("resize", myChart.resize);

<script>
	// 引入echarts
	import * as echarts from 'echarts'
	export default {
		name: 'HelloWorld',
		mounted() {
			this.drawBar();
		},
		methods: {
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				// 全局使用 echarts 
				// let myChart = this.$echarts.init(document.getElementById('myChart'))
				// 调用局部的 echarts 
				let myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				myChart.setOption({
					title: {
						text: '在Vue中使用echarts'
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				});
				
				// 设置该 chart 的 resize 方法
				window.addEventListener("resize", myChart.resize)
			}
		}
	}
</script>

五、数据更新，自动刷新 echart 图表

因为Echarts是数据驱动的，这意味着只要我们重新设置数据，那么图表就会随之重新渲染，这是实现本需求的基础。如果想要支持数据的自动刷新，必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。可以使用 Vue 的 watch 为我们进行数据更新监听，从而刷新 echart

1、抽出 option 属性

				option: {
					title: {
						text: '在Vue中使用echarts'
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				}

2、watch 中监听 option 数据的变化，同时更新 echart

		watch:{
			// 监听 option 更新
			option: {
				// 更新处理，也可以 handler(newVal，oldVal)
				handler(newVal){
					if(newVal){
						this.myChart.setOption(newVal)
					}
				},
				//关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
				deep: true
			},
		},

3、简单的数据更新处理函数（实际使用中从后台服务器获取数据更新）

			//添加refreshData方法进行自动更新设置数据
			refreshData() {
				// 更新定时更新函数
				setInterval(() => {
					let sDataLength = this.option.series[0].data.length
					console.log('refreshData')
					let data = []
					// 数据随机值更新
					for (let i = 0; i < sDataLength; i++) {
						data[i] = Math.floor(Math.random() * 100) + 1
					}
					// 更新数据
					this.option.series[0].data = data
				}, 1000)

4、完整代码

<template>
	<div class="hello">
		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
	</div>
</template>

<script>
	// 引入echarts
	import * as echarts from 'echarts'
	export default {
		name: 'HelloWorld',
		data() {
			return {
				myChart: null,
				option: {
					title: {
						text: '在Vue中使用echarts'
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				}
			}
		},
		watch:{
			// 监听 option 更新
			option: {
				// 更新处理，也可以 handler(newVal，oldVal)
				handler(newVal){
					if(newVal){
						this.myChart.setOption(newVal)
					}
				},
				//关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
				deep: true
			},
		},
		
		mounted() {
			this.drawBar();
		},
		methods: {
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				// 全局使用 echarts 
				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
				// 调用局部的 echarts 
				this.myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				this.myChart.setOption(this.option);

				// 设置该 chart 的 resize 方法
				window.addEventListener("resize", this.myChart.resize)
				
				// 动态刷线数据
				this.refreshData()
			},

			//添加refreshData方法进行自动更新设置数据
			refreshData() {
				// 更新定时更新函数
				setInterval(() => {
					let sDataLength = this.option.series[0].data.length
					console.log('refreshData')
					let data = []
					// 数据随机值更新
					for (let i = 0; i < sDataLength; i++) {
						data[i] = Math.floor(Math.random() * 100) + 1
					}
					// 更新数据
					this.option.series[0].data = data
				}, 1000)

			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

5、动态更新chart 效果

六、绘制折线图

1、更新 HelloWorld.vue 代码，绘制折线

<template>
	<div class="hello">
		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
	</div>
</template>

<script>
	// 引入echarts
	import * as echarts from 'echarts'
	export default {
		name: 'HelloWorld',
		data() {
			return {
				myChart: null,
				option: {
					title: {
						text: '曲线',
					},
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						data: ['昨日(11月8日)', '今日(11月9日)']
					},
					grid: {
						left: '1%',
						right: '1%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						show: false,
						feature: {
							dataZoom: {
								yAxisIndex: 'none'
							},
							dataView: {
								readOnly: false
							},
							magicType: {
								type: ['line', 'bar']
							},
							restore: {},
							saveAsImage: {}
						}
					},
					color: ["red", "#CD3333"],
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17',
							'18', '19', '20', '21', '22', '23', '24'
						]
					},
					yAxis: {
						type: 'value',
						name: '单位（kW）',
						axisLabel: {
							formatter: '{value}'
						}
					},
					series: [{
							name: '昨日(11月8日)',
							type: 'line',
							data: [110, 106, 110, 110, 318, 119, 205, 256, 156, 309, 256, 306, 206, 356, 456, 486,
								565.45, 234, 156, 206, 126, 256, 150, 276
							],

						},
						{
							type: 'line',
							name: '今日(11月9日)',
							data: [210, 136, 120, 120, 118, 219, 195, 176, 156, 329, 356, 346, 406.54, 256, 156],
						}
					]
				}
			}
		},
		watch: {
			// 监听 option 更新
			option: {
				// 更新处理，也可以 handler(newVal，oldVal)
				handler(newVal) {
					if (newVal) {
						this.myChart.setOption(newVal)
					}
				},
				//关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
				deep: true
			},
		},

		mounted() {
			this.drawBar();
		},
		methods: {
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				// 全局使用 echarts 
				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
				// 调用局部的 echarts 
				this.myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				this.myChart.setOption(this.option);

				// 设置该 chart 的 resize 方法
				window.addEventListener("resize", this.myChart.resize)

			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2、效果图

七、绘制饼图

1、更新 HelloWorld .vue 代码，绘制饼图

<template>
	<div class="hello">
		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
	</div>
</template>

<script>
	// 引入echarts
	import * as echarts from 'echarts'
	export default {
		name: 'HelloWorld',
		data() {
			return {
				myChart: null,
				option: {
					title: {
						text: '某站点用户访问来源',
						subtext: '纯属虚构',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
								value: 335,
								name: '直接访问'
							},
							{
								value: 310,
								name: '邮件营销'
							},
							{
								value: 234,
								name: '联盟广告'
							},
							{
								value: 135,
								name: '视频广告'
							},
							{
								value: 1548,
								name: '搜索引擎'
							}
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}],
				},
			}
		},
		watch: {
			// 监听 option 更新
			option: {
				// 更新处理，也可以 handler(newVal，oldVal)
				handler(newVal) {
					if (newVal) {
						this.myChart.setOption(newVal)
					}
				},
				//关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
				deep: true
			},
		},

		mounted() {
			this.drawBar();
		},
		methods: {
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				// 全局使用 echarts 
				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
				// 调用局部的 echarts 
				this.myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				this.myChart.setOption(this.option);

				// 设置该 chart 的 resize 方法
				window.addEventListener("resize", this.myChart.resize)

			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 2、效果图

八、绘制全国地图

1、下载 china.js ，引入到 assets/plugins/china.js

（注意：如果china,js 报 eslint 错误，可以使用在china.js 文件头添加 /*eslint-disable*/ 忽略 eslint 检查）

china.js 下载地址: echarts/test/data/map/js at master · apache/echarts · GitHub

1、更新 HelloWorld.vue 代码，绘制地图

<template>
	<div class="hello">
		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
	</div>
</template>

<script>
	// 局部引入 echarts
	import * as echarts from 'echarts'
	// 引入echarts
	//let echarts = require('echarts/lib/echarts')
	// 引入中国地图数据
	import '@/assets/plugins/china.js' 
	export default {
		name: 'HelloWorld',
		data() {
			return {
				myChart: null,
				option: {
					title: {
						text: 'iphone销量',
						subtext: '纯属虚构',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: ['iphone3', 'iphone4', 'iphone5']
					},
					visualMap: {
						min: 0,
						max: 2500,
						left: 'left',
						top: 'bottom',
						text: ['高', '低'], // 文本，默认为数值文本
						calculable: true
					},
					toolbox: {
						show: false,
						orient: 'vertical',
						left: 'right',
						top: 'center',
						feature: {
							dataView: {
								readOnly: false
							},
							restore: {},
							saveAsImage: {}
						}
					},
					series: [{
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [
										'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
										'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
										'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
									];
									return colorList[params.dataIndex]
								},

							}
						},
						name: 'iphone3',
						type: 'map',
						mapType: 'china',
						roam: false,
						label: {
							normal: {
								show: true
							},
							emphasis: {
								show: true
							}
						},
						data: [{
								name: '北京',
								value: this.randomData()
							},
							{
								name: '天津',
								value: this.randomData()
							},
							{
								name: '上海',
								value: this.randomData()
							},
							{
								name: '重庆',
								value: this.randomData()
							},
							{
								name: '河北',
								value: this.randomData()
							},
							{
								name: '河南',
								value: this.randomData()
							},
							{
								name: '云南',
								value: this.randomData()
							},
							{
								name: '辽宁',
								value: this.randomData()
							},
							{
								name: '黑龙江',
								value: this.randomData()
							},
							{
								name: '湖南',
								value: this.randomData()
							},
							{
								name: '安徽',
								value: this.randomData()
							},
							{
								name: '山东',
								value: this.randomData()
							},
							{
								name: '新疆',
								value: this.randomData()
							},
							{
								name: '江苏',
								value: this.randomData()
							},
							{
								name: '浙江',
								value: this.randomData()
							},
							{
								name: '江西',
								value: this.randomData()
							},
							{
								name: '湖北',
								value: this.randomData()
							},
							{
								name: '广西',
								value: this.randomData()
							},
							{
								name: '甘肃',
								value: this.randomData()
							},
							{
								name: '山西',
								value: this.randomData()
							},

							{
								name: '内蒙古',
								value: this.randomData()
							},
							{
								name: '陕西',
								value: this.randomData()
							},

							{
								name: '吉林',
								value: this.randomData()
							},
							{
								name: '福建',
								value: this.randomData()
							},
							{
								name: '贵州',
								value: this.randomData()
							},
							{
								name: '广东',
								value: this.randomData()
							},
							{
								name: '青海',
								value: this.randomData()
							},
							{
								name: '西藏',
								value: this.randomData()
							},
							{
								name: '四川',
								value: this.randomData()
							},
							{
								name: '宁夏',
								value: this.randomData()
							},
							{
								name: '海南',
								value: this.randomData()
							},
							{
								name: '台湾',
								value: this.randomData()
							},
							{
								name: '香港',
								value: this.randomData()
							},
							{
								name: '澳门',
								value: this.randomData()
							}
						]
					}]
				},
			}

		},
		watch: {
			// 监听 option 更新
			option: {
				// 更新处理，也可以 handler(newVal，oldVal)
				handler(newVal) {
					if (newVal) {
						this.myChart.setOption(newVal)
					}
				},
				//关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
				deep: true
			},
		},

		mounted() {
			this.drawBar();
		},
		methods: {
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				// 全局使用 echarts 
				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
				// 调用局部的 echarts 
				this.myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				this.myChart.setOption(this.option);

				// 设置该 chart 的 resize 方法
				window.addEventListener("resize", this.myChart.resize)
			},
			
			randomData() {
				return Math.round(Math.random() * 1000);
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

3、效果图

九、绘制省地图（北京为例）

1、下载beijing.js ，添加到assets/plugins/beijing.js

（注意：如果beijing,js 报 eslint 错误，可以使用在china.js 文件头添加 /*eslint-disable*/ 忽略 eslint 检查）

下载beijing.js地址:

echarts/test/data/map/js/province at master · apache/echarts · GitHub

 

 2、更新 HelloWorld.vue 代码，绘制北京地图

<template>
	<div class="hello">
		<div id="myChart" :style="{width: '50%', height: '400px'}"></div>
	</div>
</template>

<script>
	// 局部引入 echarts
	import * as echarts from 'echarts'
	// 引入echarts
	//let echarts = require('echarts/lib/echarts')
	// 引入中国地图数据
	import '@/assets/plugins/beijing.js'
	export default {
		name: 'HelloWorld',
		data() {
			return {
				myChart: null,
				option: {
					title: {
						text: '北京地图',
						subtext: '-。-'
					},
					tooltip: {
						trigger: 'item',
						formatter: function(a) {
							return a[2];
						}
					},
					legend: {
						orient: 'vertical',
						x: 'right',
						data: ['数据名称']
					},
					dataRange: {
						min: 0,
						max: 1000,
						color: ['orange', 'yellow'],
						text: ['高', '低'], // 文本，默认为数值文本
						calculable: true
					},
					series: [{
						name: '数据名称',
						type: 'map',
						mapType: '北京',
						selectedMode: 'single',
						itemStyle: {
							normal: {
								label: {
									show: true
								}
							},
							emphasis: {
								label: {
									show: true
								}
							}
						},
						data: [{
								name: '怀柔区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '延庆县',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '密云县',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '昌平区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '平谷区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '顺义区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '门头沟区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '海淀区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '朝阳区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '石景山区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '西城区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '东城区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '宣武区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '丰台区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '房山区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '通州区',
								value: Math.round(Math.random() * 1000)
							},
							{
								name: '大兴区',
								value: Math.round(Math.random() * 1000)
							},

						]
					}]
				},
			}

		},
		watch: {
			// 监听 option 更新
			option: {
				// 更新处理，也可以 handler(newVal，oldVal)
				handler(newVal) {
					if (newVal) {
						this.myChart.setOption(newVal)
					}
				},
				//关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
				deep: true
			},
		},

		mounted() {
			this.drawBar();
		},
		methods: {
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				// 全局使用 echarts 
				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
				// 调用局部的 echarts 
				this.myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				this.myChart.setOption(this.option);

				// 设置该 chart 的 resize 方法
				window.addEventListener("resize", this.myChart.resize)
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

3、效果图

 十、绘制世界地图

注意：也可以在：

1、下载 world.js，添加到assets/plugins/world.js

（注意：如果world,js 报 eslint 错误，可以使用在china.js 文件头添加 /*eslint-disable*/ 忽略 eslint 检查）

下载world.js地址: echarts/world.js at master · apache/echarts · GitHub

2、在 public中添加一个 jsons/world.json，然后，更新 HelloWorld.vue 代码，绘制地图

这里添加了一个 axios 进行 json 加载（npm install axios -S）

<template>
	<div class="hello">
		<div id="myChart" :style="{width: '50%', height: '400px'}"></div>
	</div>
</template>

<script>
	// 局部引入 echarts
	import * as echarts from 'echarts'
	// 引入echarts
	//let echarts = require('echarts/lib/echarts')
	// 引入中国地图数据
	import '@/assets/plugins/world.js'
	import axios from 'axios'
	export default {
		name: 'HelloWorld',
		data() {
			return {
				myChart: null,
				option: {

				}
			}
		},
		watch: {
			// 监听 option 更新
			option: {
				// 更新处理，也可以 handler(newVal，oldVal)
				handler(newVal) {
					if (newVal) {
						this.myChart.setOption(newVal)
					}
				},
				//关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
				deep: true
			},
		},

		mounted() {
			this.getWorld();
		},
		methods: {
			getWorld() {

				axios.get('jsons/world.json').then((res) => {
					let namemap = res.data.namemap
					let dataArr = res.data.dataArr
					this.drawMap(namemap, dataArr)
				})
			},
			drawMap(name, data) {
				// 基于准备好的dom，初始化echarts实例
				let chart = echarts.init(document.getElementById('myChart'))
				// 监听屏幕变化自动缩放图表
				window.addEventListener('resize', function() {
					chart.resize()
				})
				// 绘制图表
				chart.setOption({
					// 图表主标题
					title: {
						text: '世界地图', // 主标题文本，支持使用 \n 换行
						top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
						left: 'center', // 值: 'left', 'center', 'right' 同上
						textStyle: { // 文本样式
							fontSize: 24,
							fontWeight: 600,
							color: '#000'
						}
					},
					grid: {
						width: '100%',
						height: '100%',
						left: '0%',
						right: '0%',
						bottom: '0%',
						containLabel: true
					},
					// 提示框组件
					tooltip: {
						trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
						// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
						// 使用函数模板  传入的数据值 -> value: number | Array
						formatter: function(val) {
							if (val.data == null) return;
							return val.data.name + ': ' + val.data.value
						}
					},
					// 视觉映射组件
					visualMap: {
						min: 0,
						max: 10000,
						text: ['max', 'min'],
						realtime: false,
						calculable: true,
						color: ['#0064d0', '#c3e0ff'],
					},
					series: [{
						type: 'map', // 类型
						// 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
						name: '世界地图',
						mapType: 'world', // 地图类型
						// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
						roam: true,
						// 图形上的文本标签
						label: {
							show: false // 是否显示对应地名
						},
						zoom: 1.2,
						// 地图区域的多边形 图形样式
						itemStyle: {
							// areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
							borderWidth: 0.5, // 描边线宽 为 0 时无描边
							borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
							borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
						},
						// 高亮状态下的多边形和标签样式
						emphasis: {
							label: {
								show: true, // 是否显示标签
								color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
							},
							itemStyle: {
								areaColor: '#FF6347' // 地图区域的颜色
							}
						},
						// 自定义地区的名称映射
						nameMap: name,
						// 地图系列中的数据内容数组 数组项可以为单个数值
						data: data
					}]
				})

			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

3、效果图