Echarts大屏可视化_05 折线图的定制开发

继续跟着@pink老师学习Echarts相关内容！！！！！！！！！

折线图1

1.引入

折线图选取示例地址   标题没有用到就给他删了

直接引入

注意这里是line下面的chart 获取dom元素一定不要错误

(function () {// 实例化对象var myChart = echarts.init(document.querySelector(".line .chart"));// 指定配置项和数据let option = {tooltip: {trigger: "axis",},legend: {data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},toolbox: {feature: {saveAsImage: {},},},xAxis: {type: "category",boundaryGap: false,data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{name: "Email",type: "line",stack: "Total",data: [120, 132, 101, 134, 90, 230, 210],},{name: "Union Ads",type: "line",stack: "Total",data: [220, 182, 191, 234, 290, 330, 310],}],};// 把配置项给实例对象myChart.setOption(option);
})();

 

2.定制开发

1.基本样式修改

有了柱状图的经验，大多数基本的样式直接修改就完事了

(function () {// 实例化对象var myChart = echarts.init(document.querySelector(".line .chart"));// 指定配置项和数据let option = {// 通过color修改两条线的颜色color: ["#00f2f1", "#ed3f35"],tooltip: {trigger: "axis",},legend: {// 如果series 里面设置了name，就不用写data了// 图例颜色textStyle: {color: "#4c9bfd",},// 图例距离右边10%  一定要加引号 不能遗漏right: "10%",// data: ["新增粉丝", "新增游客"],},grid: {top: "20%",left: "3%",right: "4%",bottom: "3%",show: true, //显示边框borderColor: "#012f4a", //边框颜色containLabel: true, //包含刻度文字在内},xAxis: {type: "category",boundaryGap: false, //去除轴内间距data: ["1月","2月","3月","4月","5月","6月","8月","9月","10月","11月","12月",],// 去除刻度axisTick: {show: false,},// 文字颜色axisLabel: {color: "#4c9bfd",},// x轴线的颜色axisLine: {show: false,},},yAxis: {type: "value",// 去除刻度axisTick: {show: false,},// 文字颜色axisLabel: {color: "#4c9bfd",},// 去除轴线axisLine: {show: false,},// 分割线颜色splitLine: {lineStyle: {color: "#012f4a",},},},series: [{name: "新增粉丝",type: "line",data: [24, 40, 101, 134, 90, 230, 210, 203, 120, 230, 210, 120],// 折现修饰为圆滑smooth: true,},{name: "新增游客",type: "line",data: [40, 60, 191, 324, 290, 330, 310, 210, 180, 200, 180, 79],// 折现修饰为圆滑smooth: true,},],};// 把配置项给实例对象myChart.setOption(option);// 侦听屏幕的变化，让图表跟着变化window.addEventListener("resize", function () {myChart.resize();});
})();

 

2. 折线图Tab切换分析+实现

我们如果想加一个tab切换标签 比如想看 2022 和 2023年的变化 如何做到呢？？

样式自己写一下

1.HTML
<h2>折线图-人员变化<a href="javascript:;">2022</a><a href="javascript:;">2023</a>
</h2>

数据应该是后端发送过来的，这里编一个。

思路是，点击2022 或者 2023 的时候 将series中的数据  用后端传过来的数据赋值就完成了。后端的格式应该是数组类型的。

2.jQuery获取到点击事件

不要忘记引入jQuery 并且引入jQuery必须在index的上面。 不然会提示$找不到，因为脚本是按照从上往下的顺序加载的。

不知道jQuery的可以看我的jQuery精简教程。

  //tab栏切换效果$(".line h2").on("click", "a", function () {alert("我点击了");});

我们利用索引查看点击的是哪一个 

  //tab栏切换效果$(".line h2").on("click", "a", function () {// 查看点击的索引号console.log($(this).index());});

3.构造数据 点击获取数据
  // 假数据 其实应该是后端返回var yearData = [{year: "2022",data: [[24, 40, 101, 134, 90, 230, 210, 203, 120, 230, 210, 120],[40, 60, 191, 324, 290, 330, 310, 210, 180, 200, 180, 79],],},{year: "2023",data: [[124, 140, 101, 134, 90, 230, 210, 203, 120, 230, 210, 120],[140, 160, 191, 324, 290, 330, 310, 210, 180, 200, 180, 79],],},];  //tab栏切换效果$(".line h2").on("click", "a", function () {// 查看点击的索引号// console.log($(this).index());//点击a之后 根据当前a的索引号 找到对应的yearData的相关对象console.log(yearData[$(this).index()]);});

4. 将获得的数据赋值给option中的series

注意 更换完数据并不会达到切换的效果，因为没有调用渲染函数，所以我们应该重新构建一下图表

  //tab栏切换效果$(".line h2").on("click", "a", function () {// 查看点击的索引号// console.log($(this).index());//点击a之后 根据当前a的索引号 找到对应的yearData的相关对象// console.log(yearData[$(this).index()]);option.series[0].data = yearData[$(this).index()].data[0];option.series[1].data = yearData[$(this).index()].data[1];// 重新渲染myChart.setOption(option);});

 5.改变原始数据

将原始数据改变，就跟开发调用后端接口一样了。

    series: [{name: "新增粉丝",type: "line",data: yearData[0].data[0],// 折现修饰为圆滑smooth: true,},{name: "新增游客",type: "line",data: yearData[0].data[1],// 折现修饰为圆滑smooth: true,},],

 

折线图2 

1.引入

Echarts示例地址  从这个网站复制数据

// 折线图2 模块制作
(function () {// 实例化对象var myChart = echarts.init(document.querySelector(".line2 .chart"));// 指定配置项和数据var option = {tooltip: {trigger: "axis",},legend: {data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: [{type: "category",boundaryGap: false,data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},],yAxis: [{type: "value",},],series: [{name: "Email",type: "line",stack: "Total",areaStyle: {},emphasis: {focus: "series",},data: [120, 132, 101, 134, 90, 230, 210],},{name: "Union Ads",type: "line",stack: "Total",areaStyle: {},emphasis: {focus: "series",},data: [220, 182, 191, 234, 290, 330, 310],},],};// 把配置项给实例对象myChart.setOption(option);
})();

 

2.定制开发

1.基本样式修改

// 折线图2 模块制作
(function () {// 实例化对象var myChart = echarts.init(document.querySelector(".line2 .chart"));// 指定配置项和数据var option = {tooltip: {trigger: "axis",},legend: {// 位置调整top: "0%",data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],// 修改图例组件的文字颜色textStyle: {color: "rgba(255, 255, 255, .5)",fontSize: 12,},},// 调整边距grid: {top: "30",left: "10",right: "10",bottom: "10",containLabel: true,},xAxis: [{type: "category",boundaryGap: false,data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],// 文本颜色axisLabel: {textStyle: {color: "rgba(255, 255, 255, .6)",fontSize: 12,},},// x轴线的颜色axisLine: {lineStyle: {color: "rgba(255, 255, 255, .2)",},},},],yAxis: [{type: "value",// 不显示刻度axisTick: { show: false },// x轴线的颜色axisLine: {lineStyle: {color: "rgba(255, 255, 255, .1)",},},// 文本颜色axisLabel: {textStyle: {color: "rgba(255, 255, 255, .6)",fontSize: 12,},},// 分割线颜色splitLine: {lineStyle: {color: "rgba(255, 255, 255, .1)",},},},],series: [{name: "Email",type: "line",stack: "Total",areaStyle: {},emphasis: {focus: "series",},data: [120, 132, 101, 134, 90, 230, 210],},{name: "Union Ads",type: "line",stack: "Total",areaStyle: {},emphasis: {focus: "series",},data: [220, 182, 191, 234, 290, 330, 310],},],};// 把配置项给实例对象myChart.setOption(option);
})();

2. 修改两个线模块配置

1.填充颜色设置

建议直接复制代码

        // 填充区域areaStyle: {// 渐变色，只需要复制即可color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色},{offset: 0.8,color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色},],false),shadowColor: "rgba(0, 0, 0, 0.1)",},

2.拐点配置定制+更换数据
// 折线图2 模块制作
(function () {// 实例化对象var myChart = echarts.init(document.querySelector(".line2 .chart"));// 指定配置项和数据var option = {tooltip: {trigger: "axis",},legend: {// 位置调整top: "0%",data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],// 修改图例组件的文字颜色textStyle: {color: "rgba(255, 255, 255, .5)",fontSize: 12,},},// 调整边距grid: {top: "30",left: "10",right: "10",bottom: "10",containLabel: true,},xAxis: [{type: "category",boundaryGap: false,data: ["01","02","03","04","05","06","07","08","09","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30",],// 文本颜色axisLabel: {textStyle: {color: "rgba(255, 255, 255, .6)",fontSize: 12,},},// x轴线的颜色axisLine: {lineStyle: {color: "rgba(255, 255, 255, .2)",},},},],yAxis: [{type: "value",// 不显示刻度axisTick: { show: false },// x轴线的颜色axisLine: {lineStyle: {color: "rgba(255, 255, 255, .1)",},},// 文本颜色axisLabel: {textStyle: {color: "rgba(255, 255, 255, .6)",fontSize: 12,},},// 分割线颜色splitLine: {lineStyle: {color: "rgba(255, 255, 255, .1)",},},},],series: [{name: "Email",type: "line",smooth: true, //折线圆滑// 单独修改线的样式lineStyle: {color: "#0184d5",width: 2,},// 填充区域areaStyle: {// 渐变色，只需要复制即可color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色},{offset: 0.8,color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色},],false),shadowColor: "rgba(0, 0, 0, 0.1)",},// 拐点设置为小圆点symbol: "circle",symbolSize: 5,showSymbol: false, //开始不显示拐点，鼠标经过显示// 设置拐点颜色以及边框itemStyle: {color: "#0184d5",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 12,},emphasis: {focus: "series",},data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 40, 30, 40, 30,40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20, 40,],},{name: "Union Ads",type: "line",smooth: true, //折线圆滑// 单独修改线的样式lineStyle: {color: "#0184d5",width: 2,},// 填充区域areaStyle: {// 渐变色，只需要复制即可color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(1, 216, 135, 0.4)", // 渐变色的起始颜色},{offset: 0.8,color: "rgba(1, 216, 135, 0.1)", // 渐变线的结束颜色},],false),shadowColor: "rgba(0, 0, 0, 0.1)",},// 拐点设置为小圆点symbol: "circle",symbolSize: 5,showSymbol: false, //开始不显示拐点，鼠标经过显示// 设置拐点颜色以及边框itemStyle: {color: "#00d887",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 12,},emphasis: {focus: "series",},data: [50, 30, 50, 60, 10, 50, 30, 50, 60, 40, 60, 40, 80, 30, 50, 60, 10,50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50, 10, 40,],},],};// 把配置项给实例对象myChart.setOption(option);// 侦听屏幕的变化，让图表跟着变化window.addEventListener("resize", function () {myChart.resize();});
})();

 

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

采集工具-免费采集器下载

采集工具-免费采集器下载

在当今信息时代&#xff0c;互联网已成为人们获取信息的主要渠道之一。对于研究者和开发者来说&#xff0c;如何快速准确地采集整个网站数据是至关重要的一环。以下将从九个方面详细探讨这一问题。 确定采集目标 在着手采集之前&#xff0c;明确目标至关重要。这有助于确定采集…
阅读更多...
Huawei FusionSphere FusionCompte FusionManager

Huawei FusionSphere FusionCompte FusionManager

什么是FusionSphere FusionSphere 解决方案不独立发布软件&#xff0c;由各配套部件发布&#xff0c;请参 《FusionSphere_V100R005C10U1_版本配套表_01》。 目前我们主要讨论FusionManager和FusionCompute两个组件。 什么是FusionCompte FusionCompute是华为提供的虚拟化软…
阅读更多...
Ubuntu22.04 交叉编译mp4V2 for Rv1106

Ubuntu22.04 交叉编译mp4V2 for Rv1106

一、配置工具链环境 sudo vim ~/.bashrc在文件最后添加 export PATH$PATH:/opt/arm-rockchip830-linux-uclibcgnueabihf/bin 保存&#xff0c;重启机器 二、下载mp4v2 下载路径&#xff1a;MP4v2 | mp4v2 三、修改CMakeLists.txt 四、执行编译 mkdir build cd buildcmak…
阅读更多...
现在的00后，实在是太卷了......

现在的00后，实在是太卷了......

现在的小年轻真的卷得过分了。前段时间我们公司来了个00年的&#xff0c;工作没两年&#xff0c;跳槽到我们公司起薪18K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天&#xff0c;原来这位小老弟家里条…
阅读更多...
万字长文带你搞定MMUTLBTWU

万字长文带你搞定MMUTLBTWU

最近一直在学习内存管理&#xff0c;也知道MMU是管理内存的映射的逻辑IP&#xff0c;还知道里面有个TLB。 今天刚刚好看到了几篇前辈的文章&#xff0c;很是不错&#xff0c;于是这里来一起学习一下吧。 PART 一&#xff1a;MMU 架构篇 MMU&#xff08;Memory Management Uni…
阅读更多...
你好！斐波那契查找【JAVA】

你好！斐波那契查找【JAVA】

1.有幸遇见 斐波那契查找算法&#xff0c;也称黄金分割查找算法&#xff0c;是一种基于斐波那契数列的查找算法。与二分查找类似&#xff0c;斐波那契查找也是一种有序查找算法&#xff0c;但它的查找点不是中间位置&#xff0c;而是根据斐波那契数列来确定&#xff0c;因此又称…
阅读更多...
JS生成登录验证码

JS生成登录验证码

采用js生成登录的验证码 采用的技术点有html&#xff0c;css&#xff0c;JS&#xff0c;jQuery HTML&#xff1a; <div class"box_b"><img src"./img/0775639c-c82c-4a29-937f-d2a3bae5151a.png" alt""><div class"regist…
阅读更多...
Java面试题（每天10题）-------连载（41）

Java面试题（每天10题）-------连载（41）

目录 Spring篇 1、什么是Spring框架&#xff1f;Spring框架主要有哪些模块&#xff1f; 2、使用Spring框架能带来哪些好处&#xff1f; 3、什么是控制反转&#xff08;IOC&#xff09;&#xff1f;什么是依赖注入&#xff1f; 4、解释下Spring中的IoC? 5、BeanFactory和…
阅读更多...
YOLOv8改进有效涨点 | 2023 | SPD-Conv空间深度转换卷积（高效空间编码技术）

YOLOv8改进有效涨点 | 2023 | SPD-Conv空间深度转换卷积（高效空间编码技术）

一、本文介绍 本文给大家带来的改进内容是SPD-Conv&#xff08;空间深度转换卷积&#xff09;技术。SPD-Conv是一种创新的空间编码技术&#xff0c;它通过更有效地处理图像数据来改善深度学习模型的表现。SPD-Conv的基本概念&#xff1a;它是一种将图像空间信息转换为深度信息…
阅读更多...
LiveGBS流媒体平台GB/T28181功能-概览中负载信息直播、回放、播放、录像、H265、级联查看负载会话列表

LiveGBS流媒体平台GB/T28181功能-概览中负载信息直播、回放、播放、录像、H265、级联查看负载会话列表

LiveGBS常见问题-概览中负载信息具体表示什么直播、回放、播放、录像、H265、级联等 1、负载信息2、负载信息说明3、会话列表查看3.1、会话列表 4、搭建GB28181视频直播平台 1、负载信息 实时展示直播、回放、播放、录像、H265、级联等使用数目 2、负载信息说明 直播&#x…
阅读更多...
GeoServer本地部署与远程访问Web管理页面——“cpolar内网穿透”

GeoServer本地部署与远程访问Web管理页面——“cpolar内网穿透”

文章目录 前言1.安装GeoServer2. windows 安装 cpolar3. 创建公网访问地址4. 公网访问Geo Servcer服务5. 固定公网HTTP地址 前言 GeoServer是OGC Web服务器规范的J2EE实现&#xff0c;利用GeoServer可以方便地发布地图数据&#xff0c;允许用户对要素数据进行更新、删除、插入…
阅读更多...
Linux常用命令——atq命令

Linux常用命令——atq命令

在线Linux命令查询工具 atq 列出当前用户的at任务列表 补充说明 atq命令显示系统中待执行的任务列表&#xff0c;也就是列出当前用户的at任务列表。 语法 atq(选项)选项 -V&#xff1a;显示版本号&#xff1b; -q&#xff1a;查询指定队列的任务。实例 at now 10 minu…
阅读更多...
个人Windows电脑通过Cloudreve+Cpolar搭建PHP云盘系统公网可访问

个人Windows电脑通过Cloudreve+Cpolar搭建PHP云盘系统公网可访问

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…
阅读更多...
GPC-数据鉴别(DAP)模式验证

GPC-数据鉴别(DAP)模式验证

概述&#xff1a; 9.2.1 数据鉴别(DAP)模式验证 应用提供方可以要求对其加载到卡片的应用代码进行完整性和真实性的验证。在本规范中详述的具备“DAP 验证权限”的应用提供方安全域&#xff0c;代表应用提供方提供了这种验证服务。授权管理者可以要求对所有加载到卡片的应用…
阅读更多...
Socket和Http通信原理

Socket和Http通信原理

Socket是对TCP/IP协议的封装&#xff0c;Socket本身并不是协议&#xff0c;而是一个调用接口&#xff08;API&#xff09;&#xff0c;通过Socket&#xff0c;我们才能使用TCP/IP协议,主要利用三元组【ip地址&#xff0c;协议&#xff0c;端口】。 Http协议即超文本传输协议&a…
阅读更多...
实用篇 | 利用Flask+Postman为深度学习模型进行快速测试(超详细)

实用篇 | 利用Flask+Postman为深度学习模型进行快速测试(超详细)

利用FlaskPostman为深度学习模型进行快速测试&#xff0c;以及算法中的一些实例&#xff0c;以后会更新一些新的模板~~ #本文环境&#xff1a;服务器Ubuntu20.04(docker) 目录 1.下载postrman 2.编写flas的app文件 3.在postrman发送请求 4.实例 在服务器创建app.py文件 …
阅读更多...
基于Python手把手教你实现flappy bird游戏

基于Python手把手教你实现flappy bird游戏

目录 前言开始前的准备工作进入正题结束语 前言 想必玩过游戏的都知道&#xff0c;Flappy Bird是一款简单却富有挑战性的经典的小鸟飞行游戏&#xff0c;让许多玩家为之痴迷&#xff0c;而作为开发者&#xff0c;那肯定要通过技术手段来再做一遍这款经典游戏。那么本文就来通…
阅读更多...
Maven生命周期

Maven生命周期

Maven生命周期 通过IDEA工具的辅助&#xff0c;能很轻易看见Maven的九种生命周期命令&#xff0c;如下&#xff1a; 双击其中任何一个&#xff0c;都会执行相应的Maven构建动作&#xff0c;为啥IDEA能实现这个功能呢&#xff1f;道理很简单&#xff0c;因为IDEA封装了Maven提供…
阅读更多...
Pillow操控图像，Python必备神器全面解析！

Pillow操控图像，Python必备神器全面解析！

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com Pillow 是一个强大的 Python 图像处理库&#xff0c;它提供了丰富的功能&#xff0c;能够处理图像的加载、编辑、处理和保存。这个库建立在 Python Imaging Library (PIL) 的基础上&#xff0c;并延续了 PIL 的开…
阅读更多...
医院信息化专业人员必备医院业务运作及管理流程知识（详细）

医院信息化专业人员必备医院业务运作及管理流程知识（详细）

业务流程是一家医院运作的基础，医院所有业务都需要流程加以驱动。熟知医院各项业务，了解医院管理流程，有利于医院工作人员更好地投入自身岗位，提高工作效率。本文整理了常见医院业务运作及管理流程，仅供参考！ 【门诊业务】 一、门诊业务的特点： 1．接诊病人多，就诊时…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023