v-charts使用面积图改变多条线颜色加渐变

在使用v-charts时,官网给出的例子改变线的颜色之后不知道怎么配置渐变,ok直接代码

<template>

  <ve-line :data="chartData" :colors="colors" :settings="chartSettings"></ve-line>

</template>

<script>

  export default {

    data () {

      this.colors = [new echarts.graphic.LinearGradient(

          0,0,0,1,[{

          offset: 0, color: 'rgba(65,95,255,1)'

        },{

          offset: 1, color: 'rgba(65,95,255,0)'

        }]),

        new echarts.graphic.LinearGradient(

          0,0,0,1,[{

          offset: 0, color: 'rgba(234,79,63,1)'

        },{

          offset: 1, color: 'rgba(234,79,63, 0)'

        }]),

        new echarts.graphic.LinearGradient(

          0,0,0,1,[{

          offset: 0, color: 'rgba(49,209,136,1)'

        },{

          offset: 1, color: 'rgba(49,209,136,0)'

        }]),

        new echarts.graphic.LinearGradient(

          0,0,0,1,[{

          offset: 0, color: 'rgba(255,149,54,1)'

        },{

          offset: 1, color: 'rgba(255,149,54,0)'

        }]),

        new echarts.graphic.LinearGradient(

          0,0,0,1,[{

          offset: 0, color: 'rgba(176,214,221,1)'

        },{

          offset: 1, color: 'rgba(176,214,221,0)'

        }]),

        new echarts.graphic.LinearGradient(

          0,0,0,1,[{

          offset: 0, color: 'rgba(248,231,28,1)'

        },{

          offset: 1, color: 'rgba(248,231,28,0)'

        }]

      )],

      this.chartSettings = {

        stack: { '用户': ['访问用户', '下单用户'] },

        area: true, 

      }

      return {

        chartData: {

          columns: ['日期', '访问用户', '下单用户', '下单率'],

          rows: [

            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },

            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },

            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },

            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },

            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },

            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }

          ]

        }

      }

    }

  }

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容