知识拓展
在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器
echarts.graphic.LinearGradient
,但不知为啥官方文档并没有此API的介绍
语法
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#000'},
{offset: 1, color: '#ddd'}
] )
该方法传入了5个参数:
- 前4个参数用于配置渐变色的起止位置,分别是:右/下/左/上四
- 第5个参数则是一个数组,用于配置颜色的渐变过程.,每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了
示例
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#000'},
{offset: 0.5, color: '#888'},
{offset: 1, color: '#ddd'}
]
)
}
}
}
柱状图应用示例
// ... 省略无关代码
series: [
{
name:'同比',
type:'bar',
data: [-60,-70,75,-70],
itemStyle: {
normal:{
barBorderRadius: 4,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: 'rgba(224,130,247,1)'},
{offset: 1, color: 'rgba(119,108,254,1)'}
]
)
}
},
},
{
name:'环比',
type:'bar',
data: [60,-50,60,60],
itemStyle: {
normal:{
barBorderRadius: 4,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: 'rgba(47,172,255,1)'},
{offset: 1, color: 'rgba(27,79,226,1)'}
]
)
}
},
}
]
// ... 省略无关代码
折线图应用示例
// ... 省略无关代码
series: [
{
name:'交通事故',
type:'line',
data: [60,50,70,30,50,20,50],
smooth: true,
symbol: 'image:///static/admin/nodeMonitor/img/symbol-purple.png',
symbolSize: [28,37],
symbolOffset: [0,-18],
showSymbol: false,
label: {
show: true,
color: '#fff',
fontWeight: 'bold',
position: 'insideTop',
distance: 12
},
areaStyle: {
normal:{
barBorderRadius: 4,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(255,0,170,.45)'},
{offset: 1, color: 'rgba(255,0,170,0)'}
]
)
}
},
},
],
// ... 省略无关代码
仪表盘应用示例
// 定义渐变颜色
var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#45ba14'
},
{
offset: 0.23,
color: '#a2c30a'
},
{
offset: 0.5,
color: '#ffcc00'
},
{
offset: 1,
color: '#ff0000'
}
]);
var option = {
// ... 省略无关代码
series: [
{
axisLine: { //设置默认刻度盘上的刻度不显示,重新定义刻度盘
show: true,
lineStyle: {
width: 2,
color: [
[0, "#006bd6"],
[0.25, "#1e8dfc"],
[0.51, "#007fff"],
[0.63, "#198cff"],
[0.75, "#3198ff"],
[1, "#007fff"],
]
}
},
},
{
name: "彩环",
type: 'gauge',
radius: '65%', //大小
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 5, //粗细
color: [
[1, axislineColor]
],
}
},
}
]
};
// ... 省略无关代码