1. 這個圖表是官網(wǎng)推薦的盔腔，以下 首先是 官網(wǎng)的demo 喷屋，這個是碼云的地址
大家也可以去 DCloud官網(wǎng)找更多適合自己的demo
話不多說先上大圖琳拨，微信掃一掃先看看效果哈
圖例.png
a.條形圖又叫柱狀圖
image.png
b. 餅圖
圖例.png
c. 環(huán)形圖
image.png
2. 起初剛看項(xiàng)目的時候，也是一臉懵啊屯曹，拿柱形圖示例狱庇，其他圖同理哈
image.png
這個圖，其實(shí)項(xiàng)目需要的x軸 上只要一個柱子就行恶耽，也就是這樣的
image.png
怎么改呢密任？ 原本以為是 view視圖已經(jīng)寫好是幾個柱子，只需要設(shè)置值就行偷俭，但是研究了半天發(fā)現(xiàn)并沒有浪讳，這樣的方法，后來才發(fā)現(xiàn)涌萤，原來貓膩在這里淹遵。
還得看json數(shù)據(jù)
圖1.png
這個圖是用看的json解析器,也推薦給大家
image.png
再來看箭頭所指的兩個集合 categories（是x軸的值），series（是對應(yīng)x.軸的y值形葬，也是控制對應(yīng)x坐標(biāo)上邊的y值）合呐，看圖1，
注意看箭頭笙以，res.data.data.ColumnB.series[0]; 為什么只賦值 集合series第一個對象給 Column的series集合呢淌实，就是因?yàn)閞es.data.data.ColumnB.series集合的長度控制 對應(yīng)x軸的x坐標(biāo)顯示的 幾個柱子
對比圖再來看下：注意看紅色框框的區(qū)別
image.png
再說一點(diǎn)哈 ，圖中的這個是可以點(diǎn)擊的猖腕，當(dāng)然不想要點(diǎn)擊效果拆祈，可以修改如下代碼
image.png
下載官網(wǎng)的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
});
},
注意看箭頭倘感，官網(wǎng)給的demo是 >=0放坏，改為>=1即可，代表當(dāng)圖例Legend的個數(shù)是大于等于1才可以執(zhí)行老玛，if里的代碼 應(yīng)該是控制圖例的顯示隱藏淤年，
image.png
圖例即：
image.png
