目錄

• 1.安裝
• 2.引入
• 3.使用
• 4.按需引入 ECharts 圖表和元件

1.安裝

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

npm install echarts --save

2.引入

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

import * as echarts from "echarts";

3.使用

引入完畢之後，我們可通過echarts提供的介面畫出對應的圖表，使用方法如下：

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

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

export default {
  data() {
    return {
      name: "張雪",xData: ["2020-02","2020-03","2020-04","2020-05"],//橫座標資料
      yData: [30,132,80,134] //縱座標資料，與橫座標對應
    };
  },mounted() {
    this.initEcharts();
  },methods: {
    initEcharts() {
      const option = {
        title: {
          text: "ECharts 入門示例"
        },tooltip: {},legend: {
          data: ["銷量"]
        },xAxis: {
          data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
        },yAxis: {},series: [
          {
            name: "銷量",type: "bar",//型別為柱狀圖
            data: [5,20,36,10,20]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));// 圖示初始化
      myChart.setOption(option);// 渲染頁面
      //隨著螢幕大小調節圖表
      window.addEventListener("resize",() => {
        myChart.resize();
      });
    }
  }
};
</script>

效果如下：

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

上面的程式碼會引入所有 ECharts 中所有的圖表和元件，但是假如你不想引入所www.cppcns.com有元件，也可以使用 ECharts 提供的按需引入的介面來打包必須的元件。

// 引入 echarts 核心模組，核心模組提供了 echarts 使用必須要的介面。
import * as echarthttp://www.cppcns.coms from 'echarts/core';
// 引入柱狀圖圖表，圖表字尾都為 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，標題，直角座標系，資料集，內建資料轉換器元件，元件字尾都為 Component
import {
  TitleComponent,TooltipComponent,GridComponent,DatasetComponent,DatasetComponentOption,TransformComponent
} from 'echarts/components';
// 標籤自動佈局，全域性過渡動畫等特性
import { LabelLayout,UniversalTransition } from 'echarts/featurhttp://www.cppcns.com
 
es';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';

// 註冊必須的元件
echarts.use([
  TitleComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer
]);

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

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

到此這篇關於專案中引入 ECharts的文章就介紹到這了,更多相關Vue引入 ECharts內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！