1. 前言
- vue里面使用这个
echarts是非常常见的场景
- 但是我发现很多文章都是直接给
echarts写死的数据,因为都是从echarts官网示例直接拿过来的
-
echarts在使用请求数据进行操作的时候还有点小坑,记录一下吧
2. 效果预览
-
习惯看着设计图来写
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等等都可以作为属性传进来.方便自定义
参考资料
echarts官网示例
vue3如何挂载全局组件
初心
我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
