快捷導(dǎo)航

Vue項(xiàng)目中引入ECharts的教程詳解

更新時(shí)間：2023年03月15日 14:06:19 作者：Saga?Two

ECharts是一個(gè)強(qiáng)大的畫(huà)圖插件，在vue項(xiàng)目中，我們常?？梢砸肊charts來(lái)完成完成一些圖表的繪制，本文就來(lái)和大家介紹一下如何在Vue項(xiàng)目中引入ECharts吧

1.安裝

使用如下命令通過(guò) npm 安裝 ECharts

npm install echarts --save

2.引入

安裝完成以后，可以將echarts全部引入，這樣一來(lái)，我們可以在該頁(yè)面使用echarts所有組件；引入代碼如下：

import * as echarts from "echarts";

3.使用

引入完畢之后，我們可通過(guò)echarts提供的接口畫(huà)出對(duì)應(yīng)的圖表，使用方法如下：

<template>
  <div
    class="echart"
    id="mychart"
    :style="{ float: 'left', width: '100%', height: '400px' }"
  ></div>
</template>

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

export default {
  data() {
    return {
      name: "張雪",
      xData: ["2020-02", "2020-03", "2020-04", "2020-05"], //橫坐標(biāo)數(shù)據(jù)
      yData: [30, 132, 80, 134] //縱坐標(biāo)數(shù)據(jù)，與橫坐標(biāo)對(duì)應(yīng)
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        title: {
          text: "ECharts 入門(mén)示例"
        },
        tooltip: {},
        legend: {
          data: ["銷量"]
        },
        xAxis: {
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [
          {
            name: "銷量",
            type: "bar", //類型為柱狀圖
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));// 圖標(biāo)初始化
      myChart.setOption(option);// 渲染頁(yè)面
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

效果如下：

4.按需引入 ECharts 圖表和組件

上面的代碼會(huì)引入所有 ECharts 中所有的圖表和組件，但是假如你不想引入所有組件，也可以使用 ECharts 提供的按需引入的接口來(lái)打包必須的組件。

// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core';
// 引入柱狀圖圖表，圖表后綴都為 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，標(biāo)題，直角坐標(biāo)系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  DatasetComponentOption,
  TransformComponent
} from 'echarts/components';
// 標(biāo)簽自動(dòng)布局，全局過(guò)渡動(dòng)畫(huà)等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注冊(cè)必須的組件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下來(lái)的使用就跟之前一樣，初始化圖表，設(shè)置配置項(xiàng)
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

需要注意的是注意為了保證打包的體積是最小的，ECharts 按需引入的時(shí)候不再提供任何渲染器，所以需要選擇引入 CanvasRenderer 或者 SVGRenderer 作為渲染器。這樣的好處是假如你只需要使用 svg 渲染模式，打包的結(jié)果中就不會(huì)再包含無(wú)需使用的 CanvasRenderer 模塊。

到此這篇關(guān)于Vue項(xiàng)目中引入ECharts的教程詳解的文章就介紹到這了,更多相關(guān)Vue引入ECharts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: