Echarts图表使用过程中遇到的问题

Echarts

1.el-tab 切换echarts

• 监听el-tab的@tab-change= "handleChange"事件

• 在handleChange中对echarts实例自适应大小

  	 //	myChart = echarts.init(document.getElementById("pie-echart"));
  		nextTick(()=>{
  			myChart.resize()	
  		})

2.自定义tooltip

tooltip: {
	trigger: 'axis',
	formatter:function(params)	{
	var relVal = params[0].name;
	for (var i = 0, l = params.length; i < l; i++) {
	relVal += '<br/>' +params[i].marker+ params[i].seriesName +'&nbsp;&nbsp;&nbsp;' + params[i].value +"%" 
	}
 return relVal;
	}
},

堆叠自定义

tooltip: {
	trigger: 'axis',
	formatter:function(params)
	{
		params = params.reverse()
		var relVal = params[0].name + '<br/>';
		for (var i = 0, l = params.length; i < l; i++) {									 
		relVal += params[i].marker + params[i].seriesName + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + params[i].data + '%'+ '</br>'
		}
	return relVal;
	}
},

3.区域缩放（ 更多配置参考最下方的引用参考4）

• 问题：当数据过多展示不下，横坐标和数据会错位，看着图表会混乱。
  

dataZoom: [
         {
           type: 'inside', //slider表示有滑动块的，inside表示内置的
           show: true,
           xAxisIndex: [0],
         }
       ],

• 解决： 使用dataZoom可以对横坐标进行放大
  
• type为‘slider’时
  
• 问题： 滑块和legend重合，不能进行点击图表数据筛选
• 解决： 修改滑块大小或者位置

//修改滑块大小
	dataZoom: [
            {
              type: 'slider', //slider表示有滑动块的，inside表示内置的
              show: true,
              xAxisIndex: [0],
			  height: 15, // 滑块高度
            },
  ],

4.柱状图tooltips显示 横坐标也显示为纵坐标

正常的显示

• 原因： data数据中的name属性是指数据项的名称，会覆盖掉tootips横坐标的位置

  const eData =  data.map((item) => {
       const monthlyData =  item.monthlyData.map(oitem => {
         return {
           value: oitem,
           // name: item.name,data 中的数据项中的name是数据项名称,会覆盖掉tootips横坐标的位置
           code: item.code
         }
       })
       return {
         data: monthlyData,
         name: item.name,
         code: item.code
       }
     })
     this.seriesData = eData.map(o => {
       return {
         ...o,
         type: 'bar',
         barWidth: 30,
       }
     })

• 解决： data数据中不要带name字段，name默认指的是数据项的名称

5.legend 滚动

 legend: {    
	left: '10%',  
    data: this.legendData,    
    type: 'scroll' //滚动   
},

6.echarts实例的创建和销毁

• 问题： tab切换 使用多个echarts图时 要在进行echarts实例的销毁，不然会出现下边的警告
  

• 解决： 在实例创建之前，判断是否存在实例，若存在则销毁，不存在则新建实例

  	myChart	&& myChart.dispose();
  	myChart = echarts.init(document.getElementById("echart"));

7.警告

• 原因： echarts.init()在页面未渲染时就先页面一步加载了。
• 解决： 页面中是第二个tab切换才开始有柱状图显示，柱状图的init要在tab切换到第二个才创建。

8.多个不同图表时自适应大小

• 问题：使用onresize失效，多个图表时，仅对最后一个生效

  		window.onresize = function () {//自适应大小
  						barChart.resize();
  		}
  

• 解决：

  	window.addEventListener('resize', () => {  // 自适应大小
          	myChart.resize();
    }, false);

9. 图表数据二次渲染tooltips成倍增加

• 原因： series数据在更新之前没有进行初始化置空
• 解决： 在切换更新图表数据时先把series数据清空

参考：
1.tabs标签页中使用Echarts图表常见警告以及处理方式
2.echarts 自适应屏幕 失效 window.onresize
3. echarts.js报错:1722 There is a chart instance already initialized on the dom
4.echarts中datazoom 配置