1.echarts版本需要 4.9
2.需要修改引入
3.最重要的一點,build文件夾裏,註釋這個
4.
<template> <div id="china_map_box"> <div id="china_map"></div> </div> </template> <script> // import echarts from "echarts"; import * as echarts from 'echarts' import 'echarts/map/js/china.js' export default { data() { return { //echart 配製option options: { tooltip: { triggerOn: "mousemove", //mousemove、click padding:8, borderWidth:1, borderColor:'#409eff', backgroundColor:'rgba(255,255,255,0.7)', textStyle:{ color:'#000000', fontSize:13 }, formatter: function(e, t, n) { let data = e.data; //模擬數據 data.specialImportant = Math.random()*1000 | 0; data.import = Math.random()*1000 | 0; data.compare = Math.random()*1000 | 0; data.common = Math.random()*1000 | 0; data.specail = Math.random()*1000 | 0; let context = ` <div> <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p> <p class="tooltip_style"><span class="tooltip_left">事件總數</span><span class="tooltip_right">${data.value}</span></p> <p class="tooltip_style"><span class="tooltip_left">特別重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p> <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p> <p class="tooltip_style"><span class="tooltip_left">較大事件</span><span class="tooltip_right">${data.compare}</span></p> <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p> <p class="tooltip_style"><span class="tooltip_left">特寫事件</span><span class="tooltip_right">${data.specail}</span></p> </div> ` return context; } }, visualMap: { show:true, left: 26, bottom: 40, showLabel:true, pieces: [ { gte: 100, label: ">= 1000", color: "#1f307b" }, { gte: 500, lt: 999, label: "500 - 999", color: "#3c57ce" }, { gte: 100, lt:499, label: "100 - 499", color: "#6f83db" }, { gte: 10, lt: 99, label: "10 - 99", color: "#9face7" }, { lt:10, label:'<10', color: "#bcc5ee" } ] }, geo: { map: "china", scaleLimit: { min: 1, max: 2 }, zoom: 1, top: 120, label: { normal: { show:true, fontSize: "14", color: "rgba(0,0,0,0.7)" } }, itemStyle: { normal: { //shadowBlur: 50, //shadowColor: 'rgba(0, 0, 0, 0.2)', borderColor: "rgba(0, 0, 0, 0.2)" }, emphasis: { areaColor: "#f2d5ad", shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } } }, series: [ { name: "突發事件", type: "map", geoIndex: 0, data:[] } ] }, //echart data dataList: [ { name: "南海諸島", value: 100, eventTotal:100, specialImportant:10, import:10, compare:10, common:40, specail:20 }, { name: "北京", value: 540 }, { name: "天津", value: 130 }, { name: "上海", value: 400 }, { name: "重慶", value: 750 }, { name: "河北", value: 130 }, { name: "河南", value: 830 }, { name: "雲南", value: 110 }, { name: "遼寧", value: 19 }, { name: "黑龍江", value: 150 }, { name: "湖南", value: 690 }, { name: "安徽", value: 60 }, { name: "山東", value: 39 }, { name: "新疆", value: 4 }, { name: "江蘇", value: 31 }, { name: "浙江", value: 104 }, { name: "江西", value: 36 }, { name: "湖北", value: 52 }, { name: "廣西", value: 33 }, { name: "甘肅", value: 7 }, { name: "山西", value: 5 }, { name: "內蒙古", value: 778 }, { name: "陝西", value: 22 }, { name: "吉林", value: 4 }, { name: "福建", value: 18 }, { name: "貴州", value: 5 }, { name: "廣東", value: 98 }, { name: "青海", value: 1 }, { name: "西藏", value: 0 }, { name: "四川", value: 44 }, { name: "寧夏", value: 4 }, { name: "海南", value: 22 }, { name: "臺灣", value: 3 }, { name: "香港", value: 5 }, { name: "澳門", value: 555 } ] }; }, methods: { //初始化中國地圖 initEchartMap() { let mapDiv = document.getElementById('china_map'); let myChart = echarts.init(mapDiv); myChart.setOption(this.options); }, //修改echart配製 setEchartOption(){ this.options.series[0]['data'] = this.dataList; } }, created() { this.setEchartOption(); }, mounted() { this.$nextTick(()=>{ this.initEchartMap(); }) } }; </script> <style> #china_map { width: 100%; height: 800px; } </style>