v-charts 第一次親密接觸

v-charts是什麼鬼

v-charts是餓了麼團隊開源的一個圖表庫，vue+echarts開發。用element-ui直接集成echarts有些費勁，而v-charts已經封裝成vue組件，能夠直接使用

傳送門：echarts，v-charts github，v-charts文檔

使用筆記

1.設置標題 / 標題屬性：title

默認是居左，若是想顯示在圖表正上方，用 x : 'center'

<ve-histogram :title="title" :data="data"></ve-histogram>
data() {
            return {
                data:{
                    columns:['姓名', '資產'],
                    rows:[{'姓名':'蛋尼', '資產':20},
                        {'姓名':'張飛', '資產':30},
                        {'姓名':'關羽', '資產':40},
                        {'姓名':'劉備', '資產':60},
                        {'姓名':'尼古拉斯', '資產':26},]
                },
                title:{
                    text: '我的資產',
                    textStyle: {color:'darkgray'}
                },
}

2.圖表容器(背景等)設置：grid

3.圖表顏色：colors

4.其餘屬性，參考echarts屬性說明：https://echarts.baidu.com/option.html#xAxis

5.調整圖例位置：legend.y='bottom'

------------------------------------ 完整的demo ---------------------------------

1.結果圖樣

2.代碼

<ve-histogram :title="{text:'研發質量概況', x:'center'}" 
  :data="bug_fix.data"
  :settings="bug_fix.setting"
  :legend="bug_fix.legend"
  :extend="bug_fix.extend">
</ve-histogram>

data() {
return {
    bug_fix: {
        data: {
            columns: ['realname', 'total', 'code_total',
                'bug_rate', 'critical_rate', 'average_fix_time',
                'ut_cov_rate', 'ut_pass_rate', 'pro_bug'],
            rows: [
                {
                    'realname': '張三', 'total': 100, 'code_total': 2000,
                    'bug_rate': 0.05, 'critical_rate': 0.5, 'average_fix_time': 60,
                    'ut_cov_rate': 0.8, 'ut_pass_rate': 0.9, 'pro_bug': 5
                },
                {
                    'realname': '李四', 'total': 88, 'code_total': 1500,
                    'bug_rate': 0.1, 'critical_rate': 0.9, 'average_fix_time': 120,
                    'ut_cov_rate': 0.5, 'ut_pass_rate': 0.8, 'pro_bug': 1
                },
                {
                    'realname': '張三1', 'total': 66, 'code_total': 2000,
                    'bug_rate': 0.05, 'critical_rate': 0.5, 'average_fix_time': 60,
                    'ut_cov_rate': 0.8, 'ut_pass_rate': 0.9, 'pro_bug': 5
                },
                {
                    'realname': '李四1', 'total': 135, 'code_total': 1500,
                    'bug_rate': 0.1, 'critical_rate': 0.9, 'average_fix_time': 120,
                    'ut_cov_rate': 0.5, 'ut_pass_rate': 0.8, 'pro_bug': 1
                },
                {
                    'realname': '張三2', 'total': 99, 'code_total': 2000,
                    'bug_rate': 0.05, 'critical_rate': 0.5, 'average_fix_time': 60,
                    'ut_cov_rate': 0.8, 'ut_pass_rate': 0.9, 'pro_bug': 5
                },
                {
                    'realname': '李四2', 'total': 150, 'code_total': 1500,
                    'bug_rate': 0.1, 'critical_rate': 0.9, 'average_fix_time': 120,
                    'ut_cov_rate': 0.5, 'ut_pass_rate': 0.8, 'pro_bug': 1
                },
                {
                    'realname': '張三3', 'total': 40, 'code_total': 2000,
                    'bug_rate': 0.05, 'critical_rate': 0.5, 'average_fix_time': 60,
                    'ut_cov_rate': 0.8, 'ut_pass_rate': 0.9, 'pro_bug': 5
                },
                {
                    'realname': '李四3', 'total': 55, 'code_total': 1500,
                    'bug_rate': 0.1, 'critical_rate': 0.9, 'average_fix_time': 120,
                    'ut_cov_rate': 0.5, 'ut_pass_rate': 0.8, 'pro_bug': 1
                },
            ]
        },
        setting: {
            // 設置指標別名
            labelMap: {
                realname: '姓名',
                total: '缺陷數',
                code_total: '代碼行數',
                bug_rate: '千行代碼缺陷率',
                critical_rate: '嚴重缺陷佔比',
                average_fix_time: '缺陷修復平均時長',
                pro_bug: '生產故障',
                ut_cov_rate: '單元測試覆蓋率',
                ut_pass_rate: '單元測試經過率'
            },
            // 右側百分比顯示
            yAxisType: ['normal', 'percent'],
            axisSite: {right: ['bug_rate', 'critical_rate', 'ut_cov_rate', 'ut_pass_rate']},
            // 須要顯示的指標，不指定則顯示所有
            metrics:['total','bug_rate','critical_rate','pro_bug']
        },
        extend: {
            series: {
                // 圖形上方顯示數值
                label: {show: true, position: "top"}
            }
        },
        // 指標圖例，顯示在下方
        legend: {
            y: 'bottom'
        },
    },
    }
}

 -----------------------補充------------

1.柱狀圖中混合線條：settings.showLine=['指標1'，'指標2']

2.x軸顯示格式化：

xAxis:{
    axisLabel: {
    // rotate: -45,
    formatter: '{value} 月'
 }
}

 3.排序: label爲須要排序的指標

settings.dataOrder:{label:'total', order:'asc'}