npm install echarts --save

import * as echarts from "echarts";

<template>
  <div ref="EcharRef" style="width: 300px; height: 300px"></div>
</template>

  const main = this.$refs.EcharRef;

  const myChars = echarts.init(main);

   myChars.setOption(this.options);

      <EcharsCommon :seriesOpeion="{series:[
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]}"></EcharsCommon>

<template>
  <div ref="EcharRef" style="width: 300px; height: 300px"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
//第一步：先在官網(wǎng)中的指令進(jìn)行安裝
// npm install echarts --save
//第二步：導(dǎo)入echarts
import * as echarts from "echarts";

export default defineComponent({
  //第三步：創(chuàng)建Dom結(jié)構(gòu)（并且設(shè)定div的大?。┯脕韊chars圖表
  //第四步：通過ref獲取到創(chuàng)建的Dom結(jié)構(gòu) (?。。。?！Dom加載完成的生命周期?。。。?！)
  mounted() {
    const main = this.$refs.EcharRef;
    //第五步：初始化咱們的圖表內(nèi)容（到這里基礎(chǔ)的引入工作已經(jīng)完成了）
    const myChars = echarts.init(main);
    //第六步：需要配置對應(yīng)的option數(shù)據(jù)可以采用對象拼接的數(shù)據(jù)
    //第七步：通過setOption進(jìn)行數(shù)據(jù)的設(shè)置
    myChars.setOption(this.options);
  },
  //父組件傳過來的數(shù)據(jù)
  props: {
    seriesOpeion: [Array, Object],
  },
  //使用計(jì)算屬性進(jìn)行合并
  computed: {
    options() {
      return Object.assign(this.baseOption, this.seriesOpeion);
    },
  },
  data() {
    return {
      /* 一些配置項(xiàng)的設(shè)置內(nèi)容 */
      baseOption: {
        //標(biāo)題
        titile: {
          text: "測試折線圖",
        },
        //legend圖例的設(shè)置 plain是橫向排，scroll是垂直排（具體屬性請對照官方文檔）
        legend: {
          type: "plain",
        },
        //X軸設(shè)置
        xAxis: {
          type: "category",
          name: "日期",
          data: [1, 2, 3, 4, 5, 6, 7],
        },
        //y軸數(shù)據(jù)
        yAxis: {
          type: "value",
          name: "數(shù)量",
        },
        //鼠標(biāo)懸浮在圖表上的tip提示(這里的trigger屬性需要重視：axis是折線等，itme是扇形等)
        tooltip: {
          trigger: "axis",
        },
        //工具欄的對應(yīng)設(shè)置，詳細(xì)內(nèi)容可以閱讀文檔
        toolbox: {
          feature: {},
        },
      },
    };
  },
  
});
</script>

<script setup lang="ts">
//1.導(dǎo)入echarts
import * as echarts from 'echarts';
import { Ref, ref, onMounted } from 'vue'
//2.事先外部聲明的一些圖表結(jié)構(gòu)(如果是使用公共組件的話,這里可以用函數(shù)進(jìn)行封裝+對數(shù)據(jù)進(jìn)行處理的函數(shù))
import {options,option} from './dataScource'

//3.獲取定義的Dom模板
const echarsDom:Ref<HTMLElement|any> = ref(null)

//4.在組件掛載的生命周期中獲取到DOm節(jié)點(diǎn)
onMounted(() => {
    //5.創(chuàng)建echarts初始化對象
    const myEcharts = echarts.init(echarsDom.value);
    //6.校驗(yàn)表結(jié)構(gòu)是否存在,存在就渲染
    options && myEcharts.setOption(option);
})

</script> 

<template>

    <!-- 創(chuàng)建一個div去顯示echarts -->
    <div ref="echarsDom" style="width: 800px;height: 600px;"></div>

</template>