Vue3中使用echarts的简单七个步骤(易懂,附紧急避坑)

 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";
//第一步：先在官网中的指令进行安装
// npm install echarts --save
//第二步：导入echarts
import * as echarts from "echarts";

export default defineComponent({
  //第三步：创建Dom结构（并且设定div的大小）用来echars图表
  //第四步：通过ref获取到创建的Dom结构 (！！！！！Dom加载完成的生命周期！！！！！)
  mounted() {
    const main = this.$refs.EcharRef;
    //第五步：初始化咱们的图表内容（到这里基础的引入工作已经完成了）
    const myChars = echarts.init(main);
    //第六步：需要配置对应的option数据可以采用对象拼接的数据
    //第七步：通过setOption进行数据的设置
    myChars.setOption(this.options);
  },
  //父组件传过来的数据
  props: {
    seriesOpeion: [Array, Object],
  },
  //使用计算属性进行合并
  computed: {
    options() {
      return Object.assign(this.baseOption, this.seriesOpeion);
    },
  },
  data() {
    return {
      /* 一些配置项的设置内容 */
      baseOption: {
        //标题
        titile: {
          text: "测试折线图",
        },
        //legend图例的设置 plain是横向排，scroll是垂直排（具体属性请对照官方文档）
        legend: {
          type: "plain",
        },
        //X轴设置
        xAxis: {
          type: "category",
          name: "日期",
          data: [1, 2, 3, 4, 5, 6, 7],
        },
        //y轴数据
        yAxis: {
          type: "value",
          name: "数量",
        },
        //鼠标悬浮在图表上的tip提示(这里的trigger属性需要重视：axis是折线等，itme是扇形等)
        tooltip: {
          trigger: "axis",
        },
        //工具栏的对应设置，详细内容可以阅读文档
        toolbox: {
          feature: {},
        },
      },
    };
  },
  
});
</script>

<script setup lang="ts">
//1.导入echarts
import * as echarts from 'echarts';
import { Ref, ref, onMounted } from 'vue'
//2.事先外部声明的一些图表结构(如果是使用公共组件的话,这里可以用函数进行封装+对数据进行处理的函数)
import {options,option} from './dataScource'

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

//4.在组件挂载的生命周期中获取到DOm节点
onMounted(() => {
    //5.创建echarts初始化对象
    const myEcharts = echarts.init(echarsDom.value);
    //6.校验表结构是否存在,存在就渲染
    options && myEcharts.setOption(option);
})

</script> 

<template>

    <!-- 创建一个div去显示echarts -->
    <div ref="echarsDom" style="width: 800px;height: 600px;"></div>

</template>