Echarts使用笔记

echarts没有数据时显示暂无数据

if(resp.data && resp.data.length > 0){
    ... 初始图表
}else{
    this.$nextTick(()=>{
        this.$refs.electricityTrendAndPredictBar.innerHTML = "暂无数据";
        this.$refs.electricityTrendAndPredictBar.style.textAlign = "center";
        this.$refs.electricityTrendAndPredictBar.style.lineHeight = "350px";
        this.$refs.electricityTrendAndPredictBar.removeAttribute('_echarts_instance_');
    })
}

参考博客：https://www.jianshu.com/p/ea7909f7b65c

echarts标题(legend)过多时分页显示

//图例--折线提示提示
legend: {
    x: 'center',
    y: '20',
    type: 'scroll', //分页类型
    orient: "horizontal", // horizontal 横向排列 vertical 纵向排列
    borderColor: '#6699FF', //边框颜色
    textStyle: {
        color: '#1e90ff' // 图例文字颜色
    },
    data: []
},

echarts自定义tooltip显示

tooltip: {
  trigger: "axis",
  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  },
  formatter : function(params){
    let tip = params[0].name ;
    for(let i = 0;i < params.length; i++) {
      if(i === params.length - 1){
        tip += '<br>' + params[i].marker + " " + params[i].seriesName+': ' + params[i].value + '%';
      }else{
        tip += '<br>' + params[i].marker + " " + params[i].seriesName+': ' + params[i].value;
      }
    }
    return tip;
  }
},

- End - - 个人学习笔记 - - 仅供参考 -