likes
comments
collection
share

HTML+echarts改变折线图的线条颜色和区域颜色

作者站长头像
站长
· 阅读数 31

HTML+echart的情况下,改变所用折线图的线条颜色。

在做的过程中,一下子想不起了怎样给echart的折线图线条修改颜色,然后去查阅资料发现可以通过下面添加相应代码,便可成功修改。

折线图的线条颜色在lineStyle里,在item是指每个数据点上的图标,默认是个小圆点,下面代码已经pose出来了,根据自己的需求来修改。

// 指定图表的配置项和数据
            option6 = {
              title: {
                  text: '月度维修费趋势图'
              },
              tooltip: {},
              legend: {
                  data:['设备原值']
              },
              xAxis: {
                type: 'category',
                data: ['2020-10', '2020-11', '2020-12', '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2022-03']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name:'设备原值',
                  data: [70, 73, 74, 78, 72, 77, 76,70, 73, 74, 78],
                  type: 'line',
                  areaStyle: {
                      normal: {
                                              color: '#daeafe' //改变区域颜色
                          }
                  },
                  itemStyle: {
                    normal: {
                        color: '#8ec8fe'
                    }
                  },  
                }
              ]