Echarts 图报错 createLinearGradient

你的眼睛會笑

已于 2023-06-09 09:04:32 修改

阅读量487

点赞数 1

分类专栏： vue2 文章标签： echarts javascript

于 2023-06-08 15:53:53 首次发布

本文链接：https://blog.csdn.net/weixin_45563734/article/details/131109245

版权

vue2 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

折线图和柱状图切换报错

- - 解决方法

 Uncaught TypeError: Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite.

在这里插入图片描述

           yAxis: {
                 type: 'log',  //因为 type 为 log
                 minInterval: 1,
                 axisTick: {
                     show: false,
                 },                
             },

把yAxis下的type属性设为log就可以调整数据差距过大的问题，我们可以看到y轴的数值呈现对数递增
log轴要求坐标数据大于0，这是由对数函数性质决定的,所以对于数据中含有0图形会出现异常

解决方法

把数据为0的数据处理为undefined

在这里插入图片描述

代码

    getListCheats(){
      // 初始化数据请求
      if (!this.isEditState) {
        this.lineChartData.timer = this.chartData.name || []
        if(this.lineChartData.timer.length>0){
          this.nothing = false
        }else{
          this.nothing = true
        }
          this.lineChartData.allData.zero = this.setData(this.chartData.value||[]) //主要是这行
        } else {
            this.getMockFn()
        }
    },
    // 这个方法
    setData(data=[]){
      let array = []
      data.forEach(v=>{
        array.push(v&&v!=0?v:undefined)
      })
      return array
    },

处理tooltip的数据显示（以上图例已经ok，下面的根据需求）

       formatter:function(params){
            console.log(params)
            let html = params[0].name
            params.forEach((item,index)=>{
                html+=(`<br/>${item.name}: ${item.value==undefined ? 0 : item.value}`)
            })
            return html;
        },