vue3使用echarts

本地安装Echarts

1.  
   npm install echarts --save
2.  
    
3.  
   有淘宝镜像的可以选择 (安装速度快)
4.  
   cnpm install echarts --save

新建一个echarts.js文件

1.  
   // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
2.  
   import * as echarts from "echarts/core";
3.  
    
4.  
   /** 引入柱状图and折线图图表，图表后缀都为 Chart */
5.  
   import { BarChart, LineChart } from "echarts/charts";
6.  
    
7.  
   // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
8.  
   import {
9.  
   TitleComponent,
10.  
    TooltipComponent,
11.  
    GridComponent,
12.  
    DatasetComponent,
13.  
    TransformComponent,
14.  
    } from "echarts/components";
15.  
     
16.  
    // 标签自动布局，全局过渡动画等特性
17.  
    import { LabelLayout, UniversalTransition } from "echarts/features";
18.  
     
19.  
    // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
20.  
    import { CanvasRenderer } from "echarts/renderers";
21.  
     
22.  
    // 注册必须的组件
23.  
    echarts.use([
24.  
    TitleComponent,
25.  
    TooltipComponent,
26.  
    GridComponent,
27.  
    DatasetComponent,
28.  
    TransformComponent,
29.  
    BarChart,
30.  
    LabelLayout,
31.  
    UniversalTransition,
32.  
    CanvasRenderer,
33.  
    LineChart,
34.  
    ]);
35.  
     
36.  
    // 导出
37.  
    export default echarts;

创建好的js文件全局引入到main.js内

1.  
   import { createApp } from 'vue'
2.  
   import App from './App.vue'
3.  
   import router from "./router/index"
4.  
    
5.  
   import echarts from './utils/echarts';
6.  
    
7.  
   const app = createApp(App)
8.  
    
9.  
   app.config.globalProperties.$echarts = echarts
10.  
     
11.  
    app.use(router)
12.  
    app.use(pinia)
13.  
     
14.  
    app.mount('#app')

这里需要注意:（组件名大写首字母）
按需引入时：import { LineChart } from “echarts/charts” 

<script setup>逻辑内使用echart

因为setup中没有this,而且这时候还没有渲染.所以,在setup中,也可以使用provide/inject把echarts引入进来.  在根组件里引入echarts

1.  
   // App.vue文件内插入生产者provide
2.  
    
3.  
   <script setup>
4.  
   import * as echarts from "echarts";
5.  
   import { provide } from "vue";
6.  
   provide("echarts", echarts);
7.  
   </script>
8.  
    
9.  
   <template>
10.  
    <router-view></router-view>
11.  
    </template>
12.  
     
13.  
    <style>
14.  
    body {
15.  
    margin: 0px;
16.  
    }
17.  
    </style>

在需要的页面中inject

1.  
   <template>
2.  
   <div>
3.  
   <div id="main"></div>
4.  
   <div id="maychar"></div>
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script lang="js">
9.  
   import { defineComponent, onMounted, inject } from "vue"; // 主要
10.  
    export default defineComponent({
11.  
    setup() {
12.  
    onMounted(() => {
13.  
    change();
14.  
    changetype();
15.  
    });
16.  
    let echarts = inject("echarts"); // 主要
17.  
    // 基本柱形图
18.  
    const change = () => {
19.  
    const chartBox = echarts.init(document.getElementById("main")); // 主要
20.  
    const option = {
21.  
    xAxis: {
22.  
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
23.  
    },
24.  
    yAxis: {},
25.  
    series: [
26.  
    {
27.  
    type: "bar",
28.  
    data: [23, 24, 18, 25, 27, 28, 25],
29.  
    },
30.  
    ],
31.  
    };
32.  
    chartBox.setOption(option);
33.  
    // 根据页面大小自动响应图表大小
34.  
    window.addEventListener("resize", function () {
35.  
    chartBox.resize();
36.  
    });
37.  
    };
38.  
    // 折线图
39.  
    const changetype = () => {
40.  
    // 获取组件实例
41.  
    const machart = echarts.init(document.getElementById("maychar"));
42.  
    // 设置配置项
43.  
    const option = {
44.  
    xAxis: {
45.  
    data: ["A", "B", "C", "D", "E"],
46.  
    },
47.  
    yAxis: {},
48.  
    series: [
49.  
    {
50.  
    data: [10, 22, 28, 43, 49],
51.  
    type: "line",
52.  
    stack: "x",
53.  
    },
54.  
    {
55.  
    data: [5, 4, 3, 5, 10],
56.  
    type: "line",
57.  
    stack: "x",
58.  
    },
59.  
    ],
60.  
    };
61.  
    // 复制
62.  
    machart.setOption(option);
63.  
    // 根据页面大小自动响应图表大小
64.  
    window.addEventListener("resize", function () {
65.  
    machart.resize();
66.  
    });
67.  
    };
68.  
    return {
69.  
    changetype,
70.  
    };
71.  
    },
72.  
    });
73.  
    </script>
74.  
     
75.  
    <style lang="scss" scoped>
76.  
    #main {
77.  
    min-width: 31.25rem;
78.  
    min-height: 31.25rem;
79.  
    // max-height: 500px;
80.  
    }
81.  
     
82.  
    #maychar {
83.  
    max-height: 500px;
84.  
    // max-height: 400px;
85.  
    height: 500px;
86.  
    }
87.  
    </style>

达到统一管理引入的echarts效果

这篇好文章是转载于：学新通技术网