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;只需要在网页上输入和弦名&#…
阅读更多...
读书笔记：《More Effective C++》

读书笔记：《More Effective C++》

More Effective C Basics reference & pointer reference 必定有值&#xff0c;pointer 可以为空reference 声明时必须定义&#xff0c;必须初始化reference 无需测试有效性&#xff0c;pointer 必须测试是否为 nullreference 可以更改指向对象的值&#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…
阅读更多...
[足式机器人]Part4 南科大高等机器人控制课 Ch00 课程简介

[足式机器人]Part4 南科大高等机器人控制课 Ch00 课程简介

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;CLEAR_LAB 南科大高等机器人控制课 Ch00 课程简介 1. What is this course about?2. Tentative Schedule暂定时间表 1. What is this course about? Develop a solid foundation in robot modeling and control to co…
阅读更多...
深度学习：什么是知识蒸馏（Knowledge Distillation）

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

1 概况 1.1 定义 知识蒸馏&#xff08;Knowledge Distillation&#xff09;是一种深度学习技术&#xff0c;旨在将一个复杂模型&#xff08;通常称为“教师模型”&#xff09;的知识转移到一个更简单、更小的模型&#xff08;称为“学生模型”&#xff09;中。这一技术由Hint…
阅读更多...
亚马逊首席技术官2024年科技预测

亚马逊首席技术官2024年科技预测

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
二叉树遍历及应用

二叉树遍历及应用

文章目录 前言构建二叉树前序遍历中序遍历后序遍历二叉树的结点个数二叉树的叶节点个数二叉树的高度二叉树第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语句更…
阅读更多...
#Css篇:实现一个元素水平和垂直居中实现左右固定，中间自身适应布局 左侧固定 右侧自适应

#Css篇:实现一个元素水平和垂直居中实现左右固定，中间自身适应布局 左侧固定 右侧自适应

实现一个元素水平和垂直居中 元素示例&#xff1a; <div class"container"><div class"centered-element">居中的内容</div> </div>flex布局 .container {display: flex;justify-content: center;align-items: center;height: …
阅读更多...
Web自动化测试详解

Web自动化测试详解

做测试的同学们都了解&#xff0c;做Web自动化&#xff0c;我们主要用Selenium或者是QTP。 有的人可能就会说&#xff0c;我没这个Java基础&#xff0c;没有Selenium基础&#xff0c;能行吗&#xff1f;测试虽然属于计算机行业&#xff0c;但其实并不需要太深入的编程知识&…
阅读更多...
力扣129. 求根节点到叶节点数字之和

力扣129. 求根节点到叶节点数字之和

递归 思路&#xff1a; 递归子问题&#xff1a; sum 左子树值 右子树值子树值 上一级值 * 10 当前节点值 int sum prevSum * 10 root->val; calcSum(root->left, sum) calcSum(root->right, sum); 终止条件&#xff1a; 如果节点为 nullptr&#xff0c;则值为…
阅读更多...
C++学习之路（十六）C++ 用Qt5实现一个工具箱（为屏幕颜色提取功能增加一个点击复制的功能）- 示例代码拆分讲解

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

上篇文章&#xff0c;我们用 Qt5 实现了在小工具箱中添加了《颜色代码转换和屏幕颜色提取功能》功能。今天我们把屏幕颜色提取的功能再扩展一下&#xff0c;让它可以点击复制吧。下面我们就来看看如何来规划开发这样的小功能并且添加到我们的工具箱中吧。 老规矩&#xff0c;先…
阅读更多...
【无标题】RTI-DDS实现C/S通信

【无标题】RTI-DDS实现C/S通信

RTI-DDS&#xff08;Real-Time Innovations Data Distribution Service&#xff09;是一款实时消息传递中间件&#xff0c;用于实现分布式系统中的实时数据传输和通信。使用RTI-DDS&#xff0c;可以实现Client-Server&#xff08;CS&#xff09;通信模式&#xff0c;该协议在车…
阅读更多...
leetcode 12.2 每日一题 拼车（近双百解法，绝对通俗易懂）

leetcode 12.2 每日一题 拼车（近双百解法，绝对通俗易懂）

1094. 拼车 车上最初有 capacity 个空座位。车 只能 向一个方向行驶&#xff08;也就是说&#xff0c;不允许掉头或改变方向&#xff09; 给定整数 capacity 和一个数组 trips , trip[i] [numPassengersi, fromi, toi] 表示第 i 次旅行有 numPassengersi 乘客&#xff0c; 接…
阅读更多...
编译ubuntu kernel

编译ubuntu kernel

下载kernel源码 sudo apt-get install linux-source 下载完成后&#xff0c;kernel源码位于/usr/src/ 。 编译ubuntu kernel make oldconfig make menuconfig make make modules_install make install
阅读更多...
数字图像处理（实践篇）十三 数据增强之给图像添加噪声！

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

目录 一 涉及的函数 二 实践 一 涉及的函数 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;…
阅读更多...
最新文章

Copyright @ 2022~2023