echarts图表显示相关

最近做了一个跟图表显示相关得项目，在图表插件得选用上，我使用了百度得插件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($$('oneChart'),'macarons');break;case '1': var polarOneChart = echarts.init($$('oneChart'),'macarons');break;case '2': var polarTwoChart = echarts.init($$('oneChart'),'macarons');break;case '3': var polarThreeChart = echarts.init($$('oneChart'),'macarons');break;default:break;}
}function formatUnixtimestamp (unixtimestamp){var unixtimestamp = new Date(unixtimestamp*1000);var year = 1900 + unixtimestamp.getYear();var month = "0" + (unixtimestamp.getMonth() + 1);var date = "0" + unixtimestamp.getDate();var hour = "0" + unixtimestamp.getHours();var minute = "0" + unixtimestamp.getMinutes();var second = "0" + unixtimestamp.getSeconds();return year + "-" + month.substring(month.length-2, month.length)  + "-" + date.substring(date.length-2, date.length)+ " " + hour.substring(hour.length-2, hour.length) + ":"+ minute.substring(minute.length-2, minute.length) + ":"+ second.substring(second.length-2, second.length);
}function getCrosshairChart(yMax,yMin,x_accuracy,y_accuracy){$.getJSON('/getCrosshairChart',function(data){if (data) {var markflag = false;var markList = [];var value1 = data.value1;var valueX = data.valueX;var valueT = data.valueT;var value2 = data.value2;crosshairChart.setOption({tooltip: {trigger: 'axis',axisPointer:{show: true,type : 'cross',lineStyle: {type : 'dashed',width : 1}},formatter: function (params) {for (var i = 0; i < value1.length; i++) {if(params[0].value == value1[i])return formatUnixtimestamp(valueT[i])+"<br/>"+params[0].marker+"("+valueX[i]+","+parseFloat(value1[i]).toFixed(x_accuracy)+")<br />"+params[1].marker+"("+valueX[i]+","+parseFloat(value2[i]).toFixed(y_accuracy)+")";}},},legend: {data:['value1','value2']},calculable : true,grid: {left: '3%',right: '20%',bottom: '6%',containLabel: true},toolbox: {feature: {show:true,dataZoom: {yAxisIndex: 0,xAxisIndex: 0,},dataView: {readOnly: false},restore: {},saveAsImage: {},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',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(){$("#crosshairChartDialog").show();}}}},dataZoom: [{type: 'inside',xAxisIndex: 0,start: 0,end: 100},{type: 'inside',yAxisIndex: 0,start: 0,end: 100}],xAxis: {type: 'category',boundaryGap: false,data: getCrosshairChartData(data.valueX),axisLine: {show: false},splitLine:{ show:true},axisTick: {show: false},name: 'Days after t0',},yAxis: {type: 'value',min:isExisted(yMin)?parseFloat(yMin):-0.4,max:isExisted(yMax)?parseFloat(yMax):0.4,axisLine: {show: false}, axisTick: {show: false},name:'true longitude(deg)',},series: [{// 根据名字对应到相应的系列name: 'value1',type: 'line',showSymbol: false,smooth: true,hoverAnimation: true,data: getCrosshairChartData(data.value1),},{// 根据名字对应到相应的系列name: 'value2',type: 'line',showSymbol: false,smooth: true,hoverAnimation: true,data: getCrosshairChartData(data.value2),}]});}});
}function getPolarOneChart(xMax,xMin,yMax,yMin,radius, x_accuracy, y_accuracy){$.getJSON('/getPolarOneChart',function(data){var markflag = false;var markList = [];var value1 = data.value1;var value2 = data.value2;var valueT = data.valueT;if(data){polarOneChart.setOption({//              legend: {//                  data: ['dataplot']
//              },tooltip: {trigger: 'axis',axisPointer:{show: true,type : 'cross',lineStyle: {type : 'dashed',width : 1}},formatter: function (params) {for (var i = 0; i < value1.length; i++) {if(params[0].value[0] == value1[i])return formatUnixtimestamp(valueT[i])+"<br/>"+params[0].marker+"("+parseFloat(value1[i]).toFixed(x_accuracy)+","+parseFloat(value2[i]).toFixed(y_accuracy)+")";}},},toolbox: {feature: {show:true,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){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);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',onclick: function (){var url = '/oneChart?type=1';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(){$("#polarOneChartDialog").show();}},dataZoom: {yAxisIndex: 0,xAxisIndex: 0,},dataView: {readOnly: false},restore: {},saveAsImage: {}}},calculable : true,grid: {left: '3%',right: '15%',bottom: '6%',containLabel: true},xAxis: {type: 'value',name:'ix(deg)',boundaryGap: [0.05,0.05],min:isExisted(xMin)?parseFloat(xMin):-0.15,max:isExisted(xMax)?parseFloat(xMax):0.15,axisLine: {show: false}, axisTick: {show: false},data: getCrosshairChartData(data.value1),},yAxis: {type: 'value',name:'iy(deg)',min:isExisted(yMin)?parseFloat(yMin):-0.15,max:isExisted(yMax)?parseFloat(yMax):0.15,axisLine: {show: false}, axisTick: {show: false},boundaryGap: [0.05,0.05],},dataZoom: [{type: 'inside',xAxisIndex: 0,start: 0,end: 100},{type: 'inside',yAxisIndex: 0,start: 0,end: 100}],series: [{// 根据名字对应到相应的系列name: 'dataplot',coordinateSystem: 'cartesian2d',type: 'scatter',symbolSize: 5,showSymbol: false,hoverAnimation: true,data: getPolarThreeChartData(data),},{// 根据名字对应到相应的系列name: 'Critical line',type: 'line',showSymbol: false,smooth: true,hoverAnimation: true,data: showCircle(isExisted(radius)?parseFloat(radius):0.15)},{// 根据名字对应到相应的系列name: 'the first plot',type: 'scatter',showSymbol: false,symbolSize: 10,smooth: true,hoverAnimation: true,data: getFirstPlot(data),itemStyle:{normal:{color:"#F44336",}}},{// 根据名字对应到相应的系列name: 'the Last plot',type: 'scatter',showSymbol: false,symbolSize: 10,smooth: true,hoverAnimation: true,data: getLastPlot(data),itemStyle:{normal:{color:"#FFEB3B",}}}]});}});
}function getPolarTwoChart(xMax,xMin,yMax,yMin,radius,x_accuracy,y_accuracy){$.getJSON('/getPolarTwoChart',function(data){var markflag = false;var markList = [];var value1 = data.value1;var value2 = data.value2;var valueT = data.valueT;if(data){polarTwoChart.setOption({//              legend: {//                  data: ['dataplot']
//              },tooltip: {trigger: 'axis',axisPointer:{show: true,type : 'cross',lineStyle: {type : 'dashed',width : 1}},formatter: function (params) {for (var i = 0; i < value1.length; i++) {if(params[0].value[0] == value1[i])return formatUnixtimestamp(valueT[i])+"<br/>"+params[0].marker+"("+parseFloat(value1[i]).toFixed(x_accuracy)+","+parseFloat(value2[i]).toFixed(y_accuracy)+")";}},},toolbox: {feature: {show:true,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 = polarTwoChart.getZr();if(!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);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 = polarTwoChart.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 = polarTwoChart.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',onclick: function (){var url = '/oneChart?type=2';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(){$("#polarTwoChartDialog").show();}},dataZoom: {yAxisIndex: 0,xAxisIndex: 0,},dataView: {readOnly: false},restore: {},saveAsImage: {}}},calculable : true,grid: {left: '3%',right: '20%',bottom: '6%',containLabel: true},xAxis: {type: 'value',name:'ex(10e-5)',boundaryGap: false,min:isExisted(xMin)?parseFloat(xMin):-40,max:isExisted(xMax)?parseFloat(xMax):40,axisLine: {show: false}, axisTick: {show: false},data: getCrosshairChartData(data.value1),},yAxis: {type: 'value',min:isExisted(yMin)?parseFloat(yMin):-40,max:isExisted(yMax)?parseFloat(yMax):40,axisLine: {show: false}, axisTick: {show: false},name:'ey(10e-5)',},dataZoom: [{type: 'inside',xAxisIndex: 0,start: 0,end: 100},{type: 'inside',yAxisIndex: 0,start: 0,end: 100}],series: [{// 根据名字对应到相应的系列name: 'dataplot',coordinateSystem: 'cartesian2d',type: 'scatter',symbolSize: 5,showSymbol: false,hoverAnimation: true,data: getPolarThreeChartData(data)},{// 根据名字对应到相应的系列name: 'Critical line',type: 'line',showSymbol: false,smooth: true,hoverAnimation: true,data: showCircle(isExisted(radius)?parseFloat(radius):40)},{// 根据名字对应到相应的系列name: 'the first plot',type: 'scatter',showSymbol: false,symbolSize: 10,smooth: true,hoverAnimation: true,data: getFirstPlot(data),itemStyle:{normal:{color:"#F44336",}}},{// 根据名字对应到相应的系列name: 'the Last plot',type: 'scatter',showSymbol: false,symbolSize: 10,smooth: true,hoverAnimation: true,data: getLastPlot(data),itemStyle:{normal:{color:"#FFEB3B",}}}]});}});
}function getPolarThreeChart(xMax,xMin,yMax,yMin,x_accuracy,y_accuracy){$.getJSON('/getPolarThreeChart',function(data){var value1 = data.value1;var value2 = data.value2;var valueT = data.valueT;if(data){polarThreeChart.setOption({//              legend: {//                  data: ['dataplot']
//              },tooltip: {trigger: 'axis',axisPointer:{show: true,type : 'cross',lineStyle: {type : 'dashed',width : 1}},formatter: function (params) {for (var i = 0; i < value1.length; i++) {if(params[0].value[0] == value1[i])return formatUnixtimestamp(valueT[i])+"<br/>"+params[0].marker+"("+parseFloat(value1[i]).toFixed(x_accuracy)+","+parseFloat(value2[i]).toFixed(y_accuracy)+")";}},},toolbox: {feature: {show:true,dataZoom: {yAxisIndex: 0,xAxisIndex: 0,},dataView: {readOnly: false},restore: {},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',onclick: function (){var url = '/oneChart?type=3';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(){$("#polarThreeChartDialog").show();}},saveAsImage: {}}},calculable : true,grid: {left: '3%',right: '16%',bottom: '6%',containLabel: true},xAxis: {type: 'value',name:'mean longitude(deg)',boundaryGap: false,min:isExisted(xMin)?parseFloat(xMin):-0.06,max:isExisted(xMax)?parseFloat(xMax):0.06,axisLine: {show: false}, axisTick: {show: false},data: getCrosshairChartData(data.value1),},yAxis: {type: 'value',name:'drift rate (deg/day)',min:isExisted(yMin)?parseFloat(yMin):-0.06,max:isExisted(yMax)?parseFloat(yMax):0.06,axisLine: {show: false}, axisTick: {show: false},},dataZoom: [{type: 'inside',xAxisIndex: 0,start: 0,end: 100},{type: 'inside',yAxisIndex: 0,start: 0,end: 100}],series: [{// 根据名字对应到相应的系列name: 'dataplot',coordinateSystem: 'cartesian2d',type: 'line',symbolSize: 5,showSymbol: false,hoverAnimation: true,data: getPolarThreeChartData(data),
//                  markLine: {//                      symbolSize:0,
//                      itemStyle:{//                          normal:{//                              show:true,
//                              color:'#dc3023',
//                              label:{show:false},
//                              lineStyle:{//                                  type:'solid',
//                                  width:2
//                              }
//                          }
//                      },
//                      data: eval("(" + getMarkLineData(data) + ")"),
//                  }},{// 根据名字对应到相应的系列name: 'the first plot',coordinateSystem: 'cartesian2d',type: 'scatter',showSymbol: false,symbolSize: 10,smooth: true,hoverAnimation: true,data: getFirstPlot(data),itemStyle:{normal:{color:"#F44336",}}},{// 根据名字对应到相应的系列name: 'the Last plot',coordinateSystem: 'cartesian2d',type: 'scatter',showSymbol: false,symbolSize: 10,smooth: true,hoverAnimation: true,data: getLastPlot(data),itemStyle:{normal:{color:"#FFEB3B",}}}]});}});
}function form_cancel(e){$(e).parents('form').hide();
}function crosshairChart_submit(){getCrosshairChart($('#crosshairChart_yMax').val(),$('#crosshairChart_yMin').val());$('#crosshairChartDialog').hide();
}function polarOneChart_submit(){getPolarOneChart($('#polarOneChart_xMax').val(),$('#polarOneChart_xMin').val(),$('#polarOneChart_yMax').val(),$('#polarOneChart_yMin').val(),$('#polarOneChart_radius').val());$('#polarOneChartDialog').hide();
}function polarTwoChart_submit(){getPolarTwoChart($('#polarTwoChart_xMax').val(),$('#polarTwoChart_xMin').val(),$('#polarTwoChart_yMax').val(),$('#polarTwoChart_yMin').val(),$('#polarTwoChart_radius').val());$('#polarTwoChartDialog').hide();
}function polarThreeChart_submit(){getPolarThreeChart($('#polarThreeChart_xMax').val(),$('#polarThreeChart_xMin').val(),$('#polarThreeChart_yMax').val(),$('#polarThreeChart_yMin').val());$('#polarThreeChartDialog').hide();
}function resizePic(){if($("#polarTwoChart").height() >= $("#polarTwoChart").width())$("#polarTwoChart").height($("#polarTwoChart").width());else$("#polarTwoChart").width($("#polarTwoChart").height());if($("#polarOneChart").height() >= $("#polarOneChart").width())$("#polarOneChart").height($("#polarOneChart").width());else$("#polarOneChart").width($("#polarOneChart").height());polarOneChart.resize();polarTwoChart.resize();
}$(function(){var configInfo = null;if(param == '')resizePic();$.getJSON('/getConfigInfo',function(data){//使用springboot自身的映射去读取自定义配置文件中的参数信息，用来配置图表的相关信息项configInfo = data;if(param == "" || param == '0'){var x_accuracy = configInfo.crosshairChart_x_accuracy?configInfo.crosshairChart_x_accuracy:configInfo.total_accuracy;var y_accuracy = configInfo.crosshairChart_y_accuracy?configInfo.crosshairChart_y_accuracy:configInfo.total_accuracy;getCrosshairChart(configInfo.crosshairChart_y_max,configInfo.crosshairChart_y_min,parseInt(x_accuracy),parseInt(y_accuracy));}if(param == "" || param == '1'){var x_accuracy = configInfo.polarOneChart_x_accuracy?configInfo.polarOneChart_x_accuracy:configInfo.total_accuracy;var y_accuracy = configInfo.polarOneChart_y_accuracy?configInfo.polarOneChart_y_accuracy:configInfo.total_accuracy;getPolarOneChart(configInfo.polarOneChart_x_max,configInfo.polarOneChart_x_min,configInfo.polarOneChart_y_max,configInfo.polarOneChart_y_min,configInfo.polarOneChart_circle_radius,parseInt(x_accuracy),parseInt(y_accuracy));}if(param == "" || param == '2'){var x_accuracy = configInfo.polarTwoChart_x_accuracy?configInfo.polarTwoChart_x_accuracy:configInfo.total_accuracy;var y_accuracy = configInfo.polarTwoChart_y_accuracy?configInfo.polarTwoChart_y_accuracy:configInfo.total_accuracy;getPolarTwoChart(configInfo.polarTwoChart_x_max,configInfo.polarTwoChart_x_min,configInfo.polarTwoChart_y_max,configInfo.polarTwoChart_y_min,configInfo.polarTwoChart_circle_radius,parseInt(x_accuracy),parseInt(y_accuracy));}if(param == "" || param == '3'){var x_accuracy = configInfo.polarThreeChart_x_accuracy?configInfo.polarThreeChart_x_accuracy:configInfo.total_accuracy;var y_accuracy = configInfo.polarThreeChart_y_accuracy?configInfo.polarThreeChart_y_accuracy:configInfo.total_accuracy;getPolarThreeChart(configInfo.polarThreeChart_x_max,configInfo.polarThreeChart_x_min,configInfo.polarThreeChart_y_max,configInfo.polarThreeChart_y_min,parseInt(x_accuracy),parseInt(y_accuracy));}});
});

最后附上若网页上显示多个图表，如何通过拖拽图表边界实现相应的缩放效果，类似于div的分栏左右（上下）拉伸压缩效果，代码如下：

window.onload = function() {var page = $$("page"), oTop = $$("group-one"), oBottom = $$("group-two"), rowLine = $$("row-line"), colLine1 = $$("col-line1"), colLine2 = $$("col-line2");var leftOne = $$("crosshairChart"), leftTwo = $$("polarTwoChart"), rightOne = $$("polarOneChart"), rightTwo = $$("polarThreeChart");rowLine.onmousedown = function(e) {var lineY = (e || event).clientY;rowLine.top = rowLine.offsetTop;document.onmousemove = function(e) {var iT = rowLine.top + ((e || event).clientY - lineY);var e = e || window.event, tarnameb = e.target || e.srcElement;var maxT = page.clientHeight - rowLine.offsetHeight;rowLine.style.margin = 0;iT < 0 && (iT = 0);iT > maxT && (iT = maxT);rowLine.style.top = oTop.style.height = colLine1.style.height = colLine2.style.top = leftOne.style.height = rightOne.style.height = iT + "px";oBottom.style.height = leftTwo.style.height = colLine2.style.height = rightTwo.style.height = page.clientHeight - iT + "px";crosshairChart.resize();polarOneChart.resize();polarTwoChart.resize();polarThreeChart.resize();return false};document.onmouseup = function() {document.onmousemove = null;document.onmouseup = null;rowLine.releaseCapture && rowLine.releaseCapture()};rowLine.setCapture && rowLine.setCapture();return false};colLine1.onmousedown = function(e) {var disX = (e || event).clientX;colLine1.left = colLine1.offsetLeft;document.onmousemove = function(e) {var iT = colLine1.left + ((e || event).clientX - disX);var e = e || window.event, tarnameb = e.target || e.srcElement;var maxT = page.clientWidth - colLine1.offsetWidth;colLine1.style.margin = 0;iT < 0 && (iT = 0);iT > maxT && (iT = maxT);colLine1.style.left = leftOne.style.width = iT+ "px";rightOne.style.width = page.clientWidth - iT+ "px";crosshairChart.resize();polarOneChart.resize();return false};document.onmouseup = function() {document.onmousemove = null;document.onmouseup = null;colLine1.releaseCapture && colLine1.releaseCapture()};colLine1.setCapture && colLine1.setCapture();return false};colLine2.onmousedown = function(e) {var disX = (e || event).clientX;colLine2.left = colLine2.offsetLeft;document.onmousemove = function(e) {var iT = colLine2.left + ((e || event).clientX - disX);var e = e || window.event, tarnameb = e.target || e.srcElement;var maxT = page.clientWidth - colLine2.offsetWidth;colLine2.style.margin = 0;iT < 0 && (iT = 0);iT > maxT && (iT = maxT);colLine2.style.left = leftTwo.style.width = iT+ "px";rightTwo.style.width = page.clientWidth - iT+ "px";polarTwoChart.resize();polarThreeChart.resize();return false};document.onmouseup = function() {document.onmousemove = null;document.onmouseup = null;colLine2.releaseCapture && colLine2.releaseCapture()};colLine2.setCapture && colLine2.setCapture();return false};
};

到此，关于echarts一些自定义的功能就阐述到此。其他的一些用法官方文档已经描述的很详细，在这里就不再赘述，大家自行看文档就OK了，有什么其他好的用法也欢迎与我交流~

echarts图表显示相关相关推荐

转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
vue 工程中加入 echarts 图表不显示的问题
vue 工程中加入 echarts 图表不显示的问题一.问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式二.vue工程使用echarts vue官方教程 1. 安装 ...
echarts图表使用v-show控制图表显示不全的问题
最近做echarts图表时,因为涉及到使用开关变量控制不同图表的显示隐藏,用 v-if 时会出现没有获取到dom结构而报错,所以改用 v-show,但是 v-show 本身是结构已经存在,当数据发生变 ...
小程序开发华为P20、voiv下Echarts图表不显示数据、坐标轴等问题
背景:小程序开发 BUG:华为P20.viov手机系统下Echarts图表不显示数据.坐标轴等问题.如下图: 解决方案:WXML中使用的ec-canvas标签加入属性force-use-old-can ...
Echarts图表不显示
Echarts图表不显示 div标签的style属性设置有问题 <div id="chart-user" style="width:500px; height:50 ...
ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...
ECharts图表坐标轴数据超出显示范围，以及坐标轴刻度标签显示不全解决方法
1.在使用ECharts图表时,比较常见到坐标轴数据超出显示范围的情况,如下解决办法:添加配置 2.坐标轴刻度标签显示不全就简单描述一下,比如你的数据横坐标有15个,但是默认不会显示全部解决方法 ...
echarts 图表不显示数据，显示了一个表情
echarts图表不显示数据,显示了一个表情背景描述使用echarts进行数据统计和展示,但是在使用过程中,发现图表并没有成功绘制,而是只显示了一个表情如下图原因: 图表的div宽度太宽了,di ...
Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)
在使用 Echarts 图表的过程中,有时候数值会很大导致该轴的刻度显示不全,如图: 这个时候就需要将该轴的刻度值除以 1000 或 10000,再加一个单位来缩短它的长度: Echarts官网中为我 ...

echarts图表显示相关

echarts图表显示相关相关推荐

最新文章

热门文章