数据可视化-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',
            },
            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月', '结束']  
        },  
    ],  
    yAxis: [  
        {  
            type: 'value'  
        },  
    ],   
    // ... 其他配置项保持不变 ...  
    xAxis: [  
        {  
            type: 'category',      
            data: ['起始', '2月', '4月', '6月', '9月', '11月', '结束']  
        },  
    ],  
    yAxis: [  
        {  
            type: 'value'  
        },  
    ],  
    series: [  
        {  
            name: '2023年',  
            type: 'bar',  
            stack: 'total',  
            data: [0, 65, 75 - 65, 66 - 75, 80 - 66, 90 - 80, 0], // 注意这里的数据变化,结束部分通常为0  
            itemStyle: {  
                color: function(params) {  
                    // 根据数据的索引设置颜色,起始和结束部分设置为透明  
                    var index = params.dataIndex;  
                    if (index === 0 || index === params.data.length - 1) {  
                        return 'transparent'; // 起始和结束部分透明  
                    } else {  
                        return 'rgba(220, 220, 220, 0.8)'; // 其他部分默认颜色  
                    }  
                },  
                barBorderColor: '#fff',  
                borderWidth: 1  
            },  
            label: {  
                show: true,  
                position: 'insideRight'  
            },  
            markPoint: {  
                data: [  
                    {type: 'max', name: '最大值'},  
                    {type: 'min', name: '最小值'}  
                ]  
            },  
            markLine: {  
                data: [  
                    {type: 'average', name: '平均值'}  
                ]  
            }  
        },  
        // ... 可以添加更多年份的系列数据 ...  
    ],  
};
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

快去试试吧

3.饼图

变为饼图。你需要做这些:

  • 将 xAxis 和 yAxis 配置项移除,因为饼图不需要坐标轴。
  • 移除 series 中的 type: 'line',改为 type: 'pie'
  • 饼图通常不需要 tooltip 的 trigger: 'axis' 配置,因为它基于整个饼图的数据点触发提示框。
  • 添加饼图特有的配置项,比如 radius(饼图的半径)、center(饼图的中心位置)等。

<!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: 'item',  
        formatter: "{a} <br/>{b}: {c} ({d}%)"  
    },  
    legend: {  
        orient: 'horizontal', // 水平显示图例  
        left: 'center', // 图例居中显示  
        top: '%', // 图例距离容器顶部的百分比位置  
        data: ['2023年', '2024年']  
    },  
    series: [  
        {  
            name: '成绩',  
            type: 'pie',  
            radius: ['75%', '55%'],  
            avoidLabelOverlap: false,  
            label: {  
                show: true,  
                position: 'center' 
       
            },  
            emphasis: {  
                label: {  
                    show: true,  
                    fontSize: '30',  
                    fontWeight: 'bold'  
                }  
            },  
            labelLine: {  
                show: false  
            },  
            data: [  
                {value: 380, name: '2023年'}, // 假设这是2023年的总成绩  
                {value: 450, name: '2024年'}  // 假设这是2024年的总成绩  
                // 注意:这里的数据是示例数据,你需要替换为实际的成绩总和  
            ]  
        }  
    ]  
};
        //使用刚指定的配置项和数据显示图表
        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>

拓展-标题设置常用属性

属性名类型默认值说明
textstring''主标题文本,支持使用 \n 换行。
subtextstring''副标题文本,支持使用 \n 换行。
leftstring / number'auto'标题组件离容器左侧的距离。
topstring / number'auto'标题组件离容器上侧的距离。
textAlignstring'left'主标题的水平对齐方式,可选值为:'left''center''right'
textVerticalAlignstring'top'垂直对齐方式,可选值为:'top''middle''bottom'
textStyleobject{}主标题样式,包括颜色、字体、对齐方式等。
subtextStyleobject{}副标题样式,包括颜色、字体、对齐方式等。
paddingnumber / array0内边距,单位是像素,可以是单一数字,也可以是数组分别表示上、右、下、左的内边距。
itemStyleobject{}标题标记的图形样式,例如颜色、边框等。
backgroundColorstring'transparent'标题背景色,默认为透明。
borderColorstring'#ccc'标题边框颜色。
borderWidthnumber0标题边框线宽。
padding[number, number, number, number][0, 0, 0, 0]标题内边距,单位px,默认各方向内边距为0,顺序为:上、右、下、左。
shadowBlurnumber0图形阴影的模糊大小。
shadowColorstring'rgba(0, 0, 0, 0.5)'图形阴影的颜色。
shadowOffsetXnumber0图形阴影在水平方向上的偏移距离。
shadowOffsetYnumber0图形阴影在垂直方向上的偏移距离。
textBorderColorstring'#000'文本边框颜色。
textBorderWidthnumber0文本边框线宽。
zlevelnumber0所有图形的 zlevel 值。
znumber2组件的所有图形的 z 值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/462695.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ进阶

1.消息可靠性 消息从发送,到消费者接收,会经历多个过程: 其中的每一步都可能导致消息丢失,常见的丢失原因包括: - 发送时丢失: - 生产者发送的消息未送达exchange - 消息到达exchange后未到达queue - MQ宕机,queue将消息丢失 - consumer接收到消息后未消费就宕机 …

Rocky Linux 基本工具的安装

1.系统安装后先查看ip地址 ip addr 2.安装net工具 &#xff1a;ifconfig yum install net-tools 3.安装gcc &#xff1b;选择都选 y yum install gcc yum install gcc-c 4.安装tcl yum install -y tcl 5.安装lsof &#xff08;端口查看工具&#xff09; yum install l…

JMeter 面试题及答案整理,最新面试题

JMeter中如何进行性能测试的规划和设计&#xff1f; 进行JMeter性能测试的规划和设计主要遵循以下几个步骤&#xff1a; 1、确定测试目标&#xff1a; 明确性能测试的目的和目标&#xff0c;比如确定要测试的系统性能指标&#xff08;如响应时间、吞吐量、并发用户数等&#…

前端跨平台开发框架:简化多端开发的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

#QT(MainWindow初尝---文本编辑器)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;使用MainWindow做一个文本编辑器 3.记录 &#xff08;1&#xff09;创建几个功能 &#xff08;2&#xff09;为几个功能写实现&#xff0c;这里不能使用转到槽&#xff0c;需要自己用connect函数关联。这里的功能是QAction类&am…

FAN3224TMX门极驱动器中文资料PDF数据手册引脚图参数价格图片功能特性

产品概述&#xff1a; FAN3223-25 系列双 4A 门极驱动器以较短的开关间隔提供高峰值电流脉冲&#xff0c;用于在低侧开关应用中驱动 N 沟道增强模式 MOSFET。该驱动器提供 TTL 或 CMOS 输入阈值。内部电路将输出保持在低电平&#xff0c;直到电源电压处于运行范围内&#xff0…

洛谷 P1958 上学路线

题目描述 你所在城市的街道好像一个棋盘&#xff0c;有 a 条南北方向的街道和 b 条东西方向的街道。南北方向的 a 条街道从西到东依次编号为 1 到 a&#xff0c;而东西方向的 b 条街道从南到北依次编号为 1 到 b&#xff0c;南北方向的街道 i 和东西方向的街道 j 的交点记为 (…

Swift 面试题及答案整理,最新面试题

Swift 中如何实现单例模式&#xff1f; 在Swift中&#xff0c;单例模式的实现通常采用静态属性和私有初始化方法来确保一个类仅有一个实例。具体做法是&#xff1a;定义一个静态属性来存储这个单例实例&#xff0c;然后将类的初始化方法设为私有&#xff0c;以阻止外部通过构造…

基于CNN多阶段图像超分+去噪(超级简单版)

这是之前的一项工作&#xff0c;非常简单&#xff0c;简单的复现了两个算法&#xff0c;然后把它们串起来了。 可执行的程序链接&#xff1a;CSDN; Github 我们分成两部分进行讲解&#xff1a; 1. 图像去噪 1.1 基本思路 图像的去噪工作基于很普通的CNN去噪&#xff0c;效…

Linux操作系统-汇编LED驱动程序基础

一、汇编LED原理分析 IMX6ULL-LED灯硬件原理分析&#xff1a; 1、使能时钟&#xff0c;CCGR0-CCGR6这7个寄存器控制着IMX6ULL所有外设时钟的使能。为了简单&#xff0c;设置CCGR0-CCGR6这7个寄存器全部为0XFFFFFFFF&#xff0c;相当于使能全部外设时钟。&#xff08;在IMX6ULL芯…

java算法第25天 | ● 216.组合总和III ● 17.电话号码的字母组合

这两道题都是基于回溯的基本问题。 216.组合总和III 这道题是77.组合问题的变体&#xff0c;只不过终止条件多了一个和等于n。 class Solution {List<List<Integer>> resnew ArrayList<>();List<Integer> pathnew ArrayList<>();public List&l…

matlab采用PSO优化算法进行机器人线路规划

1、内容简介 略 63-可以交流、咨询、答疑 matlab采用PSO优化算法进行机器人线路规划 2、内容说明 避障&#xff0c;PSO算法&#xff0c;固定点优化&#xff0c;支持障碍物、优化点设置 matlab采用PSO优化算法进行机器人线路规划 3、仿真分析 4、参考论文 略

FFmpeg查看所有支持的编码/解码器/封装/解封装/媒体格式/滤镜

查看所有支持的编码器与解码器 ffmpeg -codecs 只查看所有编码器: ffmpeg -encoders 只查看所有解码器: ffmpeg -decoders 只查看H264编码器: ffmpeg -h encoderh264 只查看H264解码器: ffmpeg -h decoderh264 查看所有支持的封装: ffmpeg -muxers 查看所有支持的解封装…

【MySQL】5. 数据类型

数据类型 1. 数据类型分类 2. 数值类型 2.1 tinyint类型 数值越界测试&#xff1a; mysql> use tt; Database changed mysql> create table t1(-> num tinyint-> ); Query OK, 0 rows affected (0.01 sec)mysql> insert into t1 values(-128); Query OK, 1 r…

Zookeeper 作为Dubbo端注册中心基础知识

Dubbo 官方推荐使用 ZooKeeper 作为注册中心&#xff0c;它是在实际生产中最常用的注册中心实现&#xff0c;这也是我们本课时要介绍 ZooKeeper 核心原理的原因。 要与 ZooKeeper 集群进行交互&#xff0c;我们可以使用 ZooKeeper 原生客户端或是 ZkClient、Apache Curator 等…

vscode jupyter 如何关闭声音

网上之前搜的zen模式失败 仅仅降低sound失败 #以下是成功方式&#xff1a; 首先确保user和remote的声音都是0&#xff1a; 然后把user和remote的以下设置都设置为off就行了&#xff01; 具体操作参考 https://stackoverflow.com/questions/54173462/how-to-turn-off-or-on-so…

C语言 内存函数

目录 前言 一、memcpy()函数 二、memmove()函数 三、memset函数 四、memcmp()函数 总结 前言 在C语言中内存是我们用来存储数据的地址&#xff0c;今天我们来讲一下C语言中常用的内存函数。 一、memcpy()函数 memcpy()函数与我们之前讲的strcpy()函数类似&#xff0c;只…

计算机网络-概述

文章目录 1.2 因特网概述1.2.1 网络、互连网&#xff08;互联网&#xff09;和因特网1.2.2 因特网发展的三个阶段1.2.4 因特网的组成 1.3 三种交换方式1.3.1 电路交换1.3.2 分组交换1.3.3 报文交换1.3.4 三种方式对比 1.4 计算机网络的定义1.5 计算机网络的性能指标1.5.1 速率1…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Tabs)

通过页签进行内容视图切换的容器组件&#xff0c;每个页签对应一个内容视图。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 该组件从API Version 11开始默认支持安全区避让特性(默认值为&#x…

Gitlab CI/CD 自动化打包部署前端(vue)项目

一、虚拟机安装 1.vmware下载 2.镜像下载 3.Ubuntu 4.新建虚拟机 一直点下一步&#xff0c;直到点击完成。 5.分配镜像 二、Gitlab CI/CD 自动化部署项目 1.配置GitLab CI/CD&#xff1a; A.在你的Vue.js项目中&#xff0c;创建一个名为.gitlab-ci.yml的文件&#xff0…