ECharts数据可视化 课件 第6章 ECharts的高级使用（上）.pptx

第6章ECharts的高级使用（上）《ECharts数据可视化》

学习目标/Target掌握颜色主题的使用方法，能够设置全局颜色主题掌握调色盘的使用方法，能够设置图形、系列的颜色掌握自定义颜色主题的使用方法，能够根据需求快速生成配置文件并使用所定义的颜色主题掌握坐标轴索引的使用方法，能够设置x、y轴的索引掌握x、y轴偏移的设置方法，能够设置x、y轴相对于默认位置的偏移

学习目标/Target掌握富文本标签的使用方法，能够设置文本标签样式掌握多图表联动的设置方法，能够实现多图表联动掌握ECharts颜色主题的设置，能够更改颜色主题、自定义颜色主题掌握图表混搭和多图表联动的设置，能够实现折线图和柱状图的混搭、柱状图和饼图的混搭、柱状图和饼图的联动

章节概述/Summary学习完各种图表后，读者已经具备绘制简单图表的能力了，但是简单的图表无法满足实际开发中的复杂需求。为了更加灵活地使用图表，读者需要深入学习ECharts的高级使用，包括ECharts颜色主题、图表混搭和多图表联动等。本书将通过第6章和第7章讲解ECharts的高级使用，本章讲解上半部分的内容。

目录/Contents6.16.2ECharts颜色主题图表混搭和多图表联动

ECharts颜色主题6.1

更改图表颜色主题【任务6.1.1】

任务需求为了更好地了解全年的用电情况，并为未来规划和管理电力资源提供方便，某县城对2023年的用电情况进行了统计。通过了解用电量情况，确定电力需求和供给之间的差距，并采取有针对性的措施，以确保全县电力供给的安全、稳定和高效。为了更直观地展示全县2023年的用电情况，该县计划绘制一张圆环图。同时，由于ECharts默认的主题不够美观，他们希望更换一个更美观的主题。本任务需要基于某县城2023年的用电情况绘制vintage主题的圆环图。

该县城2023年用电情况（单位：万千瓦时）如下表所示。用电情况城镇居民用电乡村居民用电工业用电用电务需求

知识储备1.颜色主题先定一个小目标！掌握颜色主题的使用方法，能够设置全局颜色主题

知识储备1.颜色主题ECharts提供了颜色主题功能。通过颜色主题功能可以使特定主题下的一系列可视化图表遵循相同的配色方案，帮助开发者实现图表样式的全局统一。例如，当设置dark主题时，整个图表都会采用深色的配色方案。

知识储备1.颜色主题使用浏览器访问ECharts官方网站，在一级导航栏中单击“下载”，找到下拉列表中的“主题下载”，如下图所示。查阅ECharts中的颜色主题步骤1步骤2

知识储备1.颜色主题单击“主题下载”，跳转到“主题下载”页面，如下图所示。步骤1步骤2查阅ECharts中的颜色主题

知识储备1.颜色主题演示如何使用主题下载主题文件。单击“macarons”主题名称上方对应的主题图片，下载一个名称为macarons.js的文件，将macarons.js文件保存在D:\ECharts\chapter06目录下。引用主题文件。创建D:\ECharts\chapter06\theme.html文件，在文件中创建基础HTML5文档结构。步骤1步骤2在head标签中引入echarts.js、macarons.js文件。指定主题名称。步骤3步骤4

任务实现保存代码后，在浏览器中打开theme.html文件，macarons主题的图表的页面效果如下图所示。

知识储备1.颜色主题演示主题的切换将主题切换成dark主题，示例代码如下。varmyChart=echarts.init(document.getElementById(main),dark);将主题设置为dark主题

任务实现保存代码后，在浏览器中打开theme.html文件，dark主题的图表的页面效果如下图所示。

知识储备2.调色盘先定一个小目标！掌握调色盘的使用方法，能够设置图形、系列的颜色

知识储备在ECharts中，通过option对象中的color属性可以设置调色盘的颜色列表。当通过color属性给定了一组颜色后，图形、系列可以自动从其中选择颜色。调色盘包括全局调色盘和局部调色盘，全局调色盘可以被所有系列使用，而局部调色盘是某个系列专属的调色盘。2.调色盘

知识储备color属性的值为color数组，该数组的设置方式如下。varoption={//全局调色盘color:[],series:[{//局部调色盘color:[]}]};2.调色盘

知识储备color属性的默认值为[#5470c6,#91c