謹以此篇獻 給那些在 用echarts做中國地圖 很懊惱的程序媛（員） 真的不想讓你們在走彎路

節省時間去刷刷抖音他不香嗎？？

1、在echarts的官網上 根據命令安裝

npm install echarts --save

2、echarts3.0版本之后 已經不再跟中國地圖相關的json、js文件了

我們需要到github上下載china.js文件引入到vue文件里

地址：GitHub - liangrumeng2015/China.js: echarts里面的地圖文件China.js

一定要從這里面下載，在別人的百度網盤里下載，很有可能會出錯（我就差點被淹死在這里）

3、china.js引入到我們的vue文件里

<template><div class="mapChart"><h2 class="title-item">{{ title }}</h2><div :id="id" class="midtop"></div></div> </template> <script> import * as echarts from "echarts"; import "@/assets/china.js"; export default {name: "MapChart",mixins: [resize],props: {id: {type: String,default: "",required: true,},chartData: {type: Array,default: () => [],required: true,},title: {type: String,default: "",required: true,},},data() {return {chart: null,};},watch: {chartData: {deep: true,handler(val) {this.setOptions(val);},},},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},mounted() {this.$nextTick(() => {this.initChart();});},methods: {initChart() {this.chart = echarts.init(document.getElementById(this.id));this.setOptions(this.chartData);this.chart.on('click',function(params){console.log(params.name);})},setOptions(data = []) {this.chart.setOption({tooltip: {trigger: "item",formatter: "{b}<br/>{c} (人)",},toolbox: {show: true,orient: "vertical",left: "right",top: "center",feature: {dataView: { readOnly: false },restore: {},saveAsImage: {},},},visualMap: {min: 800,max: 50000,text: ["High", "Low"],realtime: false,calculable: true,left:'5%',bottom:'8%',textStyle:{color:"#fff"},color:'#fff',inRange: {color: ["lightskyblue", "yellow", "orangered"],},},series: [{type: "map",map: "china",label: {show: true,color:'yellow'},data,},],});},}, }; </script> <style scoped lang='scss'> .mapChart {.title-item {text-align: center;width: 100%;font-size: 12px;font-weight: normal;letter-spacing: 2px;font-weight: normal;overflow: hidden;}.midtop {width: 99%;height: 430px;} } </style>

到這里，我的就可以顯示了，你們快去驗證一下吧。

?不要放棄哦~

總結

以上是生活随笔為你收集整理的echarts最新版做中国地图（详细版+避雷版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。