echarts折线颜色渐变

最新推荐文章于 2024-08-17 10:34:34 发布

原创最新推荐文章于 2024-08-17 10:34:34 发布 · 4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts折线颜色渐变

vue 专栏收录该内容

114 篇文章

订阅专栏

 drawLine(){
            // 基于准备好的dom，初始化echarts实例
            // let myChart = this.$echarts.init(document.getElementById('myChart'))
            console.log(document.getElementById('myChart'))
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            window.onresize = function(){
              myChart.resize();
            }
            myChart.setOption({
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value',
                name: '水量'
              },
              tooltip : {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {
                          color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                              {offset: 0, color: '#FE7D2F'},
                              {offset: 1, color: '#F9D423'}
                            ]
                          )
                        },    //背景渐变
                lineStyle: {        // 系列级个性化折线样式
                  width: 3,
                  type: 'solid',
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#FE7D2F'
                  }, {
                    offset: 1,
                    color: '#F9D423'
                  }]),//线条渐变色
                }
              }]
            });
          },