本文主要介绍 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 的主题，可以这样引入和配置：
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 来配置，代码如下
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].height
var weight = ret[i].weight
var 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 m
var 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] / 100
var 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 会对新旧配置项进行自动整合。
...