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>// 引入echartsimport * 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>// 引入echartsimport * 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.lengthconsole.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>// 引入echartsimport * 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.lengthconsole.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>// 引入echartsimport * 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>// 引入echartsimport * 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>// 局部引入 echartsimport * 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>// 局部引入 echartsimport * 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>// 局部引入 echartsimport * 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.namemaplet dataArr = res.data.dataArrthis.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 | Arrayformatter: 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、效果图