v-charts的那些坑

每次用到 v-charts 我都一陣頭疼，由於明明是相同的功能，可是我好像每次用到的解決方法都不同？？每次都是在api中各類查，各類嘗試...
直到作了個各類數據圖形的需求，決定仍是好好整理一下吧～～

本文涉及到的文檔：
v-chart文檔地址
v-chart源（echarts）文檔
可選擇的圖表插件：
G2圖表插件，你可選擇的不止一種～

本篇涉及到：

• label（餅圖） 數據展現
• label（雷達） 數據更替
• 餅圖 數據顏色更改
• 柱狀圖 x軸標尺旋轉
• 柱狀圖 x軸標尺所有展現

---

setOption下的屬性均可以直接使用，紅框標註的是最經常使用的一些屬性，若是有些屬性沒用失效，不妨給傳入的屬性值放入options中，以下面餅圖中的 colors 屬性

---

餅狀圖事例

<ve-pie 
    :data="readAbilityIntervalData.pieData"   
    :tooltip-visible="false" 
    :settings="readAbilityIntervalData.settings" 
    :colors="options.colors"
>
</ve-pie>

readAbilityIntervalData: {
    pieData: {
        columns: ['distributionName', 'ratio'], 
        rows: [    // 數據
            {
                "distributionName":"落後",
                "ratio":"8"  //  8% X  只能傳入number  8% 不識別
            },
            {
                "distributionName":"不足",
                "ratio":"13"
            },
            {
                "distributionName":"通常",
                "ratio":"39"
            },
            {
                "distributionName":"良好",
                "ratio":"30"
            },
            {
                "distributionName":"優秀",
                "ratio":"7"
            },
            {
                "distributionName":"拔尖",
                "ratio":"3"  
            }
        ]
    },
    msg: '',
    settings: {
        dataType: 'percent',
        label: {
            show: true,
            position: 'outside',
            formatter: '{c}%',  //  展現若是須要％
        }
    }
},
// 重置顏色，圖標若是須要顏色，優先從用戶提供的colors中依次提取，用戶不提供，則根據默認的顏色進行選取
options: {
    colors: ['#6ab58f','#80c5d8', '#c8abda', '#dcdb5e', '#e89b84', '#abb7bb','#76d2d2']
},

1. colors屬性雖然也在 setOptions下面，可是在傳值時必須在options對象中，且對應的屬性值類型爲Array

2. label.formatter屬性：

   字符串模板 模板變量有： // 模版變量能夠直接使用
      {a}：系列名。 {b}：數據名。 {c}：數據值。
      {@xxx}：數據中名爲'xxx'的維度的值，如{@product}表示名爲'product'` 的維度的值。
      {@[n]}：數據中維度n的值，如{@[3]}` 表示維度 3 的值，從 0 開始計數。

---

柱形圖事例

// 根據數據列表進行循環 1-6年級
<div :class="idx<1 ? 'mt-30' : ''" v-for="(val, idx) in readERCompareData.dataList12" :key="idx">
    <h3>{{gradeList[val.grade]}}</h3>  
    <div>
        <ve-histogram 
            :data="val.histogramData" 
            :tooltip-visible="false" 
            :legend-visible="false" 
            :settings="readERCompareData.settings" 
            :xAxis="val.xAxisSet"
        >
        </ve-histogram>
    </div>
</div>

readERCompareData: {
    dataList12: [
        {
            grad: 1,
            histogramData: {
                columns: ["regionName", "averageErScore"],
                rows: [
                    {
                        averageErScore: 313,
                        regionName: "全國"
                    },
                    {
                        averageErScore: 301,
                        regionName: "邯鄲市"
                    },
                    {
                        averageErScore: 299,
                        regionName: "邱縣"
                    },
                    {
                        averageErScore: 320,
                        regionName: "經濟開發區"
                    }
                ]
            },
            xAxisSet: {
                axisLabel: {
                    interval: 0,
                    rotate: 60
                },
                data: ["全國", "邯鄲市", "邱縣", "經濟開發區"],  
                // interval: 0,若是數據過多，即便設置爲0，依然不可以順序展現x軸，能夠從新賦值data，解決此問題
                type: "category" 
            }
        },
        // Object{...}
    ],
    settings: {
        label: {
            show: true,
            position: 'top',
            color: '#333'
        },
        itemStyle: {
            color: '#6ab58f',
            borderColor: '#6ab58f'
        }
    }
},

//--------------接口返回數據---------------
"dataList":[
        {
            "grade":1,
            "areaCapabilityCompareVOList":[
                {
                    "type":2,
                    "regionCode":"000000",
                    "regionName":"全國",
                    "averageErScore":306
                },
                {
                    "type":3,
                    "regionCode":"130400",
                    "regionName":"邯鄲市",
                    "averageErScore":292
                },
                {
                    "type":1,
                    "regionCode":"130430",
                    "regionName":"邱縣",
                    "averageErScore":289
                }
                // Object{...},
                // Object{...}
            ]
        },
        // Object{...},  // 2年級
        // Object{...},  // 3年級
        // Object{...},  // 4年級
        // Object{...},  // 5年級
        // Object{...}   // 6年級
    ]
//--------------處理接口返回數據---------------

let _dataList = []
let _xAxisSet = {
    type: 'category',
    axisLabel:{
        interval:0, // 強制所有顯示  1-間隔顯示 2-...
        rotate:60,//傾斜顯示，-：順時針旋轉，+或不寫：逆時針旋轉
    }
}
res.dataList.forEach((el, idx) => {
    let newObj = {}
    newObj.grade = el.grade
    newObj.xAxisSet = { 
        data: []
    }
    newObj.histogramData = {
            columns: ['regionName', 'averageErScore'],
            rows: []
        }
    el.areaCapabilityCompareVOList.map((obj) => {
        newObj.histogramData.rows.push({
            regionName: obj.regionName,
            averageErScore: obj.averageErScore
        })
        newObj.xAxisSet.data.push(obj.regionName)
        Object.assign(newObj.xAxisSet, _xAxisSet)
    })
    _dataList.push(newObj)
})
this.readERCompareData.dataList12 = _dataList.slice(0, 2)

1. 在表格寬度有限時，爲了可以展現完整的數據，能夠將x軸的數據進行旋轉。 rotate能夠根據數據量的多少進行定義，數據多就旋轉角度大點，數據少也能夠不旋轉。

---

雷達圖

// 根據數據列表進行循環 1-6年級
<div :class="idx<2 ? 'mt-30' : ''" v-for="(val, idx) in readUnderstandListData.dataList" :key="idx">
    <h3>{{gradeList[val.grade]}}</h3>
    <div>
        <ve-radar 
            :data="val.radarData" 
            :tooltip-visible="false" 
            :settings="readUnderstandListData.settings" 
            :colors="options.colors"
        >
        </ve-radar>
    </div>
</div>

readUnderstandListData: {
    dataList: [
        {
            grad: 5,
            radarData: {
                columns: ["type", "sjyy", "hqxx", "zcpj", "xcjs", "ztgz"],
                rows: [
                    {
                        hqxx: "0.40",
                        sjyy: "0.47",
                        type: "全國",
                        xcjs: "0.40",
                        zcpj: "0.40",
                        ztgz: "0.40"
                    },
                    {
                        hqxx: "0.40",
                        sjyy: "0.43",
                        type: "邯鄲市",
                        xcjs: "0.40",
                        zcpj: "0.40",
                        ztgz: "0.40"
                    }
                ]
            }
        },
        // Object{...}
    ],
    settings: {
        label: {
            show: true,
            position: 'top',
            color: '#333'
        },
        dataType: 'percent',
        labelMap: {  // label顯示更改
            'sjyy': '實際運用', 
            'hqxx': '獲取信息', 
            'zcpj': '作出評價', 
            'xcjs': '造成解釋', 
            'ztgz': '總體感知'
        }
    }
},

1. labelMap 能夠更改label的數據顯示
2. 在作數據處理時，儘可能避免出現多餘的小數 number.toFixed(2)

---

實踐是解決問題的首要方法