黄乐可
2021-05-07 17:47
采纳率: 100%
浏览 57
已采纳

vue项目中echarts5.0折线图使用渐变色会报错怎么办

 想要这个效果

代码如下:

transaction() {
      let transaction = document.getElementById('transaction')
      let myChart = echarts.init(transaction)// 基于准备好的dom,初始化echarts实例
      let option
      let xzhou = []
      let yzhou = []
      option = {
        textStyle: {
          color: 'rgb(85,169,254)'
        },
        tooltip: { //提示框
          trigger: 'axis',
          formatter: '时间:{b}</br>{a}:{c}'
        },
        legend: {
          left: '70%',
          top: '8%',
          // 左偏移70%,上偏移8%
          data: ['存证数量']
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 20
          },
          axisLine: {
            show: false
          },
          //不显示刻度尺
          axisTick: {
            show: false
          },
          data: xzhou


        },
        yAxis: {
          name: '单位/个',
          type: 'value',
          //不显示y轴数据
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },

        // 将容器向左偏移50
        grid: {
          left: 50
        },
        series: [{
          itemStyle: {
            borderRadius: 3, //图形圆角
            color: 'rgb(254,122,14)',
          },
          name: '存证数量',
          type: 'line',
          smooth: true,
          areaStyle: {
            //设置渐变色
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgb(254,122,14)' },
                { offset: 1, color: 'rgb(255,255,255)' }
              ]
            )
          },
          barWidth: '40%',
          data: ['yzhou']
        }]
      }
      myChart.setOption(option)
      window.onresize = function() {//用于使chart自适应高度和宽度
        myChart.resize()
      }

 使用渐变色会报下面错误

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 崽崽的谷雨 2021-05-07 18:00
    已采纳

    第73行直接写成data:yzhou。这个我用echarts在线编辑器就可以没报错

    let yzhou=[1,2,3,4];
    let xzhou=[5,6,7,8];
    option ={
            textStyle: {
              color: 'rgb(85,169,254)'
            },
            tooltip: { //提示框
              trigger: 'axis',
              formatter: '时间:{b}</br>{a}:{c}'
            },
            legend: {
              left: '70%',
              top: '8%',
              // 左偏移70%,上偏移8%
              data: ['存证数量']
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                interval: 0,
                rotate: 20
              },
              axisLine: {
                show: false
              },
              //不显示刻度尺
              axisTick: {
                show: false
              },
              data:yzhou
     
     
            },
            yAxis: {
              name: '单位/个',
              type: 'value',
              //不显示y轴数据
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
     
            // 将容器向左偏移50
            grid: {
              left: 50
            },
            series: [{
              itemStyle: {
                borderRadius: 3, //图形圆角
                color: 'rgb(254,122,14)',
              },
              name: '存证数量',
              type: 'line',
              smooth: true,
              areaStyle: {
                //设置渐变色
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: 'rgb(254,122,14)' },
                    { offset: 1, color: 'rgb(255,255,255)' }
                  ]
                )
              },
              barWidth: '40%',
              data: yzhou
            }]
          }
    
    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • 有问必答小助手 2021-05-07 18:56

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    评论
    解决 无用
    打赏 举报
  • 有问必答小助手 2021-05-08 14:27

    非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

    速戳参与调研>>>https://t.csdnimg.cn/Kf0y

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题