本文主要介绍 ECharts 主题相关配置，和动画加载效果如何使用。

显示相关

1. 主题

> 内置主题

ECharts 中默认内置了两套主题：light 、dark 。可以在初始化对象方法 init 中指明：

var mCharts = echarts.init(document.querySelector("div"), 'light')

var mCharts = echarts.init(document.querySelector("div"), 'dark')

> 自定义主题

在主题编辑器中编辑主题
下载主题 js 文件
在 HTML 中引入该 js 文件
在 echarts.init 中使用自定义主题

主题编辑器网址 >> https://echarts.apache.org/zh/theme-builder.html

例如我编辑并下载了一款名为 vintage 的主题，可以这样引入和配置：

  <script src="theme/vintage.js"></script>var mCharts = echarts.init(document.querySelector("div"), 'vintage')

2. 调色盘

调色盘就是一组颜色，图形、系列会自动从其中选择颜色。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

> 主题调色盘

下载的主题中自动配置的 color 节点，即为主题的调色盘。

> 全局调色盘

全局调色盘需要配置手动在 option 配置项中，它会自动覆盖主题中调色盘。

var option = {color: ["tomato","orange","green","skyblue"],
}

> 局部调色盘

要使调色盘只对部分图形起作用，可以单独配置在 series 选项中：

var option = {series: [{type: 'pie',data: pieData,color: ["tomato","orange","green","skyblue"],}]
}

需要注意调色盘遵循就近原则：局部 > 全局 > 主题

> 颜色渐变

线性渐变

series: [{type: 'bar',data: yDataArr,itemStyle: {color: {type: 'linear',                     // 线性渐变x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'orange'         // 0% 处的颜色 },{offset: 1, color: 'tomato'      // 100% 处的颜色 }]}}}
]

径向渐变

series: [
{type: 'bar',data: yDataArr,itemStyle: {color: {type: 'radial',                   // 径向渐变x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'skyblue'       // 0% 处的颜色},{offset: 1, color: 'tomato'      // 100% 处的颜色}]}}
}
]

3. 样式

> 直接样式

相关代码有：itemStyle、textStyle、lineStyle、areaStyle、label

> 高亮样式

在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label

主要介绍一下如何实现高亮效果，见下图淘宝板块高亮变化：

由 emphasis 来配置，代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/echarts.min.js"></script>
</head><body><div style="width: 600px;height:400px"></div><script>var mCharts = echarts.init(document.querySelector("div"))var option = {title: {text: '饼图的测试',textStyle: { // 控制标题的文字样式color: 'blue'}},series: [{type: 'pie',data: [{value: 11231,name: "淘宝",itemStyle: { // 控制淘宝这一区域的样式color: 'yellow'},label: {color: 'green'},emphasis: {itemStyle: { // 控制淘宝这一区域的样式color: 'pink'},label: {color: 'black'}}},{value: 22673,name: "京东"},{value: 6123,name: "唯品会",},{value: 8989,name: "1号店"},{value: 6700,name: "聚美优品"}]}]}mCharts.setOption(option)</script>
</body></html>

4. 自适应

当浏览器的大小发生变化的时候，图表也能随之适配变化。

mCharts.setOption(option)
// 监听 window 窗口大小变化的事件
window.onresize = function () {// 调用 echarts 实例对象的 resize 方法mCharts.resize()
}

上面代码也可以简写为：

mCharts.setOption(option)
// 监听 window 窗口大小变化的事件
window.onresize = mCharts.resize

动画的使用

1. 加载动画

由于数据通常从服务器获取，当网络存在延迟时，可以使用下面的加载效果优化体验。

ECharts 已经内置好了加载数据的动画，我们只需在合适时机显示或者隐藏即可。

> 显示加载动画 —— mCharts.showLoading()

> 隐藏加载动画 —— mCharts.hideLoading()

var mCharts = echarts.init(document.querySelector("div"))
mCharts.showLoading()                   // 在获取数据之前, 显示加载动画
$.get('data/test_data.json', function (ret) {mCharts.hideLoading()                // 当服务器数据获取成功之后, 隐藏加载动画var axisData = []for (var i = 0; i < ret.length; i++) {var height = ret[i].heightvar weight = ret[i].weightvar itemArr = [height, weight]axisData.push(itemArr)}console.log(axisData)var option = {xAxis: {type: 'value',scale: true},yAxis: {type: 'value',scale: true},series: [{type: 'effectScatter',data: axisData,symbolSize: function (arg) {// console.log(arg)var weight = arg[1]var height = arg[0] / 100// BMI > 28 肥胖// BMI: 体重/ 身高*身高     kg  mvar bmi = weight / (height * height)if (bmi > 28) {return 20}return 5},itemStyle: {color: function (arg) {console.log(arg)var weight = arg.data[1]var height = arg.data[0] / 100var bmi = weight / (height * height)if (bmi > 28) {return 'red'}return 'green'}},showEffectOn: 'emphasis',rippleEffect: {scale: 10}}]};mCharts.setOption(option)
})

2. 增量动画

所有数据的更新都通过 setOption 实现，我们不用考虑数据到底产生了那些变化，ECharts 会找到两组
数据之间的差异然后通过合适的动画去表现数据的变化。

具体来说，setOprion 可以进行多次设置，每次更改配置项 option 更新数据后进行 mCharts.setOption(option) 即可，ECharts 会对新旧配置项进行自动整合。

<!DOCTYPE html>
<html lang="en"><head>...
</head><body><div style="width: 600px;height:400px"></div><button id="modify">修改数据</button><button id="add">增加数据</button><script>var mCharts = echarts.init(document.querySelector("div"))var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {...}mCharts.setOption(option)var btnModify = document.querySelector('#modify')btnModify.onclick = function () {var newYDataArr = [68, 32, 99, 77, 94, 80, 72, 86]// setOption 可以设置多次var option = {series: [{data: newYDataArr}]}mCharts.setOption(option)}var btnAdd = document.querySelector('#add')btnAdd.onclick = function () {xDataArr.push('小明')yDataArr.push(90)var option = {xAxis: {data: xDataArr},series: [{data: yDataArr}]}mCharts.setOption(option)}</script>
</body></html>

「ECharts」主题这样配置才能更绚丽相关推荐

adguard拦截规则存在哪里_广告拦截软件Adguard怎样配置才能更全面的发挥作用
相信很多伙伴都对网上的各种各样的广告感到厌烦,Adguard是一款屏蔽拦截网页的软件, 可以支持市面上几乎所有的浏览器,今天小编就给大家介绍一下如何配置Adguard. 第一步:通过拦截规则开始隐私保 ...
「诗经」主题文化数字藏品中奖名单公布
6月3日,人民创意联合<国家人文历史>首发「诗经」端午主题<采葛><简兮><采蘩><二子乘舟>4幅数字藏品. 为了让更多用户通过数字化感受诗 ...
详解 Chrome 「V8 」引擎，让你更懂JavaScript !
今天来聊聊 V8,它的主要职责是用来执行 JavaScript 代码的.在正式全面了解 V8 之前,先来了解下「JavaScript 的基本特性和设计思想」. 1.JavaScript 的基本特性和设 ...
OTT广告价值「锋芒毕露」，谁能蚕食更大市场？
文 | 响铃说作者 | 曾响铃近日,第22届IAI传鉴国际广告奖公布了获奖名单.作为OTT行业领跑者的酷开科技,在本次评选中同时摘得「年度数字营销公司」和「案例奖」两项大奖. IAI传鉴国际广告奖 ...
「ECharts」交互 API （echarts、echartsInstance）
交互 API > 全局 echarts 对象全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的. > echartsInstance 对象 echartsI ...
鄂维南：从数学角度，理解机器学习的「黑魔法」，并应用于更广泛的科学问题...
作者 | Hertz 来源 | 科学智能AISI 北京时间2022年7月8日晚上22:30,鄂维南院士在2022年的国际数学家大会上作一小时大会报告(plenary talk).今天我们带来鄂老师演讲 ...
「ECharts」电商平台数据可视化实时监控系统之后台开发
此项目后台采用 Koa2 进行开发配置,相关配置整理如下. 1. Koa2 概述 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领 ...
hadoop fs命令无法使用_「大数据」「Hadoop」HDFS的配置与管理
HDFS(Hadoop Distributed File System)是Hadoop三个基础组件之一,为另外的组件以及大数据生态中的其他组件提供了最基本的存储功能,具有高容错.高可靠.可扩展.高吞吐 ...
tomcat配置https_「Java」 - Tomcat amp; 配置HTTPS
因为测试HTTPS情况下Controller处理是否正确,需要在测试环境配置支持HTTPS访问的Tomcat,这里进行简单记录. A.生成自签名证书 JDK安装目录下,使用jdk1.8.0_131bi ...

「ECharts」主题这样配置才能更绚丽