vue-echart柱狀圖 案例代碼分享

引言：因筆者在項目中只用到了柱狀圖，此處僅分享柱狀圖的案例代碼，使用的是vue-echarts，涉及到數據請求，柱狀圖渲染，簡化的鼠標經過顯示數據內容，以及鼠標點擊柱形圖某個柱子的事件代碼。

正文：

1、安裝vue-echarts：

npm install echarts vue-echarts

 

2、使用方法（筆者用在src/views/chart.vue文件中）：

1）按需引入vue-echarts：

import Vue from "vue";
import ECharts from "vue-echarts";

// 引入柱狀圖
import "echarts/lib/chart/bar";
// 引入提示框和標題組件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";

Vue.component("chart", ECharts);

2）寫在<template>中代碼（可以設置主題顏色，有三種常見主題類型: default, light, dark，筆者案例中沒有使用主題，顯示的是默認風格）；

<chart :options="barOptions" :auto-resize="true" @click="handleBar"></chart>
<!-- 增加主題顏色的代碼如下 -->
<chart :options="barOptions" :auto-resize="true" theme="light"></chart>

3）初始化柱狀圖（筆者在methods中寫了一個創建方法，方便獲取後端數據後調用）：

export default {
  data() {
    return {
      year: null,
      barOptions: {},
      monthData: [],
      feeData: []
    };
  },
  methods: {
    setBar() {
    this.barOptions = {
        title: {
          text: `${this.year}年年度費用分佈圖`,
          subtext: "", //寫入副標題
          x: "center", // 標題水平對齊方式 left center right  {number}
          y: "top", // 標題垂直對齊方式 top center bottom {number}
          textStyle:{
            fontSize: 18,
            fontWeight: "bold",
            color: "#333"
          }, //標題字體樣式
          subtextStyle{
            fontSize: 14,
            color: "#999"
          }, //副標題字體樣式
        },
        tooltip: {
          trigger: "axis", // 觸發類型，'item'-數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用，'axis'- 座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用
          axisPointer: {
            // 座標軸指示器，座標軸觸發有效
            type: "shadow", // 鼠標移動到數據上出現的樣式控制 默認爲直線，可選爲：'line' | 'shadow'
            shadowStyle: {  // 陰影樣式  若選擇 type 爲 line的類型，可設置線條樣式 lineStyle
　　　　　　    color: "rgba(88,101,137,0.3)",
　　　　　　    width: "auto",
　　　　　　    type: "default"
　　　　      }
          }
        },
        xAxis: {
          type: "category",//座標軸類型，橫軸默認爲類目型'category'，縱軸默認爲數值型'value'
          name: "月份", //x座標軸的名稱
          data: this.monthData, //x軸的數據
          // 修改文本的顏色
          axisLabel: {
            color: "#000",
            fontSize: 10
            // 文本過濾器參考代碼，筆者此處不需要此配置，因此將示例代碼註釋掉了
            // formatter: function(value, index) {
            //   return parseInt(value / 10000) + "萬";
            // }
          },
          // 修改軸線的顏色
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          }
        },
        yAxis: {
          type: "value",
          name: "費用(元)", //y座標軸的名稱
          axisLabel: { // 修改文本的顏色
            color: "#000",
            fontSize: 10
          },
          // 修改y軸橫向分割線的顏色
          splitLine: {
            lineStyle: {
              color: ["#999"]
            }
          },
          axisLine: { // 修改軸線的顏色
            lineStyle: {
              color: "#999"
            }
          }
        },
        series: [
          {
            name: "費用(元)", //柱狀條頂部標籤內容（配合label使用），也可顯示爲氣泡提示的y軸數據字段名
            data: this.feeData, // y軸的數據
            type: "bar", // 圖表類型-柱狀圖
            smooth: true
            // 柱狀條頂部標籤內容設置，筆者此處不需要此設置，因此將示例代碼註釋掉了
            //  label: {
            //    show: true,
            //    position: "right",
            //    color: "#3D383A",
            //    formatter: "￥{c}"
            //  }
          }
        ]
      }
    };
  }
}

4）獲取後端數據並渲染柱狀圖：獲取數據並且處理/賦值後，調用setBar()方法；

5）鼠標點擊事件：

 handleBar(params) {
  // 通過參數可以獲取到橫軸以及縱軸的數據
  console.log("x軸：",params.name,"y軸：",params.data);
}

效果圖：

參考資料：https://echarts.apache.org/zh/api.html#echarts