1. 前言
- vue里面使用这个
echarts是非常常见的场景- 但是我发现很多文章都是直接给
echarts写死的数据,因为都是从echarts官网示例直接拿过来的echarts在使用请求数据进行操作的时候还有点小坑,记录一下吧
2. 效果预览
- 习惯看着设计图来写
演示.gif
3. echarts使用
- 安装 npm install echarts --save
- 版本
"echarts": "^5.3.3",- 页面引入 5x
import * as echarts from 'echarts'; // 按需引入 import * as echarts from 'echarts/lib/echarts';
- 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]);
- echarts4x版本的引入
import echarts from 'echarts'; // 或者按需引入 import echarts from 'echarts/lib/echarts';
- 注意 echarts4x 和echarts5x 引入方式是不同的
4. 不同版本vue 把 echarts挂载到全局的方式
- 我这里选用了把这个
echarts挂载到全局- 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')
- vue2挂载原型
import Vue from 'vue' import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts
5. vue3 页面使用
- 布局很简洁
<template> <div> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 100vw;height:100vh;"></div> </div> </template>
- js逻辑
- 重点是 数据请求一定要放到
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假数据
- vue.config.js
- 这里vue/cli 是4x版本的
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 中使用方式
- 布局都一样
<template> <div> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 100vw;height:100vh;"></div> </div> </template> <script>
- 没用
setup语法糖- 也没用全局挂载
echarts- 直接上逻辑代码
- 一般会data声明个
echarts,方便在页面消失的时候销毁echarts- 数据请求一定要写在
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. 后记
- vue/cli 不同版本配置mock
- 熟能生巧
- 这个单独封装
echarts图表组件也行,宽高,样式,id等等都可以作为属性传进来.方便自定义
