Echarts 柱状图渐变色
柱状图两种渐变色排列
【Echarts 柱状图渐变色】
文章图片
核心代码
{
itemStyle: {
normal: {
color: function (params) {
let colorArray = [
{
top: 'rgba(34, 169, 255, 1)', // 蓝色
bottom: 'rgba(11, 31, 52, 1)'
}, {
top: 'rgba(216, 184, 89, 1)', // 黄色
bottom: 'rgba(6, 22, 42, 1)'
}
]
let num = colorArray.length
return {
type: 'linear',
colorStops: [{
offset: 0,
color: colorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: colorArray[params.dataIndex % num].top
}]
}
}
}
}
}柱状图两种单色排列
核心代码
{
itemStyle: {
normal: {
color: function (params) {
let colorArray = [
'#22A9FF', '#D8B859'
]
if (params.dataIndex % 2 === 0) {
return colorArray[0]
} else {
return colorArray[1]
}
}
}
}
}推荐阅读
- 开始你的第一个Echarts图表（分享自知乎网）
- echarts插件-从后台请求的数据在页面显示空白的问题
- Pyecharts|Pyecharts 猎聘招聘数据可视化
- 可视化图形制作之关系图
- pyecharts可视化大屏
- Echarts 学习
- 我是如何控制1000|我是如何控制1000 个 Echarts 实例同时渲染 最大并发的
- 数据转pdf（包含echarts图表）
- Vue传数据到ECharts时，数据响应式更新了，但地图没渲染（？？）
- echarts实现多层不等距x轴，支持框选缩放功能