vcharts的那些坑

每次用到 v-charts 我都一阵头疼，因为明明是相同的功能，但是我好像每次用到的解决方法都不一样？？每次都是在api中各种查，各种尝试&＃8230;
直到做了个各种数据图形的需求，决定还是好好整理一下吧～～

本文涉及到的文档：
v-chart文档地址
v-chart源（echarts）文档
可选择的图表插件：
G2图表插件，你可选择的不止一种～

本篇涉及到：

• label（饼图） 数据展示
• label（雷达） 数据更替
• 饼图 数据颜色更改
• 柱状图 x轴标尺旋转
• 柱状图 x轴标尺全部展示

setOption下的属性都可以直接使用，红框标注的是最常用的一些属性，如果有些属性没用失效，不妨给传入的属性值放入options中，如下面饼图中的 colors 属性

饼状图事例

:data="readAbilityIntervalData.pieData"
:tooltip-visible="false"
:settings="readAbilityIntervalData.settings"
:colors="options.colors"
>

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


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


1. labelMap 可以更改label的数据显示
2. 在做数据处理时，尽量避免出现多余的小数 number.toFixed(2)

实践是解决问题的首要方法