数据可视化-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;专为满足用户监控特定目录下文件和子目录变化的需求。无论是为了保障系统安…

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

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

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

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

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;或者是窗口需要…

第四百六十二回

文章目录 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…

linux shell脚本编写(2)

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

(一)Jetpack Compose 从入门到会写

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

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

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

基于Python的卷积网络的车牌识别系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

leetcode不同路径

. - 力扣&#xff08;LeetCode&#xff09; 62. 不同路径 中等 相关标签 相关企业 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下…

04_UART串口发送数据

1.配置芯片&#xff0c;如果PA9,PA10的UART引脚被占用&#xff0c;会自动进行重映射 2.代码 int main(void) {uint8_t temp[]"test";/* USER CODE BEGIN 1 *//* USER CODE END 1 *//* MCU Configuration--------------------------------------------------------*…

Unity Shader 流光 边缘光

前言 Unity2021.3.23 一、实现原理 Time控制UV的变化,再采样一张流光贴图.即可实现流光效果。 二、效果及源码展示 1.流光效果 效果描述: 1.边缘光(菲尼尔), 2.从上到下扫描光. 效果图如下: 代码如下: Shader "Unlit/ScanCode" {Properties{_MainTex ("T…

JavaEE企业开发新技术5

目录 2.18 综合应用-1 2.19 综合应用-2 2.20 综合应用-3 2.21 综合应用-4 2.22 综合应用-5 Synchronized &#xff1a; 2.18 综合应用-1 反射的高级应用 DAO开发中&#xff0c;实体类对应DAO的实现类中有很多方法的代码具有高度相似性&#xff0c;为了提供代码的复用性,降低…

MoneyPrinterTurbo-利用AI大模型,一键生成高清短视频

MoneyPrinterTurbo-利用AI大模型&#xff0c;一键生成高清短视频 在今天的信息爆炸的时代&#xff0c;短视频已经成为最受欢迎的信息传递方式之一。无论是分享生活瞬间&#xff0c;还是传递重要信息&#xff0c;短视频都是最直观&#xff0c;最具影响力的手段。但是&#xff0…

微软 SDL 安全研发生命周期详解

微软SDL&#xff08;Security Development Lifecycle&#xff09;是一种安全软件开发的方法论&#xff0c;它强调在整个产品开发过程中融入安全考虑因素。SDL 是一个动态的过程&#xff0c;包括多个阶段和活动&#xff0c;以确保产品的安全开发、测试、部署和运行。Microsoft 要…

11.哀家要长脑子了!

目录 1.453. 最小操作次数使数组元素相等 - 力扣&#xff08;LeetCode&#xff09; 2.665. 非递减数列 - 力扣&#xff08;LeetCode&#xff09; 3. 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 4. 3114. 替换字符可以得到的最晚时间 - 力扣&#xff08;LeetCode…