vue中引用echart

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm in...
    余生社会阅读 2,959评论 0 2
  • 话说最近一直在攻在网上花二十块大洋买的vue音乐播放器项目,收获颇多!对vue项目整体的流程有了更进一步的了解,打...
    示十阅读 17,305评论 2 7
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,142评论 1 4
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,163评论 0 29
  • “看再多的书,了解再多的讯息,如果只有输入,没有输出,那充其量只能算是你获得了信息,只有当你将获得的信息通过内化升...
    盈盈_f574阅读 1,737评论 0 4

友情链接更多精彩内容