Vue使用Echart圖示外掛之柱狀圖

2022-04-02 16:00:09

Echart是一個很好的圖表繪製外掛，裡面有各種各樣的圖表供我們選擇，最近用echart做圖表比較多，所以現在記錄一下用到的柱狀圖用到的一些設定和用法：

主要注意的點：

1、建立的畫布必須給定大小，不然無法顯示
2、xAxis中的data預設為空時，X軸的的描述不存在，xAxis中axisLabel的interval的值表示隔幾列顯示，預設為1
3、Series就是圖表的資料中心，data是傳入的資料，可以通過barMaxWidth設定柱子的寬度
4、重點是柱子的顏色Series中itemStyle的color就是用來設定柱子的顏色的，如果柱子要使用不同的顏色那麼需要先自定義一個陣列來存放顏色字串，然後通過遍歷的方法進行顏色的渲染

好了，廢話不多說直接上程式碼，程式碼的註釋很詳細，應該能看得懂。

<template>
  <div class="count-chart-wrapper">
    <div class="chart-title">
      工程發貨統計
      <span>(近六天)</span>
    </div>
    <div class="count-chart" ref="chart"></div><!--必須設定寬高-->
  </div>
</template>
 
<script>
import echarts from "echarts";
 
export default {
  data() {
    return {
      colorList: [
        //設定發貨柱子的，普通的柱子顏色
        "#69D3BE",
        "#9D9E9F",
        "#F88282"
      ],
      colorList2: [
        //設定發貨柱子的，柱子實現漸變色
        ["#0282DE", "#3F28D0"],
        ["#FED701", "#E66938"],
        ["#67E0E3", "#0181DE"]
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    // 初始化圖表樣式
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      let _this = this;
      this.chart.setOption({
        grid: {
          left: "50"
          // right: "60"
        },
        legend: {
          show: false,
          data: this.legends
        },
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            // 座標軸指示器，座標軸觸發有效
            type: "shadow" // 預設為直線，可選為：'line' | 'shadow'
          }
        },
        xAxis: {
          axisLine: { show: false }, // 軸線
          axisTick: { show: false }, // 刻度
          type: "category",
          data: ["一", "二", "三", "四", "五", "六"],//X軸顯示
          axisLabel: {
            color: "#333",
            interval: 0 //0：不隔行顯示，1：隔一行顯示
          }
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            fontWeight: "bold",
            align: "left",
            padding: [0, 50, 10, 0],
            color: "#ffffff"
          },
          axisLine: { show: false }, // 軸線
          axisTick: { show: false }, // 刻度
          axisLabel: {
            color: "#333",
            formatter: `{value}`//Y軸的顯示形式，value，percent
          }
        },
        series: [
          {//實現漸變色的柱子
            data: ["1", "2", "3", "1", "2", "3"],//顯示的資料
            type: "bar",
            smooth: true, // 平滑
            symbol: "none",
            lineStyle: {
              color: "#FF5858"
            },
            barMaxWidth: 30,//設定柱子的寬度
            itemStyle: {
              normal: {
                label: {
                  show: true, //開啟顯示
                  position: "top", //在上方顯示
                  textStyle: {
                    //數值樣式
                    color: "#222",
                    fontSize: 14
                  }
                },
                color: params => {
                  let colorList = _this.colorList2;//實現柱子的漸變色陣列
                  let index = params.dataIndex;//dataIndex  data中資料的下標
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //漸變色使用方法
                    { offset: 0, color: colorList[index][0] },
                    { offset: 1, color: colorList[index][1] }
                  ]);
                }
              }
            }
          },
          {//實現普通色的柱子
            data: ["2.5", "3.5", "1.5", "2.5", "1.5", "2.5"],
            type: "bar",
            smooth: true, // 平滑
            symbol: "none",
            lineStyle: {
              color: "#FF5858"
            },
            barMaxWidth: 30,
            itemStyle: {
              normal: {
                label: {
                  show: true, //開啟顯示
                  position: "top", //在上方顯示
                  textStyle: {
                    //數值樣式
                    color: "#222",
                    fontSize: 14
                  }
                },
                color: params => {
                  let colorList = _this.colorList;//柱子的顏色是普通的顏色
                  let index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return colorList[index];
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
 
<style>
.count-chart-wrapper {
  width: 800px;
  margin: 0 auto;
  background-color: antiquewhite;
}
.count-chart {
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 400px;
}
</style>

結果圖樣：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Vue使用Echart圖示外掛之柱狀圖

熱門文章