v-charts的那些坑

5

每次用到 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']
},
  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)

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...