开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >echarts教程（二）：修改echarts面积图修改样式

echarts教程（二）：修改echarts面积图修改样式

作者头像

拿我格子衫来

发布于 2022-01-24 11:34:50

1.9K0

发布于 2022-01-24 11:34:50

举报

文章被收录于专栏：TopFETopFE

https://echarts.apache.org/zh/option.html#series-line.areaStyle

echarts 的面积图其实是线形图添加areaStyle而形成的, 代码

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};

在这里插入图片描述

如果要改变面积图的样式，可以这样改

一个线性渐变的面积图

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

在这里插入图片描述

此外还支持径向渐变，纹理填充，可以将一个img标签当做填充物。

这是areaStyle字段中color的取值，三种此外还有以下几种配置参数

在这里插入图片描述

origin 默认情况下，图形会从坐标轴轴线到数据间进行填充。如果需要填充的区域是坐标轴最大值到数据间，或者坐标轴最小值到数据间，则可以通过这个配置项进行设置。 origin 为 end时是填充折线外的区域

在这里插入图片描述

opacity 设置透明度图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

LV.