echarts渐变色实现方法

最新推荐文章于 2024-12-02 08:00:00 发布

原创最新推荐文章于 2024-12-02 08:00:00 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

JS类同时被 3 个专栏收录

202 篇文章

订阅专栏

vue

157 篇文章

订阅专栏

前端框架、插件

21 篇文章

订阅专栏

本文介绍了一个使用ECharts创建的基本图表示例，展示了如何通过配置项设置图表标题、数据标签及折线图的数据系列，并实现渐变填充效果。该示例采用的折线图数据包括不同类型衣物的销量情况。

 option: {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data:['销量']
    },
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20],
      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
        }
      }
    }]
  }
}