vue echarts图表添加背景图
实现效果:
代码实现:
var color = new echarts.graphic.LinearGradient(
0, 0, 1, 0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2) 的位置
[
{offset: 0, color: 'green'}, // 0% 处的颜色
{offset: 0.5, color: 'blue'}, // 50% 处的颜色
{offset: 1, color: 'orange'} // 100% 处的颜色
]
);
option = {
grid:{
show:true,
backgroundColor:color,
},
title: {
text: ''
},
tooltip: {},
xAxis: {
data: ["周一","周二","周三","周四","周五","周六"]
},
yAxis: {},
series: [{
name: '任务',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
如果需要整个图表都添加颜色的情况,不需要grid属性,直接在option下backgroundColor:color即可,如下图所示。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
2021-07-30 leaflet iframe传参给vue页面