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.mzph.cn/news/191032.shtml

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

相关文章

吉他初学者学习网站搭建系列(4)——如何查询和弦图

吉他初学者学习网站搭建系列(4)——如何查询和弦图

文章目录 背景实现ChordDbvexchords 背景 作为吉他初学者&#xff0c;如何根据和弦名快速查到和弦图是一个必不可少的功能。以往也许你会去翻和弦的书籍查询&#xff0c;像查新华字典那样&#xff0c;但是有了互联网后我们不必那样&#xff0c;只需要在网页上输入和弦名&#…
阅读更多...
POSTGRESQL中如何利用SQL语句快速的进行同环比？

POSTGRESQL中如何利用SQL语句快速的进行同环比？

1. 引言 在数据驱动的时代&#xff0c;了解销售、收入或任何业务指标的同比和环比情况对企业决策至关重要。本文将深入介绍如何利用 PostgreSQL 和 SQL 语句快速、准确地进行这两种重要分析。 2. 数据准备 为了演示&#xff0c;假设我们有一张 sales 表&#xff0c;存储了销…
阅读更多...
【PyTorch】线性回归

【PyTorch】线性回归

文章目录 1. 代码实现1.1 一元线性回归模型的训练 2. 代码解读2.1. tensorboardX2.1.1. tensorboardX的安装2.1.2. tensorboardX的使用 1. 代码实现 波士顿房价数据集下载 1.1 一元线性回归模型的训练 import numpy as np import torch import torch.nn as nn from torch.ut…
阅读更多...
深度学习：什么是知识蒸馏（Knowledge Distillation）

深度学习：什么是知识蒸馏（Knowledge Distillation）

1 概况 1.1 定义 知识蒸馏&#xff08;Knowledge Distillation&#xff09;是一种深度学习技术&#xff0c;旨在将一个复杂模型&#xff08;通常称为“教师模型”&#xff09;的知识转移到一个更简单、更小的模型&#xff08;称为“学生模型”&#xff09;中。这一技术由Hint…
阅读更多...
二叉树遍历及应用

二叉树遍历及应用

文章目录 前言构建二叉树前序遍历中序遍历后序遍历二叉树的结点个数二叉树的叶节点个数二叉树的高度二叉树第K层结点个数 前言 二叉树的遍历及应用主要是运用了递归、分治的思想。在这一篇文章&#xff0c;小编将介绍二叉树的前序遍历、中序遍历、后序遍历&#xff0c;求二叉树…
阅读更多...
Fiddler抓包工具之fiddler设置手机端抓包

Fiddler抓包工具之fiddler设置手机端抓包

fiddler设置手机端抓包 安卓手机抓包 第一步&#xff1a;配置电脑和安卓的相关设置 1、手机和fiddler位于同一个局域网内&#xff1b;首先从fiddler处获取到ip地址和端口号&#xff1a; &#xff0c;点击online&#xff0c;最后一行就是ip地址 2、路径&#xff1a;Tools》O…
阅读更多...
【ASP.NET CORE】数据迁移 codefirst

【ASP.NET CORE】数据迁移 codefirst

已经写好实体类&#xff0c;使用add-migration生成数据迁移语句&#xff0c;注意如果项目中有多个dbcontext需要使用 -context 名称&#xff0c;指定下需要使用的dbcontext add-Migration Address -context mvcsqlcontext运行后会生成两个文件 2. 使用Update-Database语句更…
阅读更多...
Web自动化测试详解

Web自动化测试详解

做测试的同学们都了解&#xff0c;做Web自动化&#xff0c;我们主要用Selenium或者是QTP。 有的人可能就会说&#xff0c;我没这个Java基础&#xff0c;没有Selenium基础&#xff0c;能行吗&#xff1f;测试虽然属于计算机行业&#xff0c;但其实并不需要太深入的编程知识&…
阅读更多...
C++学习之路（十六）C++ 用Qt5实现一个工具箱（为屏幕颜色提取功能增加一个点击复制的功能）- 示例代码拆分讲解

C++学习之路（十六）C++ 用Qt5实现一个工具箱（为屏幕颜色提取功能增加一个点击复制的功能）- 示例代码拆分讲解

上篇文章&#xff0c;我们用 Qt5 实现了在小工具箱中添加了《颜色代码转换和屏幕颜色提取功能》功能。今天我们把屏幕颜色提取的功能再扩展一下&#xff0c;让它可以点击复制吧。下面我们就来看看如何来规划开发这样的小功能并且添加到我们的工具箱中吧。 老规矩&#xff0c;先…
阅读更多...
数字图像处理（实践篇）十三 数据增强之给图像添加噪声！

数字图像处理（实践篇）十三 数据增强之给图像添加噪声！

目录 一 涉及的函数 二 实践 一 涉及的函数 skimage.util.random_noise( ) skimage.util.random_noise(image, modegaussian, seedNone, clipTrue, **kwargs) 函数的功能&#xff1a;为浮点型图片添加各种随机噪声。 输入&#xff1a; ①image&#xff1a;输入图像&…
阅读更多...
【C/C++笔试练习】公有派生、构造函数内不执行多态、抽象类和纯虚函数、多态中的缺省值、虚函数的描述、纯虚函数的声明、查找输入整数二进制中1的个数、手套

【C/C++笔试练习】公有派生、构造函数内不执行多态、抽象类和纯虚函数、多态中的缺省值、虚函数的描述、纯虚函数的声明、查找输入整数二进制中1的个数、手套

文章目录 C/C笔试练习选择部分&#xff08;1&#xff09;公有派生&#xff08;2&#xff09;构造函数内不执行多态&#xff08;3&#xff09;抽象类和纯虚函数&#xff08;4&#xff09;多态中的缺省值&#xff08;5&#xff09;程序分析&#xff08;6&#xff09;重载和隐藏&a…
阅读更多...
【开箱即用】前后端同时开源！周末和AI用Go语言共同研发了一款笔记留言小程序！

【开箱即用】前后端同时开源！周末和AI用Go语言共同研发了一款笔记留言小程序！

大家好&#xff0c;我是豆小匠。 真的是当你在怀疑AI会不会取代人类的时候&#xff0c;别人已经用AI工具加速几倍的生产速度了… 周末体验了和AI共同开发的感受&#xff0c;小项目真的可以一人全干了… 本次实验使用的AI工具有两个&#xff1a;1. GitHub Copilot&#xff08;…
阅读更多...
前端文本省略号后面添加复制文字

前端文本省略号后面添加复制文字

前端文本省略号后面添加复制文字 1、效果图 2、代码展示 <div class"link-content-wrap" click"copyLinkText"><div class"link-content">{{ shareResult.url || }} </div><span class"show-ellipsis" click&…
阅读更多...
（五）Tiki-taka算法（TTA）求解无人机三维路径规划研究（MATLAB）

（五）Tiki-taka算法（TTA）求解无人机三维路径规划研究（MATLAB）

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、Tiki-taka算法&#xff08;TTA&#xf…
阅读更多...
深入浅出强化学习

深入浅出强化学习

目录 一、强化学习的概念 二、强化学习的特点 三、强化学习的训练过程 一、强化学习的概念 强化学习是一种机器学习方法&#xff0c;旨在教会算法如何通过与环境的交互来进行学习和决策。与传统的监督学习和无监督学习不同&#xff0c;强化学习侧重于学习与奖励和惩罚&#…
阅读更多...
详解原生Spring框架下的方法切入点表达式

详解原生Spring框架下的方法切入点表达式

&#x1f609;&#x1f609; 学习交流群&#xff1a; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 &#x1f96d;&#x1f96d;3&#xff1a;QQ群&#xff1a;583783…
阅读更多...
春秋云镜 CVE-2022-30887

春秋云镜 CVE-2022-30887

春秋云镜 CVE-2022-30887 多语言药房管理系统 (MPMS) 靶场介绍 多语言药房管理系统 (MPMS) 是用 PHP 和 MySQL 开发的, 该软件的主要目的是在药房和客户之间提供一套接口&#xff0c;客户是该软件的主要用户。该软件有助于为药房业务创建一个综合数据库&#xff0c;并根据到期…
阅读更多...
Linux中top命令输出日志分析？

Linux中top命令输出日志分析？

以下是对输出的各部分的解释&#xff1a; 09:54:34&#xff1a;系统当前时间。up 161 days, 2:08&#xff1a;系统已经运行了161天2小时8分钟。5 users&#xff1a;有5个用户登录系统。load average: 0.13, 0.08, 0.05&#xff1a;系统的1分钟、5分钟、15分钟的平均负载。负载…
阅读更多...
钢铁ERP系统有哪些?钢铁ERP软件哪家好用

钢铁ERP系统有哪些?钢铁ERP软件哪家好用

不同的钢铁材料有差异化的产成品&#xff0c;而这些成品又有多元化的营销策略和制造工艺&#xff0c;每道生产工艺存在差异化的管理方式与策略&#xff0c;而不同的销售策略对应多样化的价格机制等&#xff0c;繁多的业务数据采集和分析工作量较大。 近些年制造工艺的变革也促…
阅读更多...
精通Git（第2版）读书笔记

精通Git（第2版）读书笔记

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言第 1章 入门 11.1 关于版本控制 11.1.1 本地版本控制系统 1 第 2章 Git基础 132.1 获取Git仓库 132.1.1 在现有中初始化Git仓库 132.1.2 克隆现有仓库 14 2.2 在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023