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

2023-08-24 22:29| 来源: 网络整理| 查看: 265

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 时不绘制该图形。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章

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

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