本文主要介绍 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].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 会对新旧配置项进行自动整合。
<!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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
