vue集成echarts，vue+echarts实现中国地图和河南省地图

安装echarts

npm install echarts -D

配置echarts

在项目src目录下main.js文件中加入配置：

import echarts from 'echarts' Vue.use(echarts)

使用

画一个中国地图：

<template> <div id="echartId" class="o-echarts"></div> </template> <script> import echarts from 'echarts' import JSON from 'echarts/map/json/china.json' export default { name: "ChinaList", data(){ return{ option: { title: { //表头 text: '全国疫情累计确诊数汇总', subtext: '最新疫情病例数量显示', top: '3%', left: '5%', textStyle: { // 文字样式 fontSize: 30, fontWeight: 300, color: 'green' } }, tooltip: { // 鼠标悬浮时显示的内容 padding: 10, backgroundColor: 'rgba(0,0,0,0.7)', borderRadius: 8, formatter: params => { return `<div> ${params.data.name}：<br/> 累计确诊人数->${params.data.value}<br/> 当前确诊人数->${params.data.obj}<br/> 疑似病例人数->${params.data.suspectedCount}<br/> 治愈人数->${params.data.curedCount}<br/> 死亡人数->${params.data.deadCount}<br/> </div> `; //鼠标悬浮数据 } }, toolbox: { // 右侧复位下载 show: true, orient: "vertical", right: "20", top: "center", feature: { mark: { show: true }, restore: { show: true }, saveAsImage: { show: true } } }, legend: { orient: 'vertical', top: '9%', left: '5%', icon: 'circle', data: [], selectedMode: 'single', selected: {}, itemWidth: 12, itemHeight: 12, itemGap: 30, inactiveColor: '#b6d7ff', textStyle: { color: '#ec808d', fontSize: 14, fontWeight: 300, padding: [0, 0, 0, 15] } }, visualMap: { // 左侧小导航图标 //min: 0, //max: 500, show: true, //splitNumber: 5, splitList: [ { start: 1000 }, { start: 500, end: 1000 }, { start: 100, end: 500 }, { start: 50, end: 100 }, { start: 0, end: 50 } ], color: [ "#70161D", "#CB2A2F", "#E55A4E", "#F59E83", "#FDEBCF" ], /*inRange: { color: ['#FDEBCF', '#F59E83', '#E55A4E', '#CB2A2F', '#70161D']//.reverse() },*/ textStyle: { color: '#000000' } }, geo: { map: '中国', label: { normal: { show: true, color: '#000000' }, emphasis: { show: true, color: '#000000' } }, roam: true, itemStyle: { normal: { areaColor: '#8db200', borderColor: '#6367ad', borderWidth: 1 }, emphasis: { areaColor: '#F3FE10' // hover效果 } }, left: '15%', right: '0%', top: '5%', bottom: '5%' }, series: [{ name: '累计确诊数汇总', //系列名称 type: 'map', //地图 geoIndex: 0, // 不可缺少，否则无tooltip 指示效果 data: [] }] } } }, mounted() { this.$axios.get('/bpi/apis/dst/ncov/spreadQuery',{headers:{apicode:'f1353145fd6c42ee9a9d10e61fc823ad'}}).then(result=>{ console.log(result.data.newslist) let str = result.data.newslist.map(pro=>{ return { name: pro.provinceShortName, value:pro.confirmedCount, //累计确诊数 obj:pro.currentConfirmedCount, //当前确诊数 suspectedCount:pro.suspectedCount,//疑似 curedCount:pro.curedCount,//治愈 deadCount:pro.deadCount //死亡 } }) this.option.series[0].data=str let echartObj = echarts.init(document.getElementById('echartId')); echarts.registerMap('中国', JSON); echartObj.setOption(this.option); }).catch(err=>{ console.log(err.message); }) } } </script> <style scoped> .o-echarts { width:900px; height:550px; } .show_hover{ background-color: rgba(75,78,81,.5); } </style>

河南省地图

<template> <div id="echartId" class="o-echarts"></div> </template> <script> import echarts from 'echarts' import JSON from 'echarts/map/json/province/henan.json'; export default { data(){ return{ option: { title: { text: '河南省确诊数汇总', subtext: '最新疫情病例数量显示', top: '3%', left: '5%', textStyle: { fontSize: 30, fontWeight: 300, color: 'green' } }, tooltip: { padding: 10, backgroundColor: 'rgba(0,0,0,0.7)', borderRadius: 8, formatter: params => { return `<div> ${params.data.name}：<br/> 累计确诊人数->${params.data.value}<br/> 当前确诊人数->${params.data.obj.currentConfirmedCount}<br/> 疑似病例人数->${params.data.obj.suspectedCount}<br/> 治愈人数->${params.data.obj.curedCount}<br/> 死亡人数->${params.data.obj.deadCount}<br/> </div> `; //鼠标悬浮数据 } }, toolbox: { // 右侧复位下载 show: true, orient: "vertical", right: "20", top: "bottom", feature: { mark: { show: true }, restore: { show: true }, saveAsImage: { show: true } } }, legend: { orient: 'vertical', top: '9%', left: '5%', icon: 'circle', data: [], selectedMode: 'single', selected: {}, itemWidth: 12, itemHeight: 12, itemGap: 30, inactiveColor: '#b6d7ff', textStyle: { color: '#ec808d', fontSize: 14, fontWeight: 300, padding: [0, 0, 0, 15] } }, visualMap: { show: true, splitList: [ { start: 1000 }, { start: 500, end: 1000 }, { start: 100, end: 500 }, { start: 50, end: 100 }, { start: 0, end: 50 } ], color: [ "#70161D", "#CB2A2F", "#E55A4E", "#F59E83", "#FDEBCF" ], textStyle: { color: '#000000' } }, geo: { map: '河南省', label: { normal: { show: true, color: '#000000' }, emphasis: { show: true, color: '#000000' } }, roam: true, itemStyle: { normal: { areaColor: '#8db200', borderColor: '#6367ad', borderWidth: 1 }, emphasis: { areaColor: '#F3FE10' // hover效果 } }, left: '15%', right: '0%', top: '5%', bottom: '5%' }, series: [{ name: '累计确诊数汇总', //系列名称 type: 'map', //地图 geoIndex: 0, // 不可缺少，否则无tooltip 指示效果 data: [] }] } } }, mounted() { this.$axios.get('/bpi/apis/dst/ncov/spreadQuery',{headers:{apicode:'f1353145fd6c42ee9a9d10e61fc823ad'}}).then(result=>{ console.log(result.data.newslist) let str = result.data.newslist[18].cities.map(pro=>{ return { name: pro.cityName+'市', value:pro.confirmedCount, //累计确诊数 obj:{ currentConfirmedCount:pro.currentConfirmedCount, //当前确诊数 suspectedCount:pro.suspectedCount,//疑似 curedCount:pro.curedCount,//治愈 deadCount:pro.deadCount //死亡 } } }) console.log(str) this.option.series[0].data=str let echartObj = echarts.init(document.getElementById('echartId')); echarts.registerMap('河南省', JSON); echartObj.setOption(this.option); }).catch(err=>{ console.log(err.message); }) } } </script> <style scoped> .o-echarts { width:680px; height:550px; } .show_hover{ background-color: rgba(75,78,81,.5); } </style>