当前位置： 首页 > news >正文

Echarts学习方法分享：跳过新手期，光速成为图表仙人！

news 2025/7/13 8:12:35

今日为大家分享一个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 进行数据可视化开发。

 

http://www.dtcms.com/a/276011.html

相关文章：

  • 【Lucene/Elasticsearch】 数据类型（ES 字段类型） | 底层索引结构
  • 易混淆英语单词对比解析与记忆表
  • 股票的k线
  • BKD 树（Block KD-Tree）Lucene
  • 以太坊重放攻击
  • 特辑：Ubuntu，前世今生
  • 关于学习docker中遇到的问题
  • AI领域的黄埔军校：OpenAI是新一代的PayPal Mafia，门生故吏遍天下
  • 可以用一台伺服电机控制多台丝杆升降机联动使用吗
  • 类和对象—多态
  • C语言：20250712笔记
  • SpringBoot集合Swagger2构建可视化API文档
  • P2619 [国家集训队] Tree I
  • 【Datawhale AI夏令营】Task2 笔记：MCP Server开发的重难点
  • 【LeetCode 热题 100】98. 验证二叉搜索树——（解法一）前序遍历
  • Python 三大高频标准库实战指南——json · datetime · random 深度解析
  • 【Java入门到精通】（二）Java基础语法（上）
  • 27. 移除元素
  • 【android bluetooth 协议分析 07】【SDP详解 1】【SDP 介绍】
  • 19th Day| 530.二叉搜索树的最小绝对差,501.二叉搜索树中的众数, 236.二叉树的最近公共祖先
  • springboot3X 整合高版本mybatisplus
  • pyqt5绘制矩形和线条
  • 【从零开始编写数据库：基于Python语言实现数据库ToyDB的ACID特性】
  • C语言＜数据结构-单链表＞（收尾）
  • Windows 开启和关闭 Administrator 用户的方法
  • 软考高级系系统分师和架构师常考知识点总结三
  • Typecho博客系统与WebSocket实时通信整合指南
  • 网络安全初级--搭建
  • GPU编程入门：CUDA与OpenCL全面解析
  • 聊下easyexcel导出