Vue2+ECharts二次封装绘图组件

1：如何封装组件

见案例（组件函数）《testTs》

调用组件函数

效果如图

当点到lb，也就是index为1的元素，la就会消失

2：ECharts绘制图形（三维柱状图）

实例

修改只需要修改xList和yList的值即可

3：ECharts绘制饼状图

修改只需要修改xList和yList的值即可

4：封装饼状图组件并调用

饼状图组件

调用饼状图组件

5：绘制柱状图组件并调用

柱状图组件

调用测试案例

ponents/ECharts/bar-many.vue’ export default { data(){ return { xList: [‘2012’, ‘2013’, ‘2014’, ‘2015’, ‘2016’], yList: { ‘Forest’: [300, 332, 301, 334, 390], ‘Steppe’: [220, 182, 191, 234, 290], ‘Desert’: [150, 232, 201, 154, 190] } } }, components:{ barMany }, methods:{ add(){ this.yList = { ‘Forest’: [100, 100, 100, 50, 100], ‘Steppe’: [220, 182, 191, 234, 290], ‘Desert’: [150, 232, 201, 154, 190] } this.xList = [‘2012’, ‘2013’, ‘2014’, ‘2015’, ‘2016’] } } }

精彩链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：