echarts.js整理

添加loading框

   this.myChart.showLoading({
                    text: 'loading',
                    color: 'rgba(20, 149, 247, 0.7)',	//设置加载颜色
                    textColor: '#000',
                    maskColor: 'rgba(255, 255, 255, 0.2)',
                    zlevel: 0
                })
                this.myChart.hideLoading()

保证每次重复渲染

if(document.getElementById('hjczlEcharts4').getAttribute('_echarts_instance_')){
    document.getElementById('hjczlEcharts4').removeAttribute('_echarts_instance_');
}

不显示，宽度为0 解决办法：

setTimeout(function () {
    var dnysEcharts4 = echarts.init(document.getElementById('hjczlEcharts4'));
    dnysEcharts4.setOption(option, true);
},200);

调整echarts表格的位置

grid:{
      x:25,
      y:45,
      x2:5,
      y2:20,
      borderWidth:1
  },

echarts 随屏幕大小改变大小chart.resize()

解决echarts图表 y轴名称，太长隐藏显示的问题

当完成时我发现有些页面y轴文字特别长，并且由于我设置了containLabel: true，

给一个固定12的字数限制，超出部分以省略号代替，这样就不会造成图形范围忽大忽小了。

axisLabel: {
  color: "#000",
  interval: 0,
  formatter: function(value) {
    if (value.length > 12) {
      return value.substring(0, 12) + "...";
    } else {
      return value;
    }
  }
},

解决提示框超出屏幕

tooltip: {
    trigger: "item",
     confine:true,
     formatter: "{a} <br/>{b} : {c}人 ({d}%)"
 },

x轴名称太长，旋转或者竖着显示

旋转

axisLabel: {  
   interval:0,  
   rotate:40  
}  

interval：
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推
rotate：
标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度

竖着显示：

axisLabel: {  
    interval: 0,  
    formatter:function(value)  {  
        return value.split("").join("\n");  
    }  
}  

图表点击事件

竖图表

this.ecDom.setOption(option);
let myChart= this.ecDom
myChart.getZr().off('click');
myChart.getZr().on('click', params => {
  const { target, topTarget } = params
  const pointInPixel = [params.offsetX, params.offsetY]
  if (myChart.containPixel('grid', pointInPixel)) {
    let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]// 点击的下轴下标
  }
   const axs = target
	    ? target.seriesIndex
	     : topTarget&&topTarget.parent?.parent?.__ecComponentInfo?.index// 点击的数据的下标
	 if(axs!=undefined){
	     console.log(axs)
	 }
})

横图表

this.ecDom.setOption(option);
let myChart= this.ecDom
myChart.getZr().off('click');
myChart.getZr().on('click', params => {
  const pointInPixel = [params.offsetX, params.offsetY]
  if (myChart.containPixel('grid', pointInPixel)) {
    let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[1] 
   }
})

 function initDyhjEch1(id) {
        if (document.getElementById(id).getAttribute('_echarts_instance_')) {
            document.getElementById(id).removeAttribute('_echarts_instance_');
        }
        var myChart1 = echarts.init(document.getElementById(id));
        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                name:"年",
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#0d4fe1'
                    }, {
                        offset: 1,
                        color: 'rgba(13, 79, 225,0)'
                    }])
                },
            }]
        };
        myChart1.setOption(option);
        myChart1.resize()
    }