June 3, 2019

ECharts 繪製柱狀圖 | 以 vue-echarts 為例

最容易上手的圖表套件


文 / 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 的使用吧。


閱讀量




技術文章與合作


有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: