ECharts的高级使用(主题调色板颜色渐变)
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts的高级使用(主题调色板颜色渐变)相关的知识，希望对你有一定的参考价值。
1. 主题
1.1 内置的主题
init方法有两个参数，第一个参数代表的是一个dom节点，第二个参数代表你需要使用哪一套主题
默认内置了两套主题，light、dark
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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'),'light')
//var mCharts = echarts.init(document.querySelector('div'),'dark')
var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
var yDataArr = [88, 45, 48, 89, 99, 77]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [{
name: '语文',
type: 'bar',
barWidth: '50%',
data: yDataArr
}]
}
mCharts.setOption(option)
</script>
</body>
</html>不设置主题
内置主题light
内置主题dark
1.2 自定义主题
①在主题编辑器中编辑主题，去官网
主题编辑器 - Apache ECharts
②下载主题，是一个js文件
③引入主题js文件
我这里命名为theme.js
④在init方法中使用主题
在init方法中之所以用'theme'来引入，要看theme.js中的registerTheme方法
<!DOCTYPE html>
<html lang="en">
<head>
... //其它代码不变
<script src="theme/theme.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
// 使用自定义主题
var mCharts = echarts.init(document.querySelector('div'),'theme')
... //其它代码不变
</script>
</body>
</html>
2. 调色板
调色板就是一组颜色，图形、系列会自动从其中选择颜色
2.1 主题调色板
在下载的theme.js主题中的registerTheme方法中设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
//引入自定义主题
<script src="theme/theme.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
//使用自定义主题中的调色盘
var mCharts = echarts.init(document.querySelector('div'),'theme')
var pieData = [
{
name: '淘宝',
value: 11231
},
{
name: '京东',
value: 22673
},
{
name: '唯品会',
value: 6123
},
{
name: '聚美优品',
value: 6700
}
]
var option = {
series: [
{
type: 'pie',
data: pieData,
selectedMode: 'multiple',
selectedOffset: 30,
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>不使用主题调色板
使用主题调色板
2.2 全局调色板
使用全局调色盘会覆盖主题调色盘
<!DOCTYPE html>
<html lang="en">
<head>
... //原代码不变
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
... //原代码不变
var option = {
// 使用全局调色盘
color: ['red','blue','skyblue','yellow'],
series: [
{
type: 'pie',
data: pieData,
selectedMode: 'multiple',
selectedOffset: 30,
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
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 线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
var yDataArr = [88, 45, 48, 89, 99, 77]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [{
type: 'bar',
data: yDataArr,
itemStyle:{
color: {
type: 'linear', //线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: 'red' //0%处的颜色为红色
},
{
offset: 1, color: 'blue' //100%处的颜色为蓝色
}
]
}
}
}]
}
mCharts.setOption(option)
</script>
</body>
</html>
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%处的颜色为蓝色
}
]
}
}
}]
}
以上是关于ECharts的高级使用(主题调色板颜色渐变)的主要内容，如果未能解决你的问题，请参考以下文章
将 `shap.summary_plot()` 的渐变颜色更改为特定的 2 或 3 RGB 渐变调色板颜色