1. 前言

1. vue里面使用这个echarts是非常常见的场景
2. 但是我发现很多文章都是直接给echarts写死的数据,因为都是从echarts官网示例直接拿过来的
3. echarts在使用请求数据进行操作的时候还有点小坑,记录一下吧

---

2. 效果预览

1. 习惯看着设计图来写 演示.gif

---

3. echarts使用

1. 安装 npm install echarts --save
2. 版本"echarts": "^5.3.3",
3. 页面引入 5x

import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';

4. echarts 5x 支持按需引入

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, GridComponent, CanvasRenderer]);

---

5. echarts4x版本的引入

import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';

6. 注意 echarts4x 和echarts5x 引入方式是不同的

---

4. 不同版本vue 把 echarts挂载到全局的方式

1. 我这里选用了把这个echarts挂载到全局
2. vue3x 挂载全局

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as echarts from 'echarts';
let app = createApp(App)
const prototype = app.config.globalProperties
prototype.$echarts = echarts
app.use(store).use(router).mount('#app')

---

3. vue2挂载原型

import Vue from 'vue'
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

---

5. vue3 页面使用

1. 布局很简洁

<template>
    <div>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 100vw;height:100vh;"></div>
    </div>
</template>

---

2. js逻辑
3. 重点是 数据请求一定要放到onMounted里面

<script setup>
import { getCurrentInstance, reactive, onMounted } from "vue"
let serverData = reactive([])
let { proxy } = getCurrentInstance()
onMounted(async () => {
    let res = await fetch("/mock/echarts").then(res => res.json())
    console.log("mock res:", res);
    let { data, title } = res.data
    serverData = {
        data,
        title
    }
    initChart()
})


const initChart = () => {
    var myChart = proxy.$echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: serverData.title.text,
            subtext: serverData.title.subtext,
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: serverData.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
</script>

---

6. mock假数据

1. vue.config.js
2. 这里vue/cli 是4x版本的
3. before 是devServer的属性

    proxy:"",
    before(app) {
      app.get("/mock/echarts", (req, res) => {
        res.json({
          code: 1000,
          msg: "成功",
          data: {
            data:[
              { value: 1048, name: "vue" },
              { value: 735, name: "React" },
              { value: 580, name: "angular" },
              { value: 484, name: "小程序" },
              { value: 300, name: "uniApp" },
            ],
            title:{
              text:'前端占比',
              subtext:'演示着玩'
            }
          },
        });
      });
    },

---

7. vue2 中使用方式

1. 布局都一样

<template>
    <div>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 100vw;height:100vh;"></div>
    </div>
</template>
<script>

---

2. 没用setup语法糖
3. 也没用全局挂载 echarts
4. 直接上逻辑代码
5. 一般会data声明个echarts,方便在页面消失的时候销毁 echarts
6. 数据请求一定要写在mounted里面,写到created里面无效

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            echarts:null,
            serverData: {
                text: '标题',
                data: []
            }
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    async mounted() {
        let res = await fetch("/mock/echarts").then(res => res.json())
        console.log("mock res:", res);
        let { data, title } = res.data
        this.serverData = {
            data,
            title
        }
        this.initChart()

    },
    methods: {
        initChart() {
            var myChart = this.echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: this.serverData.title.text,
                    subtext: this.serverData.title.subtext,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'sss',
                        type: 'pie',
                        radius: '50%',
                        data: this.serverData.data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }

}
</script>

---

8. 后记

1. vue/cli 不同版本配置mock
2. 熟能生巧
3. 这个单独封装echarts 图表组件也行,宽高,样式,id等等都可以作为属性传进来.方便自定义

---

参考资料

echarts官网示例
vue3如何挂载全局组件

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉