1. 這個圖表是官網推薦的，以下 首先是 官網的demo ，這個是碼云的地址

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

話不多說先上大圖，微信掃一掃先看看效果哈

圖例.png

a.條形圖又叫柱狀圖

image.png

b. 餅圖

圖例.png

c. 環(huán)形圖

image.png

2. 起初剛看項目的時候，也是一臉懵啊，拿柱形圖示例，其他圖同理哈

image.png

這個圖，其實項目需要的x軸 上只要一個柱子就行，也就是這樣的

image.png

怎么改呢？ 原本以為是 view視圖已經寫好是幾個柱子，只需要設置值就行，但是研究了半天發(fā)現并沒有，這樣的方法，后來才發(fā)現，原來貓膩在這里。
還得看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坐標顯示的 幾個柱子

對比圖再來看下：注意看紅色框框的區(qū)別

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才可以執(zhí)行，if里的代碼 應該是控制圖例的顯示隱藏，

image.png

圖例即：

image.png

大功告成over