前の記事の開発タスクを続けると、echartsダイアグラムが必要になりますが、データアイテムが多すぎるため、フローティングフレーム表示の問題がわかりにくくなり、テーブルスタイルと複数のデータ表示に変更する必要があります。
前日に作成された要約：
echarts公式文書。文書を読んで理解し、ケースを見つける方が効率的です。
最初は、オプションの外でJSONを使用して数値を2次元配列にアセンブルしたことに気づきませんでし
た。必要なときに取り出してください。
var json={
};
for(var j=0;j<DEFECT_CNAME.length;j++){
//把缺陷名按顺序放入JSON中 为对应DEFECT_CNAME以便循环输出
json[DEFECT_CNAME[j]]=new Array();//放入数组
for (var i = 0; i < 2; i++) {
json[DEFECT_CNAME[j]][i] = new Array();
for (var x= 0; x < PRODUCE_TIME.length; x++) {
json[DEFECT_CNAME[j]][i][x] = 0;
}
}
}
var j=0;
for(var i=0;i<list.length;i++){
//遍历查询结果list集
if(list[i][mapPojo.PRODUCE_TIME.pos].substr(0,timecount)==PRODUCE_TIME[j]){
//相同时间跨度的不同区域数据处理 缺陷个数和面积
for(var X=0;X<DEFECT_CNAME.length;X++){
if(DEFECT_CNAME[X]==list[i][mapPojo.DEFECT_CNAME.pos]){
//同时间段同名数据
count = json[DEFECT_CNAME[X]][0][j];
count+=parseInt(list[i][mapPojo.DEFECT_COUNT.pos]);
json[DEFECT_CNAME[X]][0][j]=count;
count = json[DEFECT_CNAME[X]][1][j];
count+=parseFloat(list[i][mapPojo.DEFECT_AREA.pos]);
json[DEFECT_CNAME[X]][1][j]=count;
break;
}
}
}
else{
j++;}
}
効果は次の図に示すとおりです。
次に、ループでシリーズに入れます。
var series=[];
for(var i = 0;i<DEFECT_CNAME.length;i++){
series.push({
name: DEFECT_CNAME[i],
type: 'line',
smooth: true,
data: json[DEFECT_CNAME[i]
});
}
その結果、series.dataの形式をどのように変更しても、すべてのデータが入力されていることが確認されます。
ただし、一連のデータはoption.tooltip.formatterに見つからず、操作できません。また、データが配置されているJSONをoption = {}で使用することはできません（同じ方法ではないため）。
ドキュメントを注意深く検討したところ、オフィシャルがseries.data。echarts-series-line.dataの形式の標準化された定義を持っていることがわかり、例だけを見
て、グラフを作成するために逆にしました。効率が低く、エラー率が高いです。私は午前の文書を読んでの重要性を認識。セックス
公式文書を完全に理解した後、データ形式を完全に変更します
。2次元配列は公式仕様に完全に対応しています。
series: [{
data: [
// xAxis yAxis
[ 0, 0, 2 ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
[ '星期四', 2, 1 ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
[ 2, 'p', 2 ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
[ 3, 3, 5 ]
]
}]
変更されたコードは次のとおりです。
var json={
};
for(var j=0;j<DEFECT_CNAME.length;j++){
//把缺陷名按顺序放入JSON中 为对应DEFECT_CNAME以便循环输出
json[DEFECT_CNAME[j]]=new Array();//放入数组
for (var i = 0; i < PRODUCE_TIME.length; i++) {
json[DEFECT_CNAME[j]][i] = new Array();
for (var x= 0; x < 3; x++) {
if(x==0){
json[DEFECT_CNAME[j]][i][x] = PRODUCE_TIME[i];
}else{
json[DEFECT_CNAME[j]][i][x] = 0;
}
}
}
}
console.time('time');
var j=0;
for(var i=0;i<list.length;i++){
//遍历查询结果list集
if(list[i][mapPojo.PRODUCE_TIME.pos].substr(0,timecount)==PRODUCE_TIME[j]){
//相同时间跨度的不同区域数据处理 缺陷个数和面积
for(var X=0;X<DEFECT_CNAME.length;X++){
if(DEFECT_CNAME[X]==list[i][mapPojo.DEFECT_CNAME.pos]){
//同时间段同名数据
count = json[DEFECT_CNAME[X]][j][1];
count+=parseInt(list[i][mapPojo.DEFECT_COUNT.pos]);
json[DEFECT_CNAME[X]][j][1]=count;
count = json[DEFECT_CNAME[X]][j][2];
count+=parseFloat(list[i][mapPojo.DEFECT_AREA.pos]);
json[DEFECT_CNAME[X]][j][2]=count;
break;
}
}
}
else{
j++;}
}
console.timeEnd('time');
var series=[];
for(var i = 0;i<DEFECT_CNAME.length;i++){
series.push({
name: DEFECT_CNAME[i],
type: 'line',
smooth: true,
data: json[DEFECT_CNAME[i]]
});
}
オプションのテストコード：
option = {
tooltip : {
trigger: 'axis',
formatter(params){
for(x in params){
}
}
}
}
ブラウザのテスト結果を図に示します。
成功はoption.tooltip.formatteで操作できます。
次に、次のコードを記述してデータをタイプセットします。
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: function (params, ticket, callback) {
var showHtm="";
for(x in params){
showHtm+=params[x].seriesName +"缺陷个数："+params[x].data[1]+"缺陷面积："+params[x].data[2]+'<br>';
}
return showHtm;
}
},
実装効果を図に示します
。3時間悩んでいた問題がようやく解決しました。不幸は偽物のハハハ
です。開発を行うのに最も幸せな時期はニーズを解決する時期です。
ハッピー！！