v-charts的那些坑

时间 2019-11-06

标签 charts 那些繁體版

原文原文链接

每次用到 v-charts 我都一阵头疼，由于明明是相同的功能，可是我好像每次用到的解决方法都不同？？每次都是在api中各类查，各类尝试...
直到作了个各类数据图形的需求，决定仍是好好整理一下吧～～html

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

本篇涉及到：echarts

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']
},

colors属性虽然也在 setOptions下面，可是在传值时必须在options对象中，且对应的属性值类型为Array

label.formatter属性：ide

字符串模板 模板变量有： // 模版变量能够直接使用
   {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)

v-charts的那些坑

饼状图事例

柱形图事例

雷达图

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