echarts 设置渐变背景和背景图片

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：285

&gt; echarts配置项区分大小写，设置背景项为`backgroundColor`而不能写成小写的`backgroundcolor`

- 背景图片

```
    let img = new Image();
    img.src = 'http://shaimobao-10002753.image.myqcloud.com/shaimobao-10002753/0/c0f6a7e6-6417-4327-a806-b94a182fcd66/original?ss=0&amp;w=333&amp;h=186&amp;srotate=1';
    img.width = 500;
    img.height = 500;

this.options = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        backgroundColor: {
            image: img, // 背景图片
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
```

- 纯色

```
    this.options = {
        backgroundColor: '#456',
    };
```

- 线性渐变

```
    this.options = {
        backgroundColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
            }, {
                offset: 1, color: 'blue' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
    };
```

- 径向渐变，放射状

```
    this.options = {
        backgroundColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
            }, {
                offset: 1, color: 'blue' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
    };
```

### 参考

- [echarts](https://www.echartsjs.com/zh/option.html#backgroundColor)

标签： echarts backgroundColor 背景

上一篇：如何使用mvn命令导入依赖下一篇：ionic5 使用echarts自定义百度地图样式

echarts 设置渐变背景和背景图片

随便看看

留言