【Echarts】问题汇总

点击整个图表事件

 myChart.getZr().on("click", params => { 
 ...
});
1
2
3

点击title事件

 myChart.getZr().on("click", params => { 
	// console.log(params)
    // 设置限制条件，确保只有点击的节点为title时才生效
 	if(params.target.eventData.componentType === 'title'){
 	
 	}
});
1
2
3
4
5
6
7

点击柱子事件

myChart.getZr().on("click", params => {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (myChart.containPixel("grid", pointInPixel)) {
          let index = myChart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY
          ])[0];
          console.log(index);
        }
      });
1
2
3
4
5
6
7
8
9
10

echarts宽度100%变成了100px

元素一开始设置为了display：none；而且不是固定宽高

let dom=document.getElementById("fullScreen")
dom.style.width=window.innerWidth*0.9999+'px'
dom.style.height=window.innerHeight*0.91+'px'
this.fullChart = echarts.init(dom)
this.fullChart.setOption(option)
1
2
3
4
5

echarts双y轴右侧坐标轴轴线position设为right，仍然显示在左边

需要在坐标轴右侧加一条竖线

position: 'right',
axisLine: {
	onZero: false
	...
}
1
2
3
4
5

页面刷新或切换后echart地图不显示问题

问题： 页面刷新或切换后echart地图不显示，但是按钮切换会显示
原因： 应该是页面加载顺序问题，具体原因没找到
临时解决方案： setTimeout()1000ms后再执行加载数据和渲染地图

饼图重新加载数据后没有真正重新绘制

问题： 重新加载数据后，数据显示顺序与实际数据顺序不同
解决： 只修改 mychart.setOption(option,true)无效

let mychart = echarts.init(document.getElementById("mychart"));
 $("#mychart").removeAttr("_echarts_instance_");//可无
 mychart.clear();//必须有
 mychart.setOption(option, true);
1
2
3
4