詳解vue使用Echarts畫柱狀圖

更新時間：2022年01月16日 11:58:43 作者：Saga Two

這篇文章主要為大家介紹了vue使用Echarts畫柱狀圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

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 基本柱狀圖

柱狀圖（或稱條形圖）是一種通過柱形的長度來表現(xiàn)數(shù)據(jù)大小的一種常用圖表類型。

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

最簡單的柱狀圖可以這樣設(shè)置：

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"], //橫坐標(biāo)
      yData: [23, 24, 18, 25, 27, 28, 25], //數(shù)據(jù)
      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);
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

3 多列柱狀圖

當(dāng)有多列數(shù)據(jù)需要展示時我們需要使用多列柱狀圖，只需要在 series 多添加一項就可以了：

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

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

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

設(shè)置多列柱狀圖如圖：

在這里插入圖片描述

上圖對應(yīng)完整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"], //橫坐標(biāo)
      yData: [23, 24, 18, 25, 27, 28, 25], //人數(shù)數(shù)據(jù)
      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: ["人數(shù)", "任務(wù)數(shù)"],
          top: "0%"
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形狀為柱狀圖
            data: this.yData,
            name: "人數(shù)", // legend屬性
            label: {
              // 柱狀圖上方文本標(biāo)簽，默認展示數(shù)值信息
              show: true,
              position: "top"
            }
          },
          {
            type: "bar", //形狀為柱狀圖
            data: this.taskDate,
            name: "任務(wù)數(shù)", // legend屬性
            label: {
              // 柱狀圖上方文本標(biāo)簽，默認展示數(shù)值信息
              show: true,
              position: "top"
            }
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(mulColumnZZTData);
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

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

4 柱狀圖樣式設(shè)置

4.1 柱條樣式

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

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

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

option = {
    xAxis: {
        data: ["A", "B", "C", "D", "E"]
    },
    yAxis: {},
    series: [
        {
            type: "bar",
            data: [
                10,
                22,
                28,
                {
                    value: 43,
                    // 設(shè)置單個柱子的樣式
                    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%" // 每側(cè)空余的距離相對于柱條寬度的百分比
        },
        {
            type: "bar",
            data: [12, 14, 9, 9, 11]
        }
    ]
};

以上示例如圖：

在這里插入圖片描述

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

通常而言，設(shè)置 barGap 及 barCategoryGap 后，就不需要設(shè)置 barWidth 了，這時候的寬度會自動調(diào)整。如果有需要的話，可以設(shè)置 barMaxWidth 作為柱條寬度的上限，當(dāng)圖表寬度很大的時候，柱條寬度也不會太寬。

在同一坐標(biāo)系上，此屬性會被多個柱狀圖系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個柱狀圖系列上才會生效，并且是對此坐標(biāo)系中所有柱狀圖系列生效。

以上效果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() {
      // 樣式設(shè)置
      // const option = {
      //   xAxis: {
      //     data: ["A", "B", "C", "D", "E"]
      //   },
      //   yAxis: {},
      //   series: [
      //     {
      //       type: "bar",
      //       data: [
      //         10,
      //         22,
      //         28,
      //         {
      //           value: 43,
      //           // 設(shè)置單個柱子的樣式
      //           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%" // 每側(cè)空余的距離相對于柱條寬度的百分比
          },
          {
            type: "bar",
            data: [12, 14, 9, 9, 11]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

5 動態(tài)排序柱狀圖

動態(tài)排序柱狀圖是一種展示隨時間變化的數(shù)據(jù)排名變化的圖表，從 ECharts 5 開始內(nèi)置支持。

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

實現(xiàn)動態(tài)排序柱狀圖需要使用以下屬性：

yAxis.realtimeSort 設(shè)為 true，表示開啟 Y 軸的動態(tài)排序效果

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

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

yAxis.animationDurationUpdate 建議設(shè)為 300，表示第一次后柱條排序動畫的時長

如果想只顯示前 n 名，將 yAxis.max 設(shè)為 n - 1，否則顯示所有柱條

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

如果想要實時改變標(biāo)簽，需要將 series.label.valueAnimation 設(shè)為 true

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

animationDurationUpdate 建議設(shè)為 3000 表示每次更新動畫時長，這一數(shù)值應(yīng)與調(diào)用 setOption 改變數(shù)據(jù)的頻率相同

以 animationDurationUpdate 的頻率調(diào)用 setInterval，更新數(shù)據(jù)值，顯示下一個時間點對應(yīng)的柱條排序

實現(xiàn)效果如下：

在這里插入圖片描述

上圖vue完整代碼如下：

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

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

export default {
  data() {
    return {
      myChart: {},
      sortData: [], //動態(tài)排序數(shù)據(jù)
      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: "動態(tài)變化",
            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"));
    // 數(shù)據(jù)初始化
    for (let i = 0; i < 5; ++i) {
      this.sortData.push(Math.round(Math.random() * 200));
    }
    // 數(shù)據(jù)刷新
    setInterval(() => {
      this.pageUpdate();
    }, 3000);
  },
  methods: {
    // 數(shù)據(jù)刷新
    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);
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>


```