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即可,如下图所示。

 

posted @   _houjie  阅读(192)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
历史上的今天:
2021-07-30 leaflet iframe传参给vue页面
点击右上角即可分享
微信分享提示