詳解vue使用Echarts畫柱狀圖

Posted on by

1 引入Echarts

1.1 安裝

使用如下命令通過 npm 安裝 ECharts

npm install echarts --save

註：本文安裝Echarts版本為：“echarts”: “5.2.1”

1.2 引入

安裝完成以後，可以將echarts全部引入，這樣一來，我們可以在該頁面使用echarts所有組件；引入代碼如下：

import * as echarts from "echarts";

2 基本柱狀圖

柱狀圖（或稱條形圖）是一種通過柱形的長度來表現數據大小的一種常用圖表類型。

設置柱狀圖的方式，是將配置項中 series 的 type 設為 'bar'，該

最簡單的柱狀圖可以這樣設置：

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

如圖所示：

在這裡插入圖片描述

上圖vue完整代碼如下：

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //橫坐標
      yData: [23, 24, 18, 25, 27, 28, 25], //數據
      myChartStyle: { float: "left", width: "100%", height: "400px" } //圖表樣式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱狀圖
      const option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形狀為柱狀圖
            data: this.yData
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //隨著屏幕大小調節圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

3 多列柱狀圖

當有多列數據需要展示時我們需要使用多列柱狀圖，隻需要在 series 多添加一項就可以瞭：

series: [
          {
            type: "bar", //形狀為柱狀圖
            data: data1,
          },
          {
            type: "bar", //形狀為柱狀圖
            data: data2,
          }
    ]

通常有多列數據的時候，我們需要對每列使用不同顏色展示並在柱狀圖進行說明，echarts默認會使用不同顏色進行區分，當然我們也可以對柱狀圖的樣式進行設置，如背景色等；但若需要標明某一列代表什麼數據，需要使用到圖例legend，對應在 series 數組對象中添加name屬性，來對應legend中的data，其中通過位置元素來設置圖例的位置，如下：

        // 圖例
        legend: {
          data: ["人數", "任務數"],
          top: "0%" // 設置圖例位置在頂部
        },
        series: [
          {
            type: "bar", //形狀為柱狀圖
            data: data1,
            name: "人數", // legend屬性
          {
            type: "bar", //形狀為柱狀圖
            data: data2,
            name: "任務數", // legend屬性
          }
        ]

設置多列柱狀圖如圖：

在這裡插入圖片描述

上圖對應完整vue代碼如下：

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //橫坐標
      yData: [23, 24, 18, 25, 27, 28, 25], //人數數據
      taskDate: [10, 11, 9, 17, 14, 13, 14],
      myChartStyle: { float: "left", width: "100%", height: "400px" } //圖表樣式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 多列柱狀圖
      const mulColumnZZTData = {
        xAxis: {
          data: this.xData
        },
        // 圖例
        legend: {
          data: ["人數", "任務數"],
          top: "0%"
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形狀為柱狀圖
            data: this.yData,
            name: "人數", // legend屬性
            label: {
              // 柱狀圖上方文本標簽，默認展示數值信息
              show: true,
              position: "top"
            }
          },
          {
            type: "bar", //形狀為柱狀圖
            data: this.taskDate,
            name: "任務數", // legend屬性
            label: {
              // 柱狀圖上方文本標簽，默認展示數值信息
              show: true,
              position: "top"
            }
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(mulColumnZZTData);
      //隨著屏幕大小調節圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

其中 series中的label屬性為柱狀圖文本標簽，可顯示數據、文本等信息，默認不展示，需要將其show設置為true時才會在圖中展示出來。

4 柱狀圖樣式設置

4.1 柱條樣式

柱條的樣式可以通過 series.itemStyle 設置，包括：

  • 柱條的顏色（color）；
  • 柱條的寬度（barWidth）；
  • 柱條的描邊顏色（borderColor）、寬度（borderWidth）、樣式（borderType）；
  • 柱條的背景色（showBackground）柱條圓角的半徑（barBorderRadius）；
  • 柱條透明度（opacity）；
  • 陰影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。

我們可以對同一個系列柱條設置同一樣式，也可以對單一柱條設置特定的樣式，如下：

option = {
    xAxis: {
        data: ["A", "B", "C", "D", "E"]
    },
    yAxis: {},
    series: [
        {
            type: "bar",
            data: [
                10,
                22,
                28,
                {
                    value: 43,
                    // 設置單個柱子的樣式
                    itemStyle: {
                        color: "#91cc75",
                        shadowColor: "#91cc75",
                        borderType: "dashed",
                        opacity: 0.5
                    }
                },
                49
            ],
            barWidth: "20%", // 每個柱條的寬度就是類目寬度的 20%
            // 同系列柱條樣式
            itemStyle: {
                barBorderRadius: 5,
                borderWidth: 1,
                borderType: "solid",
                borderColor: "#73c0de",
                shadowColor: "#5470c6",
                shadowBlur: 3
            }
        }
    ]
};

效果如下：

在這裡插入圖片描述

4.2 柱條間距

柱條間距分為兩種，一種是不同系列在同一類目下的距離 barWidth，另一種是類目與類目的距離 barCategoryGap。

示例如下：

option = {
    xAxis: {
        data: ["A", "B", "C", "D", "E"]
    },
    yAxis: {},
    series: [
        {
            type: "bar",
            data: [23, 24, 18, 25, 18],
            barGap: "0%", // 兩個柱子之間的距離相對於柱條寬度的百分比;
            barCategoryGap: "40%" // 每側空餘的距離相對於柱條寬度的百分比
        },
        {
            type: "bar",
            data: [12, 14, 9, 9, 11]
        }
    ]
};

以上示例如圖：

在這裡插入圖片描述

在這個例子中，barGap 被設為 '0%'，這意味著每個類目（比如 A）下的兩個柱子之間的距離，相對於柱條寬度的百分比，設置成0%說明兩個柱跳之間沒有間隙。而 barCategoryGap 是 '40%'，意味著柱條每側空餘的距離，相對於柱條寬度的百分比。

通常而言，設置 barGap 及 barCategoryGap 後，就不需要設置 barWidth 瞭，這時候的寬度會自動調整。如果有需要的話，可以設置 barMaxWidth 作為柱條寬度的上限，當圖表寬度很大的時候，柱條寬度也不會太寬。

在同一坐標系上，此屬性會被多個柱狀圖系列共享。此屬性應設置於此坐標系中最後一個柱狀圖系列上才會生效，並且是對此坐標系中所有柱狀圖系列生效。

以上效果vue代碼如下：

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: {},
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //圖表樣式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 樣式設置
      // const option = {
      //   xAxis: {
      //     data: ["A", "B", "C", "D", "E"]
      //   },
      //   yAxis: {},
      //   series: [
      //     {
      //       type: "bar",
      //       data: [
      //         10,
      //         22,
      //         28,
      //         {
      //           value: 43,
      //           // 設置單個柱子的樣式
      //           itemStyle: {
      //             color: "#91cc75",
      //             shadowColor: "#91cc75",
      //             borderType: "dashed",
      //             opacity: 0.5
      //           }
      //         },
      //         49
      //       ],
      //       barWidth: "20%", // 每個柱條的寬度就是類目寬度的 20%
      //       // 同系列柱條樣式
      //       itemStyle: {
      //         barBorderRadius: 5,
      //         borderWidth: 1,
      //         borderType: "solid",
      //         borderColor: "#73c0de",
      //         shadowColor: "#5470c6",
      //         shadowBlur: 3
      //       }
      //     }
      //   ]
      // };
      // 柱條間距
      const option = {
        xAxis: {
          data: ["A", "B", "C", "D", "E"]
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [23, 24, 18, 25, 18],
            barGap: "0%", // 兩個柱子之間的距離相對於柱條寬度的百分比;
            barCategoryGap: "40%" // 每側空餘的距離相對於柱條寬度的百分比
          },
          {
            type: "bar",
            data: [12, 14, 9, 9, 11]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //隨著屏幕大小調節圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

5 動態排序柱狀圖

動態排序柱狀圖是一種展示隨時間變化的數據排名變化的圖表，從 ECharts 5 開始內置支持。

動態排序柱狀圖通常是橫向的柱條，如果想要采用縱向的柱條，隻要把本教程中的 X 軸和 Y 軸相反設置即可。

實現動態排序柱狀圖需要使用以下屬性：

yAxis.realtimeSort 設為 true，表示開啟 Y 軸的動態排序效果

yAxis.inverse 設為 true，表示 Y 軸從下往上是從小到大的排列

yAxis.animationDuration 建議設為 300，表示第一次柱條排序動畫的時長

yAxis.animationDurationUpdate 建議設為 300，表示第一次後柱條排序動畫的時長

如果想隻顯示前 n 名，將 yAxis.max 設為 n – 1，否則顯示所有柱條

xAxis.max 建議設為 'dataMax' 表示用數據的最大值作為 X 軸最大值，視覺效果更好

如果想要實時改變標簽，需要將 series.label.valueAnimation 設為 true

animationDuration 設為 0，表示第一份數據不需要從 0 開始動畫（如果希望從 0 開始則設為和 animationDurationUpdate 相同的值）

animationDurationUpdate 建議設為 3000 表示每次更新動畫時長，這一數值應與調用 setOption 改變數據的頻率相同

以 animationDurationUpdate 的頻率調用 setInterval，更新數據值，顯示下一個時間點對應的柱條排序

實現效果如下：

在這裡插入圖片描述

上圖vue完整代碼如下：

```js
<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: {},
      sortData: [], //動態排序數據
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //圖表樣式
      dynamicSortZZTOption: {
        xAxis: {
          max: "dataMax"
        },
        yAxis: {
          type: "category",
          data: ["A", "B", "C", "D", "E"],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4 // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: "動態變化",
            type: "bar",
            data: [],
            label: {
              show: true,
              position: "right",
              valueAnimation: true
            }
          }
        ],
        legend: {
          show: true
        },
        animationDuration: 3000,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      }
    };
  },
  mounted() {
    // 圖表初始化
    this.myChart = echarts.init(document.getElementById("mychart"));
    // 數據初始化
    for (let i = 0; i < 5; ++i) {
      this.sortData.push(Math.round(Math.random() * 200));
    }
    // 數據刷新
    setInterval(() => {
      this.pageUpdate();
    }, 3000);
  },
  methods: {
    // 數據刷新
    pageUpdate() {
      console.log(this.dynamicSortZZTOption.series[0].data);
      this.dynamicSortZZTOption.series[0].data = this.sortData;
      for (let i = 0; i < this.sortData.length; ++i) {
        if (Math.random() > 0.9) {
          this.sortData[i] += Math.round(Math.random() * 2000);
        } else {
          this.sortData[i] += Math.round(Math.random() * 200);
        }
      }
      this.myChart.setOption(this.dynamicSortZZTOption);
      //隨著屏幕大小調節圖表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>


```

6 總結

以上列瞭vue引用Echarts畫柱狀圖幾種主要使用方式，有瞭以上幾種使用基礎，我們就可以做一些更加復雜的場景，如國傢地區GDP時間變化、疫情數據統計渲染等。

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：