Echars 常见问题汇总【自定义tooltip，图例等

àì夳堔傛蜴生んèń 2022-02-01 10:01 278阅读 0赞

本文总结了在工作中遇到的，Echars相关问题，持续更新学习~

**- 图表自适应窗口大小**

window.onresize = function(){ 
            myChart.resize();
            //myChart1.resize(); //如果有多个图表可继续添加
        }

**- Echars自定义tooltip**  
提示框的格式（formatter）分为两种模式：  
第一种是字符串模板，官方文档  
http://echarts.baidu.com/option.html\#tooltip.formatter  
第二种是自定义函数；

formatter: function (params) {  
    },

params：在 trigger 为 ‘axis’ 的时候 params 是多个系列的数据数组。  
params主要是对象数组，params和echarts的series是关联的。这里数组的个数取决于series的个数，当series只有一个时，params也就是只有一个对象的数组。  
由parmas的结构我们可以自由定义想要展示的提示数据。

例如：

formatter: function (params) { 
    	var res='<div><p>时间：'+params[0].name+'</p></div>' 
    	for(var i=0;i<params.length;i++){ 
    		res+='<p>'+params[i].seriesName+':'+params[i].data+'</p>'
    	}
    	return res;
    },

**- Echars图表x轴显示全**

axisLabel:{ 
        interval: 0 //auto是自动合并
        rotate:40 //文字会旋转，40是倾斜的角度
    }

**- Echars小工具位置**

toolbox:{ 
        show: true
        feature:{ 
        	
        }，
        right:30 // 控制小工具的位置距离右边30px的位置
    }

**- Echars图例**

legend: { 
    	data: ["总数", "已解决", "未解决"],
    	icon: "circle",   // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
    	itemWidth: 10,  // 设置宽度
    	itemHeight: 10, // 设置高度
    	itemGap: 40 // 设置间距
    },