v-charts的那些坑
每次用到 v-charts 我都一阵头疼，因为明明是相同的功能，但是我好像每次用到的解决方法都不一样？？每次都是在api中各种查，各种尝试... 直到做了个各种数据图形的需求，决定还是好好整理一下吧～～
本文涉及到的文档： v-chart文档地址 v-chart源（echarts）文档 可选择的图表插件： G2图表插件，你可选择的不止一种～
本篇涉及到：
- label（饼图） 数据展示
- label（雷达） 数据更替
- 饼图 数据颜色更改
- 柱状图 x轴标尺旋转
- 柱状图 x轴标尺全部展示
echarts
图片描述
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']
},- colors属性虽然也在 setOptions下面，但是在传值时必须在options对象中，且对应的属性值类型为Array
- 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)- 在表格宽度有限时，为了能够展示完整的数据，可以将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': '整体感知'
}
}
},- labelMap 可以更改label的数据显示
- 在做数据处理时，尽量避免出现多余的小数 number.toFixed(2)
实践是解决问题的首要方法
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录