vue3+ts怎么使用echarts以及封装echarts文件

前言：

      学echarts我是被强迫的，现将自己这几天的学习心得记录一下，并做个分享，O(∩_∩)O哈哈。我做的是个vue3+Ts的项目，由于Ts是个小白，所以文中any用的比较多。

目录

1、安装

2、按需引入 

官网地址：Apache EChartshttps://echarts.apache.org/zh/index.html

1、安装

• npm安装

• npm install echarts --save

2、按需引入 

• 由于我们公司需要尽量减少包的体积，所以我就弄了按需引入。首先就是新建个echarts.ts的文件。

import * as echarts from 'echarts/core';
import {
    BarChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineChart,
    LineSeriesOption,
} from 'echarts/charts';
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    // 数据集组件
    DatasetComponent,
    DatasetComponentOption,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent,
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
    BarSeriesOption | LineSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption | DatasetComponentOption
>;

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
]);

export default echarts;

• 在main.ts中引入。

import echarts from '@/utils/echarts'; //echarts按需引入
// 创建vue实例
const app = createApp(App);
//echarts按需引入
app.config.globalProperties.$echarts = echarts;

•  使用provide/inject把echarts引入进来，在根组件里引入echarts,一般是App.vue。我这里就在这里面引入了。

    import * as echarts from 'echarts';
    import { provide } from 'vue';
    // echarts
    provide('echarts', echarts);

•  然后再组件中使用inject。

  <template>
      <div id="box" style="width: 100%; height: 400px">energy analysis </div>
  </template>
  
  <script setup lang="ts">
      import { onMounted, inject } from 'vue'; //主要
      type EChartsOption = echarts.EChartsOption;
      var option: EChartsOption;
      onMounted(() => {
          change();
      });
      let echarts: any = inject('echarts');
      const change = () => {
          const myChart = echarts.init(document.getElementById('box'));
          option = {
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              },
              yAxis: {
                  type: 'value',
              },
              series: [
                  {
                      data: [150, 230, 224, 218, 135, 147, 260],
                      type: 'line',
                  },
              ],
          };
          option && myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', function () {
              myChart.resize();
          });
      };
  </script>
  
  <style lang="scss" scoped></style>
  

•  到这里你就完成了一个小demo了，里面的参数可以根据自己的项目来进行修改，效果如下。

 在这里参考了在vue3 中使用echarts_就叫小黄好了鸭的博客-CSDN博客_vue3引入echarts的作者的博客，十分感谢!