文 / 西打藍 Siddharam
前言
這次介紹一個在公司很常使用的套件 - ECharts，是百度出品的圖表套件，它相當容易上手，大部分的 config 都幫你設計好了；而另一個常用的圖表套件則是 D3，它的自由度比較高，但上手難度相對也高。
這次就拿公司專案中，設計要我們畫的圖表作為範例吧。因為開發上是以 vue 為主，所以會使用 vue-echarts，但跟原生使用起來差異不大。那就開始吧。
柱狀圖表作品。
vue-echarts 實戰
先安裝套件：
npm install echarts vue-echarts接著可以在
main/js 中引入：
//按需載入 bar、legend
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
在
webpack.base.conf.js 的 babel-loader 中加上：
// resize-detector 是自適應工具
resolve('node_modules/vue-echarts'),
resolve('node_modules/resize-detector')
直接上程式碼：
<template>
<v-chart class="result-feedback-pie-chart" :options="mainPieSet" ref='echarts' auto-resize/>
</template>
<script>
data () {
return {
mainPieSet: {
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5'],
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#BEC6DB',
fontSize: '12'
}
}
}
],
yAxis: [
{
name: '%',
splitNumber: 2,
nameTextStyle: {
color: '#BEC6DB',
padding: [0, 28, 0, 0]
},
type: 'value',
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#BEC6DB',
fontSize: '12'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
legend: {
data: ['你的公司', '其他企業'],
right: 100,
itemGap: 30,
textStyle: {
color: '#BEC6DB'
}
},
series: [
{
data: [],
type: 'bar',
stack: '總量',
barWidth: '25%',
color: '#BEC6DB',
label: {
normal: {
show: true,
position: 'top'
}
}
},
{
name: '你的公司',
type: 'bar',
stack: '總量',
color: '#28FFEA',
label: {
normal: {
show: true,
position: 'top',
color: '#28FFEA',
fontSize: 14
}
},
data: ['-', '-', 50, '-', '-']
},
{
name: '其他企業',
type: 'bar',
stack: '總量',
color: '#30394B',
label: {
normal: {
show: false,
position: 'bottom',
color: '#30394B'
}
},
data: [20, 72, '-', 30, 70]
}
]
},
ready: function () {
window.addEventListener('resize', () => {
this.$refs.swiperOption.resize()
}, false)
}
}
}
<script>
名詞解釋：
auto-size：按照瀏覽器寬度自動調整圖表寬度。
xAxis：為 x 軸設定。
axisLine：是 x 軸線，我將它預設為消失。
axisLabel：可以修改 x 軸標籤的樣式。
yAxis：為 y 軸設定，內容同上。
name：為 y 軸上方名稱。
nameTextStyle：調整名稱樣式。
splitNumber：可以選擇顯示的 y 比數。
legend：是按需引入的應用之一，顯示上方的文字。
itemGap：字距。其他的則是樣式的設定。
series：是圖表繪製的核心，因為這次有兩種類別 － 你的公司、其他企業，所以會以物件方式隔開。
barWidth：調整柱體寬度。
type：圖表類型，bar 是按需載入的原件之一，柱狀圖表。
label：調整樣式，以及顯示數值。
data：填充的數值。
教學到這裡告一段落，也算是紀錄這個圖表應該怎麼畫，目前的設定有很些是多餘的，例如 label 已經不會 show 出來，樣式是可以清除掉的等等，下次換紀錄 D3 的使用吧。
閱讀量次
聯絡與合作
訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com