echarts圖表顯示相關
阿新 • • 發佈:2018-12-11
最近做了一個跟圖表顯示相關得專案,在圖表外掛得選用上,我使用了百度得外掛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,