今天为大家带来vue 引入echarts 的办法,也是新手最可以看懂的办法!!!
(如果可行,并且看懂,请帮忙给我点个赞吧,谢谢!!!)
第一步: 安装 echarts :npm i echarts
第二步: 引入(我这是整体引入,建议最好按需引入 注意:最好不要在入口文件中引入)
1,直接 复制到你需要用到echarts的组件中 import echarts from 'echarts'
2,完成 是不是很简单呢。哈哈
下面来介绍实际使用!!!
1,打开echarts官网 选择 菜单中的 实例 (https://echarts.baidu.com/examples/)
2,看到符合你项目的可视化图表直接点进去,举例:

3,复制代码到vue中,下图中 option 就是复制的代码,要放到 return 中 这样才能渲染

4,随便写个div 给上id 方便获取

5,渲染这个echarts 我是用了axios 调用了数据 myChart 就是获取你自己创建的元素
myChart.setOption(this.option); 这句话就是渲染 echarts

6,完成
希望大家可以给点个赞,谢谢大家!!!!
网友评论