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