一、vue中引入echart
1、安装echarts: npm install echarts --save
2、在main.js文件中引入echarts实例: Vue.prototype.$echarts = echarts
3、在需要用到echart图形的vue文件中引入: import echarts from "echarts";
4、如果用到map（地图），还需要导入地图对应的的JS文件：
import '../../../node_modules/echarts/map/js/province/yunnan.js'
import '../../../node_modules/echarts/map/js/province/fujian.js'
5、map（地图）对应的资源文件有两种，一种是导入JS文件，一种是读取JSON文件，在vue项目中，map对应的资源文件存在于node_moudles中的echarts文件夹，当然在vue中可以通过http请求去读取地图对应的JSON文件，但是要求JSON文件必须在static文件中，不然http请求失败。
二、项目的目录结构：
三、引入echarts的四种方式：
<template> <div> <div class="echarts"> <div class="box" ref="WorldEchart"></div> <div class="box" ref="ChinaEchart"></div> <div class="box" ref="YunnanEChart"></div> <div class="box" ref="GuangXiEChart"></div> </div> </div> </template> <script> import echarts from "echarts"; import '../../../node_modules/echarts/map/js/province/yunnan.js' import '../../../node_modules/echarts/map/js/province/fujian.js' export default { data() { return { world: require('../../../node_modules/echarts/map/json/world.json'), //地图json数据 } }, mounted() { this.ByRequired(this.world); //通过require读取json文件 this.ByStaticJson();//通过post请求方式读取json文件，但要求json文件必须在vue工程下的static文件夹 this.ByGeoRegister();//通过geo设置地图属性再注册到echart实例中 this.ByMapName();//通过直接设置 map: "地图名称", 这里需要注意世界地图和全国地图需要用world和china单词，各个
省会用中文，直接使用地图名称必须保证已经引入地图对应的js文件，即 import '../../**/.js(推荐使用这种)
}, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); //销毁echart实例 this.chart = null; }, methods: { ByRequired(world){ this.$nextTick(()=>{ var myChart = this.$echarts.init(this.$refs.WorldEchart); echarts.registerMap('dalian', world,{}); myChart.setOption({ series: [{ name:'大连市', label: { normal: { show: true, }, emphasis: { show: true } }, itemStyle: { color: '#ddb926' }, type: 'map', zoom: 1,//缩放比例能控制echart图形在dom中的大小 roam: true, mapType: 'dalian', emphasis: { label: { show: true } }, // 文本位置修正 textFixed: { Alaska: [20, -20] }, data: [{ name: '瓦房店市', value: 4822023 }, { name: '普兰店市', value: 731449 }, { name: '庄河市', value: 6553255 }, { name: '金州区', value: 949131 }, { name: '长海县', value: 8041430 }, { name: '甘井子区', value: 5187582 }, { name: '沙河口区', value: 3590347 }, { name: '西岗区', value: 917092 }, { name: '中山区', value: 632323 }, { name: '旅顺口区', value: 9317568 } ] }], //右下角数值条 visualMap: { left: 'right', min: 1, max: 100, inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] }, //text: ['High', 'Low'], // 文本，默认为数值文本 calculable: true }, tooltip: { trigger: 'item', showDelay: 0, transitionDuration: 0.2, formatter: function(params) { var value = (params.value + '').split('.'); value = value[0].replace(/(d{1,3})(?=(?:d{3})+(?!d))/g, '$1,'); return params.seriesName + '<br/>' + params.name + ': ' + value; } }, }); }) }, ByStaticJson() { let myChartbyjson = echarts.init(this.$refs.ChinaEchart); //这里是为了获得容器所在位置 var mapJsonPath = "/static/china.json"; //json文件的相对路径 $.get(mapJsonPath, function(mapJson) { echarts.registerMap("china", mapJson); // 注册地图 let option = { zoom:2, series: [{ name: this.selCity, itemStyle:{ normal:{ label:{ show:true, textStyle: { color: "#231816" } }, areaStyle:{color:'#B1D0EC'}, color:'#ff0000', borderColor:'#dadfde'//区块的边框颜色 }, emphasis:{//鼠标hover样式 label:{ show:true, textStyle:{ color:'#fa4f04' } } } }, type: "map", mapType: "china", // 自定义扩展图表类型 label: { show: true, }, }, ], }; myChartbyjson.setOption(option); myChartbyjson.on('click', function (param) { alert(param.name); //遍历取到provincesText 中的下标 去拿到对应的省js for(var i= 0 ; i < provincesText.length ; i++ ){ if(param.name == provincesText[i]){ //显示对应省份的方法 // showProvince(provinces[i]) ; showProvince(provinces[i],provincesText[i]) break ; } } }); }); }, ByGeoRegister() { let myChart = echarts.init(this.$refs.YunnanEChart); //这里是为了获得容器所在位置 window.onresize = myChart.resize; myChart.setOption({ // 进行相关配置 backgroundColor: "#02AFDB", tooltip: {}, // 鼠标移到图里面的浮动提示框 dataRange: { show: false, min: 0, max: 1000, text: ['High', 'Low'], realtime: true, calculable: true, color: ['orangered', 'yellow', 'lightskyblue'] }, geo: { // 这个是重点配置区 map: '云南', // 表示中国地图 roam: true, label: { normal: { show: true, // 是否显示对应地名 textStyle: { color: 'rgba(0,0,0,0.4)' } } }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis: { areaColor: null, shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, series: [{ type: 'scatter', coordinateSystem: 'geo' // 对应上方配置 }, { name: '启动次数', // 浮动框的标题 type: 'map', geoIndex: 0, data: [{ "name": "北京", "value": 599 }, { "name": "上海", "value": 142 }, { "name": "黑龙江", "value": 44 }, { "name": "深圳", "value": 92 }, { "name": "湖北", "value": 810 }, { "name": "四川", "value": 453 }] } ] }) }, ByMapName() { let that = this; this.mychart = this.$echarts.init(this.$refs.GuangXiEChart); // 绘制图表 this.mychart.setOption({ backgroundColor: "#404a59", zoom:2, title: { text: "福建", top: 25, left: "center", textStyle: { fontSize: 25, fontWeight: 650, color: "#fff", }, }, tooltip: { trigger: "item", formatter: function(val) { return "<br>人数: " + 1 + "人"; }, }, toolbox: { show: true, orient: "vertical", left: "right", top: "center", feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {}, }, }, series: [{ type: "map", map: "福建", //这里需要注意呀, //mapType: "浙江", // 是否开启鼠标缩放和平移漫游 默认不开启 itemStyle: { normal: { areaColor: "#323c48", borderColor: "#111", }, emphasis: { areaColor: "#2a333d", label: { show: true, color: "white", }, }, }, roam: true, top: 70, label: { show: true, // 是否显示对应地名 }, data: this.cityDatas, }, ], }); this.mychart.on("click", function(params) { //地图添加点击事件，当点击区域块的时候，params.name能够取到区域的名称：云南，北京... alert(params.data.code); console.log(JSON.stringify(params)); }); } } } </script> <style> .echarts{ position:absolute; top:0; left:0; width: 100%; height:100%; } .box{ width: 50%; height: 50%; float:left; line-height: inherit; } </style>
四、界面渲染效果：
