数据可视化-ECharts Html项目实战(12)

 在之前的文章中,我们深入学习ECharts特殊图表中的矩形树图以及Echarts中高级功能的多图表联动。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢谢。

数据可视化-ECharts Html项目实战(11)-CSDN博客文章浏览阅读2.3k次,点赞60次,收藏42次。今天的文章,会带着大家深入学习ECharts特殊图表中的矩形树图以及Echarts中高级功能的多图表联动。希望我的文章能帮助到正在学习的你,也欢迎各位来本篇文章下一起交流学习,共同进步。https://blog.csdn.net/qq_49513817/article/details/137600956今天的文章,会带着学习ECharts特殊图表设置中的ECharts动态主题切换和自定义ECharts主题。希望你能在本篇文章中有所收获。 

目录

一、知识回顾

二、主题下载

官方主题 

自定义主题

三、代码实现

一、知识回顾

在之前的文章中我们学习了矩形树图和多图表联动。

矩形树图的配置项我们有几点需要注意的:

而它的效果是这样的

它的特点是拥有树形的结构是矩形的样式。是一种特殊的树状图,用于表示树形数据结构,如层次结构或分类信息。它以矩形的形式展现,每个矩形代表树中的一个节点,矩形的面积、颜色等属性可以表示节点的权重或其他重要信息。

多图表联动需要创建多个图表,我今天的例子是如何创建两个图表的联动

在使用下面的配置项连接优化两个图表

复习完了,现在,开始今天的学习吧。

二、主题下载

首先,我们要知道ECharts主题是指ECharts提供的一种数据可视化样式和风格的定制方式。ECharts是一款非常强大的数据可视化工具,它支持自定义主题,使得用户可以根据自己的需求来定制图表的样式和风格。

ECharts提供了多种主题,可以满足不同的数据可视化需求。我们可以在ECharts的官网的编辑文件中进行主题配置,配置完成后重命名并下载,然后在需要的页面进行引入,就可以正常使用了。

在ECharts中设置主题通常涉及到初始化echarts实例对象,并将配置项设置给该实例对象,其中包括指定主题。

官方主题 

我们先将ECharts提供的6个主题下载下来。官方下载地址:

主题下载 - Apache ECharts

直接点击图片,全部下载。

全部放到我们的js文件夹中,这样就完成了

自定义主题

现在我们来看看我们的自定义主题。

ECharts官网提供了非常丰富的自定义主题

从基本配置、映射、坐标轴到各个图表的配置,都可以根据自己的喜好自定义设置。

设置完成下载,同样放入我们的js文件夹即可 

三、代码实现

首先我们要插入我们的主题

<head><meta charset="utf-8"><script type="text/javascript" src='js/echarts.js'></script><script src="js/dark.js"></script><script src="js/infographic.js"></script><script src="js/macarons.js"></script><script src="js/roma.js"></script><script src="js/shine.js"></script><script src="js/vintage.js"></script><script src="js/jquery-3.3.1.js"></script>
</head>

注意:jquery.js文化是不可少的,我会以附件的形式上传到文章中

然后设置一个一个可下拉的列表,绑定我们的主题,以便于切换

    <div><select id="selection" name="theme"><option value="dark">dark</option><option value="infographic">infographic</option><option value="macarons">macarons</option><option value="roma">roma</option><option value="shine">shine</option><option value="vintage">vintage</option></select></div>

最后,我们需要调用我们的主题,创建新的实例

		myChart.setOption(option);  $('#selection').change(function() {  var themeName = $(this).val();  if (themeName === 'default') {  myChart.setOption(option);  } else {  myChart.dispose();  myChart = echarts.init(document.getElementById('main'), themeName);    myChart.setOption(option);  myChart.resize();  }}); 

完整代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script type="text/javascript" src='js/echarts.js'></script><script src="js/dark.js"></script><script src="js/infographic.js"></script><script src="js/macarons.js"></script><script src="js/roma.js"></script><script src="js/shine.js"></script><script src="js/vintage.js"></script><script src="js/jquery-3.3.1.js"></script>
</head><body><div><label>主题切换:</label></div><div><select id="selection" name="theme"><option value="dark">dark</option><option value="infographic">infographic</option><option value="macarons">macarons</option><option value="roma">roma</option><option value="shine">shine</option><option value="vintage">vintage</option></select></div><div id="main" style="width: 800px; height: 600px"></div><script type="text/javascript">// 基于准备好的dom,初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));var option = { // 指定图表的配置项和数据tooltip: {trigger: 'axis'},legend: {data: ['降水量', '蒸发量', '温度'],left: 'center',top: 12},xAxis: [{type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月']}],yAxis: [{ // 设置2个Y轴之1:降水量、蒸发量type: 'value',name: '水量',min: 0,max: 200,interval: 50,axisLabel: {formatter: '{value}  ml'}},{ // 设置2个Y轴之2:温度type: 'value',name: '温度',min: 0,max: 30,position: 'right', // 设置y轴安置的位置offset: 0, // 设置向右偏移的距离axisLabel: {formatter: '{value} °C'}}],series: [{name: '降水量',type: 'bar',data: [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3]},{name: '蒸发量',type: 'bar',data: [2, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3]},{name: '温度',type: 'line',yAxisIndex: 1, //指定使用第2个y轴data: [2, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23, 16.5, 12, 6.2]}]};myChart.setOption(option);  $('#selection').change(function() {  var themeName = $(this).val();  if (themeName === 'default') {  myChart.setOption(option);  } else {  myChart.dispose();  myChart = echarts.init(document.getElementById('main'), themeName);    myChart.setOption(option);  myChart.resize();  }}); </script>
</body>
</html>

在其中:

  • $('#selection').change(function() {:为上面的selection(一个可下拉的列表)绑定一个事件监听器,在改变它时,会更改相应的值
  • var themeName = $(this).val(): .val获取this也就是selection的值,赋给themeName
  •  if (themeName === 'default') {:  检查 themeName 是否等于字符串 'default'
  • myChart.setOption(option):  如果为default就正常使用原始的option对象
  • myChart.dispose();  销毁现有实例
  • myChart = echarts.init(document.getElementById('main'), themeName): //使用指定的 themeName 初始化一个新的 ECharts 实例,并将其赋值给 myChart 变量。document.getElementById('main') 获取页面上 ID 为 main 的元素  
  •  myChart.setOption(option):  为新创建的 myChart 实例设置配置选项
  • myChart.resize():调整实例大小,自适应容器 

设置完成后,就可以通过我们的下拉列表选择主题了

至此,我们的动态主题切换和自定义ECharts主题就学习完毕。

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

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

相关文章

Directory Monitor:全方位监控文件系统变动的专业利器

目录 一、软件介绍 二、软件功能 三、软件特点 四、安装说明 五、使用说明 一、软件介绍 Directory Monitor是一款强大易用的实时文件系统监视工具&#xff0c;它由Michael Humpa开发&#xff0c;专为满足用户监控特定目录下文件和子目录变化的需求。无论是为了保障系统安…

C++中调用QML函数

在.qml中写一个函数 import QtQuick import QtQuick.Controls import MyObj 1.0Window {id: windowobjectName: "window"width: 480height: 480visible: truetitle: qsTr("Hello World")//目标函数function qmlFunc(i, s) {return "success"}Bu…

python与设计模式之工厂模式的那些事儿

一、工厂模式 工厂模式实现了按需创建的最佳模式&#xff0c;其目的是为了隐藏创建类的细节与过程&#xff0c;通过一个统一的接口来创建所需的对象。 话说没了皇位争夺权的皇三接到了一个外征的工作&#xff0c;始皇给了5个亿的经费让皇三组建一个军队。打权总是要进行武器采…

探索Python编程:5个实用技能示例及代码解析

Python作为一种流行且多功能的编程语言&#xff0c;被广泛应用于各种领域。本文将介绍Python编程中的五个实用技能 1. Web 开发 在Web开发中&#xff0c;我们可以使用Flask框架来快速构建Web应用程序。下面的代码示例展示了一个简单的Flask应用&#xff0c;当用户访问根路径时…

【Java开发指南 | 第二篇】标识符、Java关键字及注释

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 标识符Java关键字Java注释 标识符 Java 所有的组成部分都需要名字。类名、变量名以及方法名都被称为标识符。 所有的标识符都应该以字母&#xff08;A-Z 或者 a-z&#xff09;,美元符&#xff08;$&#xff0…

pyqt5使用matplotlib绘图

说明 在pyqt5中使用matplotlib步骤&#xff1a; 1、引入plt 2、引入FigureCanvas 3、生成figure 4、取得FigureCanvas 5、将FigureCanvas加入容器中 6、调用plt函数来绘图 代码 import sys # 1、引入plt import matplotlib.pyplot as plt import numpy as np # 2、引入Figur…

为什么阿里巴巴不让使用JDK自带的线程池?

阿里巴巴在《阿里巴巴Java开发手册》中建议开发者不要直接使用 java.util.concurrent.Executors 类中的静态工厂方法来创建线程池&#xff0c;而是推荐直接使用 ThreadPoolExecutor 类来实例化线程池&#xff0c;主要原因如下&#xff1a; 资源耗尽的风险&#xff1a; JDK内置的…

CentOS 7安装、卸载MySQL数据库

说明&#xff1a;本文介绍如何在CentOS 7操作系统下使用yum方式安装MySQL数据库&#xff0c;及卸载&#xff1b; 安装 Step1&#xff1a;卸载mariadb 敲下面的命令&#xff0c;查看系统mariadb软件包 rpm -qa|grep mariadb跳出mariadb软件包信息后&#xff0c;敲下面的命令…

【Qt】:事件的处理

系统相关 一.鼠标事件二.键盘事件三.定时器 事件是应用程序内部或者外部产生的事情或者动作的统称。在Qt中使用一个对象来表示一个事件。所有的Qt事件均继承于抽象类QEvent。事件是由系统或者Qt平台本身在个同的的刻友出的。当用广投下鼠标、敲下键盘&#xff0c;或者是窗口需要…

【C++】每日一题 48 旋转图像

给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 #include <vector> using namespace std;class Solution { public:void …

第四百六十二回

文章目录 1. 概念介绍2. 实现方法3. 示例代码4. 内容总结 我们在上一章回中介绍了"关于MediaQuery的优化"相关的内容&#xff0c;本章回中将介绍readMore这个三方包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的readMore是一个…

【团体程序设计天梯赛 往年关键真题 25分题合集 详细分析完整AC代码】(L2-001 - L2-024)搞懂了赛场上拿下就稳了

L2-001 紧急救援 最短路路径打印 样例 输入1 4 5 0 3 20 30 40 10 0 1 1 1 3 2 0 3 3 0 2 2 2 3 2输出1 2 60 0 1 3分析 用一遍dijkstra算法。设立 n u m [ i ] num[i] num[i]和 w [ i ] w[i] w[i]表示从出发点到i结点拥有的路的条数&#xff0c;以及能够找到的救援队的数目…

Websocket (帧格式, 握手过程, Spring 中使用 WebScoket 协议)

什么是 WebSocket 客户端 A 和客户端 B 的消息传播需要借助服务器的中转 (原因是内网不能给另一个局域网的内网直接联通, 需要借助服务器的外网做 “中介”) (NAT 地址转换) Http 协议 不支持实时通讯 (或者说不支持服务器主动推送数据给客户端) TCP 本身是具有服务器推送数据这…

【verilog】 reg与寄存器的关系

一、前言 在Verilog中经常用reg定义具有数据寄存功能的单元&#xff0c;但在verilog的使用中&#xff0c;并不代表其一定就是寄存单元&#xff0c;reg还能进行组合逻辑描述&#xff0c;并且在一些场景下&#xff0c;只能使用reg来申明变量。 二、reg型变量生成组合逻辑 在Ve…

Java 中文官方教程 2022 版(四十四)

原文&#xff1a;docs.oracle.com/javase/tutorial/reallybigindex.html 调用方法 原文&#xff1a;docs.oracle.com/javase/tutorial/reflect/member/methodInvocation.html 反射提供了一种在类上调用方法的方式。通常&#xff0c;只有在非反射代码中无法将类的实例强制转换为…

linux shell脚本编写(2)

Shell: 命令转换器&#xff0c;高级语言转换成二进制语言。是Linux的一个外壳&#xff0c;它包在Lniux内核的外面&#xff0c;用户和内核之间的交互提供了一个接口。 内置命令&#xff1a;在shell内部不需要shell编辑 外置命令&#xff1a;高级语言要用shell转换成二进制语言 …

分析Quartz(v2.3.2)QuartzSchedulerThread.run核心方法

文章目录 前言一、QuartzSchedulerThread.run 前言 最近项目中的定时任务&#xff0c;用Quartz框架取代了。最近也在学习Quartz框架这方面的知识&#xff0c;但是看代码过程有很多难以理解的地方。项目中使用数据库来存储的任务&#xff0c;本篇文章就从QuartzSchedulerThread…

(一)Jetpack Compose 从入门到会写

基本概念 Compose 名称由来 众所周知&#xff0c;继承在功能拓展上表现的很脆弱&#xff0c;容易类、函数爆炸&#xff0c;通过代理和包装进行组合会更健壮。 Compose 意为组合&#xff0c;使用上也是把 Compose 函数以 模拟函数调用层级关系的方式 组合到一起&#xff0c;最终…

PCL中VTK场景添加坐标系轴显示

引言 世上本没有坐标系&#xff0c;用的人多了&#xff0c;便定义了坐标系统用来定位。地理坐标系统用于定位地球上的位置&#xff0c;PCL点云库可视化窗口中的坐标系统用于定位其三维世界中的位置。本人刚开始接触学习PCL点云库&#xff0c;计算机图形学基础为零&#xff0c;…

一篇文章搞懂-线程与携程

推荐先阅读基础篇 http://t.csdnimg.cn/Fjq5O 1.定义 线程&#xff08;Thread&#xff09;是操作系统的资源,资源调度和执行的最小单位&#xff0c;创建、切换等操作消耗资源 协程&#xff08;Coroutine&#xff09;&#xff1a;无需操作系统&#xff0c;为编程语言自带。称为用…