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
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
