[转](1条消息)Vue项目中引入Echarts(转载请删除括号里的内容)

最新推荐文章于 2022-07-23 15:31:42 发布

树根朽木

最新推荐文章于 2022-07-23 15:31:42 发布

阅读量323

点赞数

分类专栏： Vue'

原文链接：https://blog.csdn.net/weixin_37861326/article/details/80775326

版权

Vue' 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在Vue项目中使用Echats，可以极大程度的方便完成很多Canvas功能。

1. 安装Echats

npm install echarts --save

2.项目main.js中引入Echarts

// 引入Echartsimport Echarts from 'echarts'Vue.prototype.echarts = EchartsVue.use(Echarts)

3.项目中使用，挂载到一个div标签上

html

<div id="echarts" :style="{width: '300px', height: '300px'}"></div>

mounted() {      var dom = document.getElementById('echarts')      var myChart = this.echarts.init(dom)      // 绘制图表      myChart.setOption({        series: [{          name: '访问来源',          type: 'pie',          radius: '55%',          data: [{              value: 235,              name: '视频广告'            },            {              value: 274,              name: '联盟广告'            },            {              value: 310,              name: '邮件营销'            },            {              value: 335,              name: '直接访问'            },            {              value: 400,              name: '搜索引擎'            }          ]        }]      });    },

显示效果