今日为大家分享一个echarts组件的学习思路。教你从实战中逐步学会二charts。这也是本人自新入行以来一直学习的一个方法,感觉非常有用。大部分代码只需要复制粘贴,就可以轻松制作出高档的图表。废话不再多说,先奉上本人封装的echarts组件代码:
ECharts 组件封装
1. 封装思路
将 ECharts 的初始化、更新等操作封装到一个独立的 Vue 组件中,通过 props
接收图表配置项,实现组件的复用。
2. 封装步骤
在 @/web/views/components/echarts/index.vue
中创建组件:
<template>
<div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
const props = defineProps({
options: {
type: Object,
required: true
}
});
let myChart = null;
onMounted(() => {
myChart = echarts.init(chartRef.value);
myChart.setOption(props.options);
});
watch(() => props.options, (newOptions) => {
if (myChart) {
myChart.setOption(newOptions);
}
}, { deep: true });
// 暴露初始化图表的方法
const initChart = (options) => {
if (myChart) {
myChart.setOption(options);
}
};
defineExpose({
initChart
});
</script>
2.2 组件解释
- 模板部分:创建一个
div
元素作为 ECharts 图表的容器。 - 脚本部分:
- 使用
ref
引用图表容器。 - 通过
props
接收图表配置项options
。 - 在
onMounted
钩子中初始化 ECharts 实例并设置配置项。 - 使用
watch
监听options
的变化,实时更新图表。 - 暴露
initChart
方法,方便外部调用更新图表
- 使用
ECharts 使用思路
1. 引入 ECharts 组件
在 index.vue
中引入封装好的 ECharts 组件:
<template>
<!-- ... 其他代码 ... -->
<el-card class="chart-box xc-el-card" shadow="never">
<div class="chart-title">预警数量趋势</div>
<ECharts ref="operatorData"></ECharts>
</el-card>
<!-- ... 其他代码 ... -->
</template>
<script setup>
import ECharts from "@/web/views/components/echarts/index.vue";
// ... 其他代码 ...
</script>
2. 配置图表选项
在 chartOptions.js
中定义不同图表的配置选项:
import { useGlobal } from "@/web/global";
const { $getAutoSize } = useGlobal();
// 预警数量趋势图表配置
export const getOperatorOptions = (data) => {
// 数据处理和配置生成逻辑
return {
// 具体配置项
};
};
// 场景预警数量统计图表配置
export const getDeviceWarningOptions = (dataList) => {
const dateData = dataList.map((item) => item.sceneName);
let seriesDataDemo = dataList.map((item) => item.resultCount);
return {
grid: {
left: "0",
right: $getAutoSize(10),
bottom: $getAutoSize(12),
containLabel: true
},
// 其他配置项
};
};
// 数量趋势图表配置
export const getAccountOptions = (dataList) => {
// 数据处理和配置生成逻辑
return {
// 具体配置项
};
};
3. 获取数据并更新图表
在 index.vue
中,通过接口获取数据,调用 initChart
方法更新图表:
<script setup>
// ... 其他代码 ...
import { getOperatorOptions, getAccountOptions, getDeviceWarningOptions } from "./chartOptions";
// 预警数量趋势 数据
let operatorData = ref(null);
// 场景预警数量统计 数据
let deviceWarningData = ref(null);
// 数量趋势 数据
let account = ref(null);
onMounted(() => {
// 预警数量趋势 数据
getOperatorData();
// 场景预警数量统计 数据
getDeviceWarningData();
// 数量趋势 数据
getAccountData();
});
// 获取预警数量趋势数据
const getOperatorData = () => {
http.get("/project/ai/statistics/alert-trend").then((res) => {
operatorData.value.initChart(getOperatorOptions(res.data));
});
};
// 新增获取场景预警数量统计数据的函数
const getDeviceWarningData = () => {
http.get("project/ai/statistics/scene-alert-count").then((res) => {
deviceWarningData.value.initChart(getDeviceWarningOptions(res.data));
});
};
// 新增获取数量趋势数据的函数
const getAccountData = () => {
http.get("project/ai/statistics/trend-month-count").then((res) => {
account.value.initChart(getAccountOptions(res.data));
});
};
// ... 其他代码 ...
</script>
通过以上步骤,我们完成了 ECharts 组件的封装和使用。封装后的组件具有以下优点:
- 复用性高:可以在多个页面中重复使用该组件,只需传入不同的配置项。
- 可维护性强:图表的初始化和更新逻辑集中在组件内部,便于管理和修改。
- 灵活性好:通过
props
接收配置项,能够根据不同的需求生成各种类型的图表。
在学习与使用上的建议
在使用上,有很多模板供我们借鉴。直接照抄即可。某当奉上参照链接:
该网站具备大量的图表样式及其源码,找到自己觉得差不多样式的,直接复制,然后基于这个配置项进行改动。
范例:
直接全选复制上方的代码
然后在 js中找到需要改动的相应方法,全部粘贴在方法中。最后将原文中的"option = {"改为"return {"直接return出来即可。示范如下:
import { useGlobal } from "@/web/global";
const { $getAutoSize } = useGlobal();
// 预警数量趋势图表配置
export const getOperatorOptions = (data) => {
// 数据处理和配置生成逻辑
return {
// 具体配置项
};
};
// 场景预警数量统计图表配置
export const getDeviceWarningOptions = (dataList) => {
var labelData = [];
var labelData1 = [];
for (var i = 0; i < 150; ++i) {
labelData.push({
value: 1,
name: i,
itemStyle: {
normal: {
color: 'rgba(0,209,228,0)',
}
}
});
}
for (var i = 0; i < labelData.length; ++i) {
if (labelData[i].name < 50) {
labelData[i].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: '#6dfbff'
},
{
offset: 1,
color: '#02aeff'
}
]
)
},
}
}
}
for (var i = 0; i < 150; ++i) {
labelData1.push({
value: 1,
name: i,
itemStyle: {
normal: {
color: 'rgba(0,209,228,0)',
}
}
});
}
for (var i = 0; i < labelData1.length; ++i) {
if (labelData1[i].name < 150) {
labelData1[i].itemStyle = {
normal: {
color: '#464451',
},
}
}
}
function Pie() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 10 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 30,
itemStyle: {
normal: {
color: "rgba(0,255,255,1)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)",
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
function Pie1() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 5 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,255,255,1)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
function Pie2() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 5 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,255,255,.3)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
function Pie3() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 10 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 30,
itemStyle: {
normal: {
color: "rgba(0,255,255,.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
return {
backgroundColor: '#1f1e26',
title: [{
text: '75%',
x: '50%',
y: '37%',
textAlign: 'center',
textStyle: {
fontSize: '70',
fontWeight: '100',
color: '#79ffff',
textAlign: 'center',
},
}, {
text: 'DESIGN ELEMENTS',
left: '50%',
top: '52%',
textAlign: 'center',
textStyle: {
fontSize: '18',
fontWeight: '400',
color: '#5c5a68',
textAlign: 'center',
},
}, {
text: 'DONUT CHART',
left: '50%',
top: '57%',
textAlign: 'center',
textStyle: {
fontSize: '14',
fontWeight: '400',
color: '#484556',
textAlign: 'center',
},
}, ],
polar: {
radius: ['51%', '47%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
startAngle: 0,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
series: [{
name: '',
type: 'bar',
roundCap: true,
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: '#464451',
},
data: [75],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#0ff'
}, {
offset: 1,
color: '#02aeff'
}]),
}
}
},
{
hoverAnimation: false,
type: 'pie',
z: 2,
data: labelData,
radius: ['52%', '59%'],
zlevel: -2,
itemStyle: {
normal: {
borderColor: '#1f1e26',
borderWidth: 4,
}
},
label: {
normal: {
position: 'inside',
show: false,
}
},
},
{
hoverAnimation: false,
type: 'pie',
z: 1,
data: labelData1,
radius: ['52%', '59%'],
zlevel: -2,
itemStyle: {
normal: {
borderColor: '#1f1e26',
borderWidth: 4,
}
},
label: {
normal: {
position: 'inside',
show: false,
}
},
},
{
type: 'pie',
radius: ['42%', '43%'],
center: ['50%', '50%'],
data: [{
hoverOffset: 1,
value: 100,
name: '',
itemStyle: {
color: '#ff6189',
},
label: {
show: false
},
labelLine: {
normal: {
smooth: true,
lineStyle: {
width: 0
}
}
},
hoverAnimation: false,
},
{
label: {
show: false
},
labelLine: {
normal: {
smooth: true,
lineStyle: {
width: 0
}
}
},
value: 100 - 75,
hoverAnimation: false,
itemStyle: {
color: '#3c3a48',
},
}
]
},
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['67%', '65.5%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -150,
radius: ['65%', '63.5%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie3()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -140,
radius: ['68%', '66.5%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['61%', '60%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie1()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -140,
radius: ['61%', '60%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie2()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -147.5,
radius: ['61%', '60%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie2()
},
]
};
};
// 数量趋势图表配置
export const getAccountOptions = (dataList) => {
// 数据处理和配置生成逻辑
return {
// 具体配置项
};
};
之后只需要简单改动js文件中的配置项就可以改动图表的各种样式。
希望本文的分享能帮助你更好地在 Vue3 项目中使用 ECharts 进行数据可视化开发。