ECharts|ECharts的高级使用(主题、调色板、颜色渐变)
目录
1. 主题
1.1 内置的主题
init方法有两个参数，第一个参数代表的是一个dom节点，第二个参数代表你需要使用哪一套主题
默认内置了两套主题，light、dark
Document - 锐客网
不设置主题
文章图片
内置主题light
文章图片
内置主题dark
文章图片
1.2 自定义主题
①在主题编辑器中编辑主题，去官网
主题编辑器 - Apache ECharts
②下载主题，是一个js文件
文章图片
③引入主题js文件
我这里命名为theme.js
④在init方法中使用主题
在init方法中之所以用'theme'来引入，要看theme.js中的registerTheme方法
文章图片
...//其它代码不变
【ECharts|ECharts的高级使用(主题、调色板、颜色渐变)】
文章图片
2. 调色板 调色板就是一组颜色，图形、系列会自动从其中选择颜色
2.1 主题调色板
在下载的theme.js主题中的registerTheme方法中设置
文章图片
Document - 锐客网 //引入自定义主题
不使用主题调色板
文章图片
使用主题调色板
文章图片
2.2 全局调色板
使用全局调色盘会覆盖主题调色盘
...//原代码不变
文章图片
2.3 局部调色板
使用局部调色盘会覆盖全局调色盘
var option = {
// 使用全局调色盘
color: ['red','blue','skyblue','yellow'],
series: [
{
type: 'pie',
// 使用局部调色盘
color: ['black','green','pink','orange'],
data: pieData,
selectedMode: 'multiple',
selectedOffset: 30,
}
]
}3. 颜色渐变 3.1 线性渐变
Document - 锐客网
文章图片
3.2 径向渐变
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [{
type: 'bar',
data: yDataArr,
itemStyle:{
color: {
type: 'radial',//径向渐变
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'red'//0%处的颜色为红色
},
{
offset: 1, color: 'blue'//100%处的颜色为蓝色
}
]
}
}
}]
}
文章图片
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量