echart在前端是最常用的图表插件
1.下载echart npm install echarts --save
2.vue 全局引用 在main.js中 引入 import echarts from 'echarts' 挂载 Vue.prototype.$echarts = echarts (非vue的自己的插件 都要挂载)
3.在组件使用 必须this继承过来 this.myChart = this.$echarts.init(document.getElementById('right_top'));
4.直接用setOption 数据即可 this.myChart.setOption(data) data={} 详情看官网
echart 引入地图的问题
1.按上面初始化之后
2.引入地图文件,如果是json的就axios请求文件,如果是js文件就script引入或者import引入
this.myChart.setOption( {
series: [
{
name: '长沙分局流量',
type: 'map',
map: 'hncs',
zoom: 1,
itemStyle:{
normal:{label:{show:true,fontSize: 11}},
emphasis:{label:{show:true,fontSize: 11}}
},
data: dataMaps
}]
})
getChatData () {
axios.get('data/static/hncs.json').then(result => {
echarts.registerMap('hncs', result.data)
})
}
地图是js文件的可以看https://blog.csdn.net/m0_37723113/article/details/81282205
网友评论