快捷導(dǎo)航

Vue?項(xiàng)目中Echarts?5使用方法詳解

更新時(shí)間：2022年11月02日 08:45:56 作者：Yiler

這篇文章主要為大家介紹了Vue?項(xiàng)目中Echarts?5使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

Echarts 是一個(gè)純JavaScript的圖表庫(kù)，兼容絕大部分的瀏覽器，底層依賴(lài)輕量級(jí)的canvas類(lèi)庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

創(chuàng)建項(xiàng)目

先使用vue-cli創(chuàng)建一個(gè)新的項(xiàng)目，配置按照自己的需要選擇，默認(rèn)的也可

vue create vue_echarts
cd vue_echarts
npm run serve

基本使用

安裝

首先安裝echarts

npm i echarts -S

使用方法

關(guān)于如何使用，我們可以閱讀官方文檔，寫(xiě)的挺詳細(xì)的，總的來(lái)說(shuō)需要把握以下兩點(diǎn)：

在繪圖前我們需要為ECharts準(zhǔn)備一個(gè)給定寬高的圖表容器（DOM元素）
繪圖時(shí)，首先通過(guò)Echarts的init方法初始化一個(gè)echarts 實(shí)例，然后通過(guò) setOption 方法導(dǎo)入圖表配置來(lái)完成繪制

下面是以上兩點(diǎn)的具體代碼，只是理解用：

<template>
<-- DOM 容器 -->
<div style="width: 400px; height: 250px" ref="echarts"></div>
</template>
<script>
// 全局引入 echarts
import * as echarts from "echarts";
// 初始化實(shí)例
const myChart = echarts.init(this.$refs.echarts);
// 繪制（提前配置好option）
myChart.setOption(option);
</script>

官方的示例中其實(shí)是通過(guò)id來(lái)獲取圖表容器

還是不建議這樣做，一個(gè)是因?yàn)槿绻?code>id重名了會(huì)導(dǎo)致頁(yè)面渲染出現(xiàn)問(wèn)題；再一個(gè)是頁(yè)面較復(fù)雜時(shí)會(huì)導(dǎo)致Echarts的圖表容器還未生成就對(duì)其進(jìn)行了初始化，所以還是使用ref來(lái)代替

柱狀圖

下面以常見(jiàn)的柱狀圖為例，來(lái)展示如何在我們的項(xiàng)目中使用echarts：

首先創(chuàng)建一個(gè)ref="echarts"的div元素作為圖表容器

<div style="width: 400px; height: 300px" ref="echarts"></div>

然后引入echarts

import * as echarts from "echarts";

在methods中定義一個(gè)繪制圖表的方法，并在mounted()鉤子中調(diào)用

methods: {
    getEcharts() {
      const myEcharts = echarts.init(this.$refs.echarts);
      myEcharts.setOption(this.option);
    },
  },
mounted() {
    this.getEcharts();
},

option為圖標(biāo)配置的相關(guān)數(shù)據(jù)，定義在data()中

  data() {
    return {
      option: {
        title: {
          text: "ECharts 柱狀圖",
        },
        legend: {
          data: ["銷(xiāo)量"],
        },
        xAxis: {
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
        },
        yAxis: {},
        series: [
          {
            name: "銷(xiāo)量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },

現(xiàn)在就可以在瀏覽器中看到繪制出的柱狀圖了：

現(xiàn)在回過(guò)頭來(lái)看看option中的配置項(xiàng)都表示什么含義

參數(shù)名	作用
title	圖表名稱(chēng)
legend	配置圖例相關(guān)，比如圖例的位置、內(nèi)容等
xAxis/yAxis	配置x/y軸相關(guān)，比如坐標(biāo)軸數(shù)值、刻度等
series	配置圖表系列相關(guān)，比如圖表類(lèi)型(series.type)、數(shù)據(jù)集(series.data)等
color	圖表的調(diào)色盤(pán)，可以全局配置，也可以對(duì)某種圖表單獨(dú)配置

動(dòng)態(tài)排序柱狀圖

上面的基本柱狀圖好像有些基礎(chǔ)（low），下面來(lái)整個(gè)花里胡哨的。 ECharts 5 開(kāi)始內(nèi)置支持動(dòng)態(tài)排序柱狀圖，也即展示隨時(shí)間變化的數(shù)據(jù)排名變化的圖表。

圖表容器我們不做改變，首先準(zhǔn)備好一個(gè)隨機(jī)數(shù)組data

<script>
    var data = [];
    for (let i = 0; i < 5; ++i) {
      data.push(Math.round(Math.random() * 200));
    }
</script>

然后對(duì)option作如下配置

data() {
    return {
       option： {
              title: {
                text: "ECharts 動(dòng)態(tài)排序柱狀圖",
              },
              xAxis: {
                max: "dataMax",
          },
              yAxis: {
                type: "category",
                data: ["A", "B", "C", "D", "E"],
                inverse: true,
                animationDuration: 300,
                animationDurationUpdate: 300,
                max: 2,
              },
              series: [
                {
                  realtimeSort: true,
                  type: "bar",
                  data: data, // 數(shù)據(jù)為隨機(jī)數(shù)數(shù)組
                  label: {
                    show: true,
                    position: "right",
                    valueAnimation: true,
                  },
                },
              ],
              legend: {
                show: true,
              },
              animationDuration: 3000,
              animationDurationUpdate: 3000,
              animationEasing: "linear",
              animationEasingUpdate: "linear",
            },
        }
    }

series中的 realtimeSort 設(shè)為 true，表示開(kāi)啟該系列的動(dòng)態(tài)排序效果
yAxis.inverse 設(shè)為 true，表示 Y 軸從下往上是從小到大的排列
將 yAxis.max 設(shè)為n，表示顯示前n+1名
將 series.label.valueAnimation 設(shè)為 true，就可以實(shí)時(shí)改變標(biāo)簽
animationDuration、animationDurationUpdate、animationEasing和animationEasingUpdate都是一些過(guò)渡動(dòng)畫(huà)相關(guān)的配置，想進(jìn)一步了解的可以閱讀官網(wǎng)的相關(guān)介紹

還沒(méi)完，我們還需要初始化實(shí)例并調(diào)用：

  methods: {
    getEcharts() {
      let data = this.option.series[0].data;
      for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 0.9) {
          data[i] += Math.round(Math.random() * 2000);
        } else {
          data[i] += Math.round(Math.random() * 200);
        }
      }
      const myEcharts = echarts.init(this.$refs.echarts);
      myEcharts.setOption(this.option);
    },
  },
  mounted() {
    setInterval(() => {
      this.getEcharts();
    }, 3000);
  },

這里每3s調(diào)用了一次setOption來(lái)改變圖表數(shù)據(jù)，時(shí)間應(yīng)與每次更新動(dòng)畫(huà)時(shí)長(zhǎng)，也即animationDurationUpdate的值一致。