Vue --- 图表

1. 这个图表是官网推荐的，以下 首先是 官网的demo ，这个是码云的地址

大家也可以去 DCloud官网找更多适合自己的demo

话不多说先上大图，微信扫一扫先看看效果哈

图例.png

a.条形图又叫柱状图

image.png

b. 饼图

图例.png

c. 环形图

image.png

2. 起初刚看项目的时候，也是一脸懵啊，拿柱形图示例，其他图同理哈

image.png

这个图，其实项目需要的x轴 上只要一个柱子就行，也就是这样的

image.png

怎么改呢？ 原本以为是 view视图已经写好是几个柱子，只需要设置值就行，但是研究了半天发现并没有，这样的方法，后来才发现，原来猫腻在这里。
还得看json数据

图1.png

这个图是用看的json解析器,也推荐给大家

image.png

再来看箭头所指的两个集合 categories（是x轴的值），series（是对应x.轴的y值，也是控制对应x坐标上边的y值），看图1，

注意看箭头，res.data.data.ColumnB.series[0]; 为什么只赋值 集合series第一个对象给 Column的series集合呢，就是因为res.data.data.ColumnB.series集合的长度控制 对应x轴的x坐标显示的 几个柱子

对比图再来看下：注意看红色框框的区别

image.png

再说一点哈 ，图中的这个是可以点击的，当然不想要点击效果，可以修改如下代码

image.png

下载官网的demo，看

image.png

touchColumn(e) {
                canvaColumn.showToolTip(e, {
                    format: function(item, category) {
                        if (typeof item.data === 'object') {
                            return category + ' ' + item.name + ':' + item.data.value
                        } else {
                            return category + ' ' + item.name + ':' + item.data
                        }
                    }
                });
                canvaColumn.touchLegend2(e, {
                    animation: true
                });
            },

注意看箭头，官网给的demo是 >=0，改为>=1即可，代表当图例Legend的个数是大于等于1才可以执行，if里的代码 应该是控制图例的显示隐藏，

image.png

图例即：

image.png

大功告成over