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

约定不等于承诺〃 2022-10-29 15:23 565阅读 0赞

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: { }
        }]
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]

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

一个线性渐变的面积图

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
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]  
此外还支持径向渐变，纹理填充，可以将一个img标签当做填充物。

这是areaStyle字段中color的取值，三种  
此外还有以下几种配置参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]

`origin` 默认情况下，图形会从坐标轴轴线到数据间进行填充。如果需要填充的区域是坐标轴最大值到数据间，或者坐标轴最小值到数据间，则可以通过这个配置项进行设置。  
origin 为 end时 是填充折线外的区域  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 3]  
opacity 设置透明度 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221024/de8a757cf83f4fe496920618b4b69901.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]: /images/20221024/f2a24c4baa7e4fcf9e81eeea8167d669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]: /images/20221024/aba4ea710e5e4626aa715ea96ea6c7bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 3]: /images/20221024/8eacd4f540264ba09fc6e1edca586825.png