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: 到此，自定義工具箱中的工具程式碼就這樣寫完了，現在附上圖表顯示的完整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,