数据可视化-ECharts Html项目实战（2）
在之前的文章中，我们学习了如何创建简单的折线图，条形图，柱形图并实现动态触发，最大最小平均值。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。
数据可视化-ECharts Html项目实战（1）-CSDN博客文章浏览阅读858次，点赞32次，收藏23次。在之前的文章中，我们学习了如何安装Visual Studio Code并下载插件，想了解的朋友可以查看这篇文章。安装 Visual Studio Code今天的文章，我会从基础案例开始，带着大家在VS code中绘制ECharts里的折线图、条形图与柱形图，并实现动态触发以及最大、最小、平均值。https://blog.csdn.net/qq_49513817/article/details/136665547?spm=1001.2014.3001.5501
今天的文章，我会从上一篇结尾的案例开始，带着大家在VS code中绘制ECharts里的堆积折线图、瀑布图、饼图。并实现图表标题的设置。
目录
一、知识回顾
二、项目实战
1.堆积折线图
2.瀑布图
3.饼图
三、标题设置
拓展-标题设置常用属性
一、知识回顾
在上一篇文章中，我们学习了如何创建一个基本的图表，也学习了一些基本的图表类型。
更改图表类型的方法，学习能力强的朋友，应该已经知道了。
就是更改这个type，中文意思就是“类型”，很好理解。
常见的图表类型也告诉大家了，那么我想，今天的学习任务对于大家应该都很简单吧！
在后面的动态触发和最大值，最小值，平均值中的代码我用到了几个陌生的东西。
一个是toolbox，一个是tooltip，分别是提示框组件和工具箱，在后面的文章中我会告诉大家它的用法，大家现在只用知道它是什么，它的作用就行。
现在，开始今天的学习吧。
二、项目实战
1.堆积折线图
想要实现堆积折线图其实并不复杂，只需要两句简单的代码，但是有很多人不会用，它的关键在于放的位置。
stack:"all",
//stack 属性通常用于堆叠多个系列的数据。当设置为 "all" 时，意味着图表上的所有系列都将被堆叠在一起。areaStyle:{}
//areaStyle 属性用于定义区域填充的样式。当这个属性为空对象 {} 时，//它通常意味着默认样式将被应用。但是，你可以在这个对象中添加各种属性来定制区域的填充颜色、透明度、边框等。
现在，我们把它放到代码里试试
可以看到，我们想要的堆积效果出现了。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {text: '红红成绩表',subtext: '成绩来源于辅导员',},tooltip: {trigger: 'axis',},legend: {data: ['2023年', '2024年'],},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: 'category', data:['2月','4月','6月','9月','11月','1月']},],yAxis: [{type: 'value',data: ['红红'],},],series: [{name: '2023年',type: 'line',data: [65,75,66,80,90,73],stack:"all",areaStyle:{}},{name: '2024年',type: 'line',data: [65,88,75,40,60,72],stack:"all",areaStyle:{}},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>现在，我们把昨天学的最大最小平均值加进去试试。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {text: '红红成绩表',subtext: '成绩来源于辅导员',},tooltip: {trigger: 'axis',},legend: {data: ['2023年', '2024年'],},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: 'category', data:['2月','4月','6月','9月','11月','1月']},],yAxis: [{type: 'value',data: ['红红'],},],series: [{name: '2023年',type: 'line',data: [65,75,66,80,90,73],stack:"all",areaStyle:{},markPoint: { // 标记点data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: { // 标记线data: [{type: 'average', name: '平均值'}]},},{name: '2024年',type: 'line',data: [65,88,75,40,60,72],stack:"all",areaStyle:{},markPoint: { // 标记点data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: { // 标记线data: [{type: 'average', name: '平均值'}]},},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>可以看到，最大值都超过我们需要的100了，这是因为堆积折线图数据会堆积起来，设平均值并不是一个很好的选择。
2.瀑布图
在这里，就有一些难度了，在 ECharts 中，并没有瀑布图这种类型，需要我们运用一些技巧，达到这种效果。使用serise中的type:"bar"条形图）来模拟瀑布图。
在 ECharts 中，设置非数值部分（例如瀑布图的起始和结束部分）透明，你需要在 itemStyle 中针对这些特定数据点设置透明颜色。
这里的数值是我为了演示随机输入的，大家在实战中的数值一定要严谨。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {//设置标题text: '红消费表表',subtext: '数据来源于账单',},tooltip: {//动态触发trigger: 'axis',axisPointer:{type:'shadow'},},toolbox: {x:462,show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [ { type: 'category', spliLine:{show:false}, data: ['总费用', '吃饭', '喝水洗澡','网购费', '网费', '日用品']//定义数据 }, ], yAxis: [ { type: 'value' }, ], series: [ { name: '辅助', type: 'bar', stack: 'total', itemStyle: { normal:{barBorderColor:'rgba(0,0,0,0)',//barBorderColor:'20,20,0,0.5',备用颜色，更好可视化barBorderWidth:5,color:'rgba(0,0,0,0)'//color:'rgba(0,220,0,0.8)',备用颜色，更好可视化},emphasis:{barBorderColor:'rgba(0,0,0,0)',barBorderWidth:25,color:'rgba(0,0,0,0)',}},data:[0, 700, 400, 300, 200, 50]}, {name:'生活费',type:'bar',stack:'total',itemStyle:{normal:{label:{show:true,positon:'inside'}}},data:[1500, 800, 350, 100, 150, 100],}],
};myChart.setOption(option);</script>
</body></html>快去试试吧
3.饼图
变为饼图。你需要做这些：
- 将
xAxis和yAxis配置项移除，因为饼图不需要坐标轴。 - 移除
series中的type: 'line'，改为type: 'pie'。 - 饼图通常不需要
tooltip的trigger: 'axis'配置，因为它基于整个饼图的数据点触发提示框。 - 添加饼图特有的配置项，比如
radius（饼图的半径）、center（饼图的中心位置）等。
<!DOC<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = { title: { text: '成绩表', subtext: '总分706', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a}<br/>{b}: {c} ({d}%)<br/>成绩: {e}' }, legend: { orient: 'vertical', left: 'left', top: 'center', data: ['数学', '语文', '外语', '理科', '文科'] }, toolbox: { show: true, left: 'right', top: 'top', feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['pie', 'funnel'], option: { funnelAlign: 'left', max: 1548 } }, restore: { show: true }, saveAsImage: { show: true } } }, series: [ { name: '成绩', type: 'pie', radius: '66%', center: ['50%', '50%'], clockWise: true, data: [ {value: 17, name: '语文', }, {value: 13, name: '数学', }, {value: 12, name: '外语', }, {value: 21, name: '物理，化学', }, {value: 37, name: '生物，地理，历史', },], scoreData: [123, 95, 88, 150, 250] } ]
}; option.tooltip.formatter = function (params) { var seriesData = option.series[0].data; var scoreData = option.series[0].scoreData; var index = params.dataIndex; return params.seriesName + '<br/>' + params.name + ': ' + params.value + ' (' + params.percent + '%)<br/>成绩: ' + scoreData[index];
}; myChart.setOption(option);</script>
</body></html>三、标题设置
在ECharts中，title组件用于显示图表的标题。
title: {text: '红红成绩表',borderWidth:2,//边框宽度 borderColor:"#00FF00",//边框颜色subtext: '成绩来源于辅导员',//副标题textAlign:'',//left:"center",//水平居中top:"",},
把他加到堆积折线图试试效果
可以看到图表标题以及设置到了最中间了，并且加上了绿色的边框。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));var option = {title: {text: '红红成绩表',borderWidth:2,//边框宽度 borderColor:"#00FF00",//边框颜色subtext: '成绩来源于辅导员',//副标题textAlign:'',//left:"center",//水平居中top:"",},tooltip: {trigger: 'axis',},legend: {data: ['2023年', '2024年'],top:"bottom",},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: 'category', data:['2月','4月','6月','9月','11月','1月']},],yAxis: [{type: 'value',data: ['红红'],},],series: [{name: '2023年',type: 'line',data: [65,75,66,80,90,73],stack:"all",areaStyle:{},markPoint: { // 标记点data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: { // 标记线data: [{type: 'average', name: '平均值'}]},},{name: '2024年',type: 'line',data: [65,88,75,40,60,72],stack:"all",areaStyle:{},markPoint: { // 标记点data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: { // 标记线data: [{type: 'average', name: '平均值'}]},},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>拓展-标题设置常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text | string | '' | 主标题文本，支持使用 \n 换行。 |
subtext | string | '' | 副标题文本，支持使用 \n 换行。 |
left | string / number | 'auto' | 标题组件离容器左侧的距离。 |
top | string / number | 'auto' | 标题组件离容器上侧的距离。 |
textAlign | string | 'left' | 主标题的水平对齐方式，可选值为：'left'、'center'、'right'。 |
textVerticalAlign | string | 'top' | 垂直对齐方式，可选值为：'top'、'middle'、'bottom'。 |
textStyle | object | {} | 主标题样式，包括颜色、字体、对齐方式等。 |
subtextStyle | object | {} | 副标题样式，包括颜色、字体、对齐方式等。 |
padding | number / array | 0 | 内边距，单位是像素，可以是单一数字，也可以是数组分别表示上、右、下、左的内边距。 |
itemStyle | object | {} | 标题标记的图形样式，例如颜色、边框等。 |
backgroundColor | string | 'transparent' | 标题背景色，默认为透明。 |
borderColor | string | '#ccc' | 标题边框颜色。 |
borderWidth | number | 0 | 标题边框线宽。 |
padding | [number, number, number, number] | [0, 0, 0, 0] | 标题内边距，单位px，默认各方向内边距为0，顺序为：上、右、下、左。 |
shadowBlur | number | 0 | 图形阴影的模糊大小。 |
shadowColor | string | 'rgba(0, 0, 0, 0.5)' | 图形阴影的颜色。 |
shadowOffsetX | number | 0 | 图形阴影在水平方向上的偏移距离。 |
shadowOffsetY | number | 0 | 图形阴影在垂直方向上的偏移距离。 |
textBorderColor | string | '#000' | 文本边框颜色。 |
textBorderWidth | number | 0 | 文本边框线宽。 |
zlevel | number | 0 | 所有图形的 zlevel 值。 |
z | number | 2 | 组件的所有图形的 z 值。 |
相关文章：
数据可视化-ECharts Html项目实战（2）
在之前的文章中，我们学习了如何创建简单的折线图，条形图，柱形图并实现动态触发，最大最小平均值。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下…...
【Network Management】DCM模块唤醒网络是主动唤醒还是被动唤醒
目录 前言 正文 1.CanNm的状态机分析 2.ComM的状态机分析 3.诊断报文唤醒网络知识扩展...
yum repolist命令的介绍
yum repolist 命令在基于 Red Hat 的 Linux 发行版中用于列出当前配置的 YUM 仓库中所有可用的软件包及其版本信息。这个命令会从本地缓存中获取软件包的索引信息，并显示所有软件包的名称和版本号，而不会实际安装或更新任何软件包。 具体来说，…...
【日志分析】Android 运营商名称显示优先级（AlphaTag/SPN）
规则说明 MTK平台的设计，优先级：（MD）CIEV > Eons > Nitz > xml 功能代码说明 【笔记】Android Telephony 漫游SPN显示定制（Roaming Alpha Tag）-CSDN博客 日志分析 关键字：lookupOpe…...
ocp考试是中文还是英文？ocp认证好考吗
ocp认证是中文还是英文考试ocp认证的考试常用语种是英文，除开英文之外还有日语等语种，但是目前没有中文(12c的时候有过中文考试)，所以考生最好具有一定的英语水平再报名参加考试，ocp认证考试的形式为机试，考试的题型全…...
python问题：vscode切换环境，pip安装库网络错误，不使用anaconda安装库
python问题：vscode切换环境，pip安装库网络错误 vscode切换环境pip安装库网络错误 不使用anaconda安装库 记录一下遇见的python问题。 vscode切换环境 在vscode上面的搜索框输入 > select interpreter然后选择需要的环境。 pip安装库网络错误 用…...
理财第一课：炒股词典
文章目录 基础代码规则委比委差量比换手率市盈率市净率 短线操作散户亏钱的原因庄家分析炒股战法波浪理论其它 钱者，人生之大事，死生存亡之地，不可不察也。耕田之利，十倍；珠玉之赢，百倍；闹革命&…...
矩阵消元-MIT
文章目录 1. 行变换消元法,XA 左乘行变换 1. 行变换消元法,XA 左乘行变换 假设我们有一个方程组表示如下： x 2 y z 2 ; 3 x 8 y z 12 ; 4 y z 2 (1) x2yz2;\quad 3x8yz12;\quad4yz2\tag{1} x2yz2;3x8yz12;4yz2(1)矩阵表示如下： [ 1 2 1 3 8 1…...
基于nodejs+vue班级管理系统的设计与实现-flask-django-python-php
随着电子技术的普及和快速发展，线上管理系统被广泛的使用，有很多事业单位和商业机构都在实现电子信息化管理，班级管理系统也不例外，由比较传统的人工管理转向了电子化、信息化、系统化的管理。随着互联网技术的高速发展࿰…...
2024年起，游戏开发团队62%的从业人员使用AI智能技术
易采游戏网3月19日消息：游戏引擎制造商最新发布的《Unity》报告证实，近六成的全球游戏开发团队已在各个环节全面采用人工智能技术，以大幅提升生产效率并节约宝贵时间。 伴随着科技的快速发展，游戏开发领域逐渐转向借助人工智能技术…...
mysql 主从复制、读写分离、高可用
MySQL 的主从复制、读写分离和高可用性是数据库架构中常见的概念，它们旨在提高数据库的可靠性、性能和可扩展性。下面我将分别解释这三个概念： 1. MySQL 主从复制 主从复制 是 MySQL 中的一个功能，允许数据从一个 MySQL 数据库服务器&#…...
力扣爆刷第100天之hot100五连刷86-90
力扣爆刷第100天之hot100五连刷86-90 文章目录 力扣爆刷第100天之hot100五连刷86-90一、139. 单词拆分二、300. 最长递增子序列三、152. 乘积最大子数组四、416. 分割等和子集五、32. 最长有效括号 一、139. 单词拆分 题目链接：https://leetcode.cn/problems/word-…...
Sublime Text3 C/C++一键调试运行代码
minGW的系统环境配置： 使用的C/C编译器是minGW，点此进入官网链接，下载后需要在线安装，安装后需要将安装目录下的bin目录所在路径加入path环境变量。本菜鸡的电脑里安装了CodeBlocks，在CodeBlocks的安装目录下有MinGW&…...
robots协议详解：爬虫也要有边界感
随着互联网的迅猛发展，信息的获取变得越来越便捷，而网络爬虫（Spider）技术就是其中之一。网络爬虫是一种自动化程序，它能够遍历互联网上的网页，提取信息，用于各种用途，例如搜索引擎索引、数据挖掘、价格比较等。但是，爬虫技术虽然强大，但是也是一把双刃剑，在正当使用…...
C#面：简述 var 和 dynamic
var 关键字： var 关键字是在编译时进行类型推断的。也就是说，编译器会根据变量的初始化表达式来确定变量的类型，并在编译时将其替换为实际的类型。var 关键字只能用于局部变量，不能用于字段、方法参数或返回类型。var 关键字声明…...
S32 Design Studio PE工具配置DMA
工具配置 DMA位置跟设备不一样，在Referenced_components里面。 Configurations里面就默认配置就行 channels是比较重要的，一条信号传输用到一个通道。可以选择UART、ADC、CAN之类的，这里用在了SPI通讯里面。 生成代码 在 Generated_Code\dm…...
【Effective C++】36绝不重新定义继承而来的non-virtual 函数
例子如下： class B { public:void mf(); };class D : public B {};D x; // x是一个类型为D的对象 // 方式一 B* pB &x // 获得一个pB 指向 x pB->mf(); // 经由指针调用mf// 方式二 D* pD &x // 获得一个指针指向x pD->mf(); // 经由指针调用mf我…...
STM32-DMA数据转运
DMA进行转运的条件 1：开关控制，DMA_CMD必须使能2：传输计数器必须大于03：触发源必须有触发的信号...
Vue 3 + TypeScript 项目中全局挂载并使用工具函数
一、proxy方式 1.封装日期选择工具函数： 在untils文件夹下新建index.ts,并导出工具函数 /*** 获取不同类型日期* param：类型 dateVal: 是否指定*/ export function getSystemDate(param: any, dateVal: any) {let systemDate dateVal ? new Date(da…...
第二门课：改善深层神经网络＜超参数调试、正则化及优化＞-超参数调试、Batch正则化和程序框架
文章目录 1 调试处理2 为超参数选择合适的范围3 超参数调试的实践4 归一化网络的激活函数5 将Batch Norm拟合进神经网络6 Batch Norm为什么会奏效？7 测试时的Batch Norm8 SoftMax回归9 训练一个SoftMax分类器10 深度学习框架11 TensorFlow 1 调试处理 需要调试的参…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点：传参类型必须是类对象 一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O…...
企业大模型服务合规指南：深度解析备案与登记制度
伴随AI技术的爆炸式发展，尤其是大模型（LLM）在各行各业的深度应用和整合，企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者，还是积极拥抱AI转型的传统企业，在面向公众…...
Qwen系列之Qwen3解读：最强开源模型的细节拆解
文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望 如果…...
Axure零基础跟我学：展开与收回
亲爱的小伙伴，如有帮助请订阅专栏！跟着老师每课一练，系统学习Axure交互设计课程！ Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题：Axure菜单展开与收回 课程视频：...
在Spring Boot中集成RabbitMQ的完整指南
前言 在现代微服务架构中，消息队列（Message Queue）是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件，支持多种消息协议，具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...
【技巧】dify前端源代码修改第一弹-增加tab页
回到目录 【技巧】dify前端源代码修改第一弹-增加tab页 尝试修改dify的前端源代码，在知识库增加一个tab页"HELLO WORLD"，完成后的效果如下 [gif01] 1. 前端代码进入调试模式 参考 【部署】win10的wsl环境下启动dify的web前端服务 启动调试…...
以太网PHY布局布线指南
1. 简介 对于以太网布局布线遵循以下准则很重要，因为这将有助于减少信号发射，最大程度地减少噪声，确保器件作用，最大程度地减少泄漏并提高信号质量。 2. PHY设计准则 2.1 DRC错误检查 首先检查DRC规则是否设置正确，然…...
轻量安全的密码管理工具Vaultwarden
一、Vaultwarden概述 Vaultwarden主要作用是提供一个自托管的密码管理器服务。它是Bitwarden密码管理器的第三方轻量版，由国外开发者在Bitwarden的基础上，采用Rust语言重写而成。 （一）Vaultwarden镜像的作用及特点 轻量级与高性…...