echarts（一）自定义配置

最新推荐文章于 2025-06-13 18:18:44 发布

fullstack_lth

最新推荐文章于 2025-06-13 18:18:44 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： DataVisualization 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/u014744118/article/details/77004604

DataVisualization 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Echarts在使用过程中的一些自定义配置技巧，包括如何解决保存图片的问题、优化鼠标 tooltip 的位置、让数据集中显示在min和max之间、设置不强制显示0以及日期显示格式的简化等，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、图片自适应重绘

window.onresize = function () {
	myChart.resize(); //使第一个图表适应
}

2、鼠标在左边tooltip在右边

tooltip : {
	trigger : 'axis',
	position: function (pos, params, dom, rect, size) {// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
		var obj = {top: 60};
		obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
		return obj;
	}
},

3、保存图片问题

toolbox: {
	show: true,
	feature: {
		saveAsImage: {
			show: true
		}
	}
},

----------------------------------------------------------------------------

2017.8.14更新

鼠标在左tooltip在右边这段可以直接设置为

confine : true

此项配置非常非常非常有用，比上面的配置2更加实用，因为配置2实测焦点离鼠标点击位置太远，用户体验不好。

----------------------------------------------------------------------------

2017.8.22更新

4、让数据集中显示在min和max之间

function getNew(a){
	var b = [];
	for(var i = 0; i <= a.length-1; i++){ 
		if(a[i]) {
			b.push(parseFloat(a[i]));
		}
	}
	return b;
}
function max(b){
	var a = getNew(b);
	var max = a[0];
	var len = a.length;
	for (var i = 0; i <= len-1; i++){ 
		if(!a[i]) continue;
		if (a[i] > max){ 
			max = a[i]; 
		} 
	} 
	return max;
}
function min(b){
	var a = getNew(b);
	var min = a[0];
	var len = a.length;
	for (var i = 0; i <= len-1; i++){ 
		if(!a[i]) continue;
		if (a[i] < min){ 
			min = a[i]; 
		} 
	} 
	return min;
}
/**
 * 取两个数组中最大值和最小值并将之差除以5，返回另一个数组
 * @param a
 * @param b
 * @returns {Array}
 */
function compareArr(a,b){
	var c = [];
	c.push(format(max(a)));
	c.push(format(min(a)));
	c.push(format(max(b)));
	c.push(format(min(b)));
	var d = (max(c) - min(c))/5;
	if(max(c) && min(c)){
		var m = parseFloat(max(c)) + d;
		var n = parseFloat(min(c)) - d;
		return new Array(m.toFixed(2),n.toFixed(2));
	}else return new Array('','');
}

在图表中需要设置最大值和最小值的地方调用

			var m = comArr(yCdata);
			var max = m[0];
			var min = m[1];

并在相应的需要设置的最大值和最小值得地方配置max和min

-------------------------------------------------------------------------

2017.8.28更新

5、让数据集中显示，不需要设置最大最小值，只需设置不强制显示0

scale :true,

-------------------------------------------------------------------------

2017.9.6更新

6、日期显示格式精简化，只在第一个日期前加上年份，其他日期去掉年份和多余的0显示

formatter: function (value, index) {
                	    // 格式化成月/日，只在第一个刻度显示年份
                	    var date = new Date(value);
                	    var texts = [(date.getMonth() + 1), date.getDate()];
                	    if (index === 0) {
                	        texts.unshift(date.getFullYear());
                	    }
                	    return texts.join('/');
                	}

7、使图像平滑显示

scale: true,

8、完整实例

function drawCharts(xdata, yAdata, yBdata, yCdata, yDdata, strA, strB, strC, strD) {
    	var i,
    		len = xdata.length,
    		xdatas = [];
    	for(i = 0; i < len; ++i){
    		xdatas[i] = xdata[i].replace(/-/g, ",");
    	}
    	xdata = xdatas;
        var myChart = echarts.init(document.getElementById('echartsContainer'));
        myChart.setOption({}, true);
        myChart.setOption(option = {
            legend: {
                data: [strA, strB]
            },
            tooltip: {
                trigger: 'axis',
                confine: true
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xdata.map(function (str) {
                    return str.replace(' ', '\n')
                }),
                axisLabel: {
                	formatter: function (value, index) {
                	    // 格式化成月/日，只在第一个刻度显示年份
                	    var date = new Date(value);
                	    var texts = [(date.getMonth() + 1), date.getDate()];
                	    if (index === 0) {
                	        texts.unshift(date.getFullYear());
                	    }
                	    return texts.join('/');
                	}
                }
            },
            yAxis:
                [
                    {
                        type: 'value',
                        scale: true,
                        position: 'left'
                    },
                    {
                        type: 'value',
                        scale: true,
                        position: 'right'
                    }
                ],
            series: [
                {
                    name: strA,
                    type: 'line',
                    smooth:true,  
                    stack: '总量',
                    data: yAdata
                },
                {
                    name: strB,
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: 'rgb(255, 70, 151)'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            }, {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }])
                        }
                    },
                    data: yBdata
                }
            ]
        });
        var myChart1 = echarts.init(document.getElementById("echartsContainer1"));
        myChart1.setOption({}, true);
        myChart1.setOption(option = {
            title: {},
            tooltip: {
                trigger: 'axis',
                confine: true
            },
            legend: {
                data: [strC]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xdata.map(function (str) {
                    return str.replace(' ', '\n')
                }),
                axisLabel: {
                	formatter: function (value, index) {
                	    // 格式化成月/日，只在第一个刻度显示年份
                	    var date = new Date(value);
                	    var texts = [(date.getMonth() + 1), date.getDate()];
                	    if (index === 0) {
                	        texts.unshift(date.getYear());
                	    }
                	    return texts.join('/');
                	}
                }
            },
            yAxis: {
                name: '价格(元)',
                scale: true,
                type: 'value',
                position: 'left'
            },
            series: {
                name: strC,
                type: 'line',
                smooth:true,  
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: '#E01F54',
                        lineStyle: {
                            color: '#E01F54'
                        }
                    }
                },
                data: yCdata
            },
        });
        var myChart2 = echarts.init(document.getElementById("echartsContainer2"));
        myChart2.setOption({}, true);
        myChart2.setOption(option = {
            title: {},
            tooltip: {
                trigger: 'axis',
                confine: true
            },
            legend: {
                data: [strD]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xdata.map(function (str) {
                    return str.replace(' ', '\n')
                }),
                axisLabel: {
                	formatter: function (value, index) {
                	    var date = new Date(value);
                	    var texts = [(date.getMonth() + 1), date.getDate()];
                	    if (index === 0) {
                	        texts.unshift(date.getYear());
                	    }
                	    return texts.join('/');
                	}
                }
            },
            yAxis: {
                name: '价格(元)',
                scale: true,
                type: 'value',
                position: 'left'
            },
            series: {
                name: strD,
                type: 'line',
                smooth:true,  
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: '#E01F54',
                        lineStyle: {
                            color: '#E01F54'
                        }
                    }
                },
                data: yDdata
            },
        });
        window.onresize = function () {
            var t = setTimeout(function () {
            	$('#searchbar').css('width', $('#body_container_right').innerWidth());
                myChart.resize();
                myChart1.resize();
                myChart2.resize();
            }, 300);
        };
    }