一、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>
四、界面渲染效果：
