美文网首页
vue中引用echart

vue中引用echart

作者: 丰起云啸 | 来源:发表于2018-09-04 10:24 被阅读0次

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

相关文章

网友评论

      本文标题:vue中引用echart

      本文链接:https://www.haomeiwen.com/subject/pvxgwftx.html