echarts图表显示相关

最新推荐文章于 2024-06-26 16:44:25 发布

浅曦忆

最新推荐文章于 2024-06-26 16:44:25 发布

阅读量817

点赞数 1

分类专栏： java 文章标签： echarts 添加辅助线自定义工具箱 div分栏拖拽图表显示

本文链接：https://blog.csdn.net/sinat_29673403/article/details/82841214

版权

最近做了一个跟图表显示相关得项目，在图表插件得选用上，我使用了百度得插件echarts。一些基本的功能文档里都写的很清楚。
在这里主要说明一下，如何自定义toolbox里得工具，以实现自己想要得功能。
以画辅助线为例，如何在图表工具箱中增加辅助线这个工具项，在echarts3之前辅助线工具是本来就有的，到了echarts3之后，辅助线工具就被移除。如果想要使用，必须自己自定义编写功能代码才能实现。我在这个项目中，自行实现了添加辅助线，删除辅助线（单步撤销，全部删除），以及如何将图表在另外一个标签页打开显示得功能（PS:toolbox里的icon都是svg图标，要想自定义，从网上下载自己想要的svg格式的图标，用编辑器打开，将路径黏贴至相应位置即可。）代码如下：

toolbox: {
    
			        feature: {
    
			        	show:true,
			        	dataZoom: {
    
			                yAxisIndex: 0,
			                xAxisIndex: 0,
			            },//图表区域缩放
			            dataView: {
    readOnly: false},//数据视图
			            restore: {
    },//重置
			            saveAsImage: {
    },//图片下载
			            myTool1: {
    
			                show: true,
			                title:'添加辅助线',
			                icon: 'path://M315.5,551.1c-0.6,0.8-1.3,1.7-1.6,2.7l-49.3,180.8c-2.9,10.5,0.1,21.9,7.9,29.9c5.8,5.7,13.5,8.8,21.7,8.8c2.7,0,5.4-0.3,8.1-1l179.5-49c0.3,0,0.4,0.3,0.6,0.3c2.1,0,4.1-0.7,5.6-2.3l480-479.9c14.3-14.3,22.1-33.7,22.1-54.9c0-24-10.2-47.9-28-65.7l-45.3-45.4c-17.8-17.8-41.8-28-65.7-28c-21.1,0-40.6,7.8-54.9,22.1l-479.9,480C315.7,549.9,315.8,550.6,315.5,551.1 M921,194.3L873.3,242L796,163.5l47-47c7.4-7.5,21.8-6.4,30.4,2.2l45.4,45.4c4.7,4.7,7.4,11,7.4,17.2C926.1,186.4,924.3,191,921,194.3 M400.8,558.7l346.3-346.4l77.3,78.6L478.8,636.6L400.8,558.7L400.8,558.7L400.8,558.7z M337.7,699.1l25-91.9l66.8,66.8L337.7,699.1L337.7,699.1L337.7,699.1z M951.4,384.5c-18.2,0-33.1,14.8-33.1,33.2v447.4c0,23.5-19.1,42.5-42.6,42.5H118.8c-23.5,0-42.6-19.1-42.6-42.5V134.9c0-23.5,19.1-42.6,42.6-42.6h487.5c18.3,0,33.1-14.8,33.1-33.1c0-18.2-14.8-33.1-33.1-33.1H113.8C56.6,26.1,10,72.6,10,129.8v740.3c0,57.2,46.6,103.7,103.8,103.7h766.9c57.2,0,103.8-46.5,103.8-103.7V417.5C984.4,399.3,969.5,384.5,951.4,384.5',
		                	onclick: function (param){
    
		                		var zr = polarOneChart.getZr();
		                		if(!markflag){
    //markflag作为标志，看现在是否开启添加辅助线
		                			var drawing;
		                			var points = [];
		                			var startPoint;
		                			var traceEl;

		                			zr.on('mousedown', function (e) {
    //记录鼠标点击的事件操作
		                				drawing = true;
		                				startPoint = [e.offsetX, e.offsetY];
		                				traceEl = new echarts.graphic.Line({
    
		                					shape: {
    
		                						x1: 0, y1: 0, x2: 0, y2: 0
		                					},
		                					style: {
    
		                						stroke: 'red',
		                						lineWidth: 1
		                					}
		                				});
		                				zr.add(traceEl);//添加辅助线到zender里
		                				markList.push(traceEl);
		                			});

		                			zr.on('mouseup', function (e) {
    
		                				drawing = false;
		                				points.length = 0;
		                				startPoint = null;
		                			})

		                			zr.on('mousemove', function (e) {
    
		                				if (!drawing) {
    
		                					return;
		                				}
		                				
		                				traceEl.attr('shape', {
    
		                					x1: startPoint[0],
		                					y1: startPoint[1],
		                					x2: e.offsetX,
		                					y2: e.offsetY
		                				});
		                			})
		                			markflag = true;
		                		}else{
    //添加辅助线功能关闭之后，不再对鼠标事件进行响应
		                			console.log(zr);
		                			zr.off('mousedown');
		                			zr.off('mouseup');
		                			zr.off('mousemove');
		                			markflag = false;
		                		}
			                }
			            },
			            myTool2: {
    
			                show: true,
			                title: '删除辅助线',
			                icon: 'path://M233.5,108.9l123,98.9v-76.7c207.1,20.6,368.9,195.3,368.9,407.9c0,226.4-183.5,409.9-409.9,409.9v41c249,0,450.9-201.9,450.9-450.9c0-235.2-180.1-428.4-409.9-449.1V10L233.5,108.9z',
		                	onclick: function (param){
    
		                        var zr = polarOneChart.getZr();
		                        var len = markList.length;
		                        var element = markList.pop();
		                		if(len > 1){
    
		                			zr.remove(markList.pop());//从已添加的辅助线列表中删除最后一个添加的辅助线
		                		}
		                		zr.refresh();
			                }
			            },
			            myTool3: {
    
			                show: true,
			                title:'清空辅助线',
			                icon:'path://M923.6,167.2H804.4c-2.2-0.2-4.1-1.3-6.4-1.3H657.7V105c0-52.4-42.3-95-94.1-95H438.5c-51.9,0-94.1,42.6-94.1,95v60.8H202c-2.2,0-4.2,1.1-6.4,1.3H76.5c-17.3,0-31.4,14.1-31.4,31.7c0,17.5,14.1,31.6,31.4,31.6h62.7v696.1c0,35,28.1,63.3,62.7,63.3H798c34.7,0,62.8-28.3,62.8-63.3V230.5h62.7c17.3,0,31.4-14.1,31.4-31.6C955,181.3,940.9,167.2,923.6,167.2z M407.1,105c0-17.5,14.1-31.7,31.4-31.7h125.1c17.3,0,31.4,14.2,31.4,31.7v60.8H407.1L407.1,105L407.1,105z M798.1,926.7H202V230.5h171.7c0.8,0.1,1.1,0.5,1.8,0.5c0.8,0,1.1-0.4,1.9-0.5h246.2c1,0.1,1.5,0.7,2.6,0.7c1.1,0,1.5-0.6,2.5-0.7H798L798.1,926.7L798.1,926.7z M500.1,373.2c-17.4,0-31.4,14.2-31.4,31.7v380.4c0,17.6,14,31.7,31.4,31.7c17.4,0,31.4-14.1,31.4-31.7V404.9C531.4,387.4,517.4,373.2,500.1,373.2z M625.6,785.3c0,17.6,14.1,31.7,31.4,31.7c17.3,0,31.4-14.1,31.4-31.7V404.9c0-17.5-14.1-31.7-31.4-31.7c-17.3,0-31.4,14.2-31.4,31.7V785.3z M343.2,373.2c-17.3,0-31.4,14.2-31.4,31.7v380.4c0,17.6,14.1,31.7,31.4,31.7c17.3,0,31.4-14.1,31.4-31.7V404.9C374.6,387.4,360.5,373.2,343.2,373.2z',
		                	onclick: function (param){
    
		                		var zr = polarOneChart.getZr();
		                		var len = markList.length;
		                		if(len > 0){
    
		                			while(len--){
    
		                				zr.remove(markList.pop());//删除列表中所有添加的辅助线
		                			}
		                		}
		                		zr.refresh();
			                }
			            },
			            myTool4:{
    
			            	show: true,
			                title:'单图显示',
			                icon: 'path://M500,10C229.5,10,10,229.5,10,500s219.5,490,490,490s490-219.5,490-490S770.5,10,500,10z M500,892c-216.1,0-392-175.9-392-392s175.9-392,392-392s392,175.9,392,392S716.1,892,500,892z M549,451h196v98H549v196h-98V549H255v-98h196V255h98V451z',//svg图标的路径
		                	onclick: function (){
    //打开另一个连接，这里用于打开单表显示的网页
		                		var url = '/oneChart?type=0';
		                		window.open(url);
		                	}
			            },
			            myTool5:{
    
			            	show:true,
			            	title:'参数配置',
			            	icon:'path://M747.8,456.5c-51.4,0-93.1,41.8-93.1,93.1c0,51.4,41.8,93.1,93.1,93.1c51.4,0,93.1-41.7,93.1-93.1C841,498.3,799.2,456.5,747.8,456.5z M747.8,609.7c-33.1,0-60-26.9-60-60c0-33.1,26.9-60,60-60c33.1,0,60,26.9,60,60C807.9,582.8,780.9,609.7,747.8,609.7z',
			            	onclick:function(){
    //配置图表参数，比如x,y轴上下限，边界圆的半径等等
			            		$("#crosshairChartDialog").show();
			            	}
			            }
			            
			        }
			    },

到此，自定义工具箱中的工具代码就这样写完了，现在附上图表显示的完整js代码，包括一些用到的通用方法，供大家进行参考。代码如下：

/**
 * 自定义，根据id查找元素的方法
 * @param id
 */
function $$(id) {
    
    return document.getElementById(id)
}

function getCrosshairChartData(result){
    
	var data = [];
	if(result){
    
		for (var i = 0; i < result.length; i++) {
    
            data.push(result[i]);
        }
		return data;
	}
}

function getPolarChartData(result){
    
	var data = [];
	if(result){
    
		for(var k in result){
    
			data.push([k,result[k]]);
		}
	}
	return data;
}

function getPolarThreeChartData(result){
    
	var data = [];
	var x = result.value1;
	var y = result.value2;
	if(x){
    
		for (var k = 0; k < x.length; k++) {
    
			data.push([x[k],y[k]]);
		}
	}
	return data;
}

function getMarkLineData(result){
    
	var data = '';
	var x = result.value1;
	var y = result.value2;
	if(x){
    
		for (var k = 0; k < x.length; k++) {
    
			if(k == x.length-1)
				break;
			if(data != '')
				data += ',';
			data += '[{coord:['+x[k]+','+y[k]+']},{coord:['+x[k+1]+','+y[k+1]+']}]';
		}
	}
	data = '['+data+']';
//	data = '[[{coord:['+x[0]+','+y[0]+']},{coord:['+x[1]+','+y[1]+']}]]';
	return data;
}

function showCircle(radio){
    
	var data = [];
	var line = radio/25;
	for(var k = 1; k <=2; k++){
    
		for (var i = 0; i <= 25; i++) {
    
		    var x = i*line;
		    var y = Math.sqrt(Math.pow(radio,2)-Math.pow(x,2));
		    if(k == 2){
    
			    x = -x;
			    y = -y;
		    }
		    data.push([x, y]);
		}
		for (var i = 25; i >= 0; i--) {
    
		    var x = i*line;
		    var y = Math.sqrt(Math.pow(radio,2)-Math.pow(x,2));
		    if(k == 1)
		    	y = -y;
		    else 
		    	x = -x;
		    data.push([x, y]);
		}
	}
	return data;
}

function getFirstPlot(result){
    
	var data = [];
	var x = result.value1;
	var y = result.value2;
	if(x){
    
		data.push([x[0],y[0]]);
	}
	return data;
}

function getLastPlot(result){
    
	var data = [];
	var x = result.value1;
	var y = result.value2;
	if(x){
    
		data.push([x[x.length-1],y[x.length-1]]);
	}
	return data;
}

function isExisted(obj){
    
	if(typeof obj == "undefined" || obj == null || obj == "")
		return false;
	return true;
}

var param = $('#pictype').val();
if(param == ""){
    
	var crosshairChart = echarts.init($$('crosshairChart'),'macarons');
	var polarOneChart = echarts.init($$('polarOneChart'),'macarons');
	var polarTwoChart = echarts.init($$('polarTwoChart'),'macarons');
	var polarThreeChart = echarts.init($$('polarThreeChart'),'macarons');
}else{
    
	switch(param){
    
	case '0': var crosshairChart = echarts.init

最低0.47元/天解锁文章

浅曦忆

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts图表显示相关

最近做了一个跟图表显示相关得项目，在图表插件得选用上，我使用了百度得插件echarts。一些基本的功能文档里都写的很清楚。在这里主要说明一下，如何自定义toolbox里得工具，以实现自己想要得功能。以画辅助线为例，如何在图表工具箱中增加辅助线这个工具项，在echarts3之前辅助线工具是本来就有的，到了echarts3之后，辅助线工具就被移除。如果想要使用，必须自己自定义编写功能代码才能实现。...
复制链接

扫一扫

专栏目录