循环多个散点图

已于 2022-02-20 18:12:29 修改
阅读量632 收藏
点赞数
分类专栏： Echarts Angular 文章标签： typescript javascript 前端
于 2022-01-26 15:20:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvxinaidou/article/details/122702734
版权

markline & max min yAsix

import { Component, OnInit } from '@angular/core';
import { WelcomeService } from './services/welcome.service';
import * as _ from 'lodash';
import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
import * as echarts from 'echarts';
import { HttpClient } from '@angular/common/http';
import { cloneDeep } from 'lodash';
import { saveAs } from 'file-saver';



interface TreeNodes {
  title: string;
  key: string;
  expanded?: boolean;
  children?: Array<TreeNodes>;
  isLeaf?:boolean;
}
export interface TableColumn {
  level1: string;
  level2: string;
  level3: string; 
  level4: string; 
  level5: string; 
  level6: string;
  level7: string;
  level8: string;
  rowspan0?:number;
  rowspan1?:number;
  rowspan2?:number;
  rowspan3?:number;
  rowspan4?:number;
  isWarning?: any;
}
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.less']
})
export class WelcomeComponent implements OnInit{

  public myTreeChart: any;
  public treeCharts: any[] = [];
  public chartNames: Array<string> = [];
  public nodeValueByTime:Array<any>= [];
  public optionsData:any = {};
  public nodes:Array<TreeNodes> = [];
  defaultExpandedKeys:Array<string> = [];
  defaultCheckedKeys: Array<string> = [];
  public startTime:any = new Date(new Date().getTime() - 60*60*24*6*1000);
  public endTime:any = new Date(new Date().getTime() - 60*60*24*1000);
  date = [this.startTime, this.endTime];
  public keyIndex:number = 0;
  public tempEquipmentSelectionList: Array<any> =  ['机台1', '机台2']
  public colors: Array<string> = ['#d223e7', '#4962FC', '#4962FC', '#18D070', '#3F77FE', '#01C2F9', '#4962FC', '#4B7CF3' , '#dd3ee5', '#12e78c', '#fe8104', '#01C2F9', '#F4CB29', '#FD9E06']

  constructor(
    private welcomeService: WelcomeService,
    private http: HttpClient
    ) { }    
  ngOnInit() {
    // 获取树型列表
    this.getTreeLists();
    //  this.getTableData();
  }
    tableViewData:any = [];
  getTableData() {
    this.http.get('../assets/jsons/test.json').subscribe((data:any) => {
    this.transferTableData(data.table, data.merge);
    });
  }
  transferTableData(table:any, merge:any) {
    let tableArray:Array<TableColumn> = [];
    table.forEach((item: any) => {
      const keysArr =  Object.keys(item);
      tableArray.push({
        level1: item[keysArr[0]],
        level2: item[keysArr[1]],
        level3: item[keysArr[2]],
        level4: item[keysArr[3]],
        level5: item[keysArr[4]],
        level6: item[keysArr[5]],
        level7: item[keysArr[6]],
        level8: item[keysArr[7]],
        isWarning: true
      });
    });
    merge.forEach((item:any) => {
      const rowspanData = item.endRow - item.startRow +  1;
      if (item.startCol === 4 && item.endCol === 4) {
        tableArray[item.startRow].rowspan4 = rowspanData;
      } else if(item.startCol === 3 && item.endCol === 3) {
        tableArray[item.startRow].rowspan3 = rowspanData;
      } else if(item.startCol === 2 && item.endCol === 2) {
        tableArray[item.startRow].rowspan2 = rowspanData;
      } else if(item.startCol === 1 && item.endCol === 1) {
        tableArray[item.startRow].rowspan1 = rowspanData;
      } else if(item.startCol === 0 && item.endCol === 0) {
        tableArray[item.startRow].rowspan0 = rowspanData;
        this.tableViewData.push(cloneDeep(tableArray).splice(item.startRow, rowspanData));
      }
    });
    console.log( this.tableViewData);
  }
  public showMarkLineStatus: boolean = false;
  showMarkLine() : void {
    this.showMarkLineStatus = !this.showMarkLineStatus;
    console.log(this.showMarkLineStatus);
    this.getEchartOptions();
    setTimeout(() => {
      this.initCharts(this.nodeValueByTime);
    },0);
  }
  initValue(): void {
    this.defaultExpandedKeys = [];
    this.defaultCheckedKeys = [];
    this.chartNames = [];
    this.treeCharts = [];
  }
  getTreeLists() {
    this.welcomeService.getTreesList().subscribe((res:any) => {
      this.nodes = res;
      this.defaultExpandedKeys = []; // init value
      this.defaultCheckedKeys = []; // init value
      this.addTreeKey(this.nodes);
      this.getDefaultKkeys(this.nodes[0]); 
      this.defaultCheckedKeys = [this.nodes[0].key]; 
       // 获取不同时间段节点的数据    
      this.getNodeValueByTime();
    });
  }

  addTreeKey(nodes:any) {
    nodes.forEach(((item:any) => {
      item.key = this.keyIndex++;
      if (item?.children) {
        item?.children.forEach((e:any) => {
          e.key = this.keyIndex++;
          this.addTreeKey((e?.children || []));
        })
      }
    }))
  }
  getDefaultKkeys(currentNode:any) {
    if(currentNode) {
      currentNode.checked = true;
    }
    if (currentNode?.children) {
      this.defaultExpandedKeys.push(currentNode.key);
      currentNode?.children.forEach((item:any) => {
        item.checked = true;
        this.getDefaultKkeys(item);
      })
    }
  }

  getNodeValueByTime() {
    // console.log(this.nodes);
    const [startTime, endTime]=[this.startTime.getTime(), this.endTime.getTime()]
    // this.initValue();
    this.welcomeService.getNodeValueByTime(this.nodes, startTime, endTime, this.tempEquipmentSelectionList).subscribe((res:any) => {
      this.nodeValueByTime = res;
      console.log(this.nodeValueByTime)
      this.getEchartOptions();
      setTimeout(() => {
        this.initCharts(this.nodeValueByTime);
        // console.log(this.nodeValueByTime);
      },0)
    });
  }

  initCharts(data:any) {
    this.treeCharts = []; // init value
    data.forEach((item:any, index:number) => {
      const className = `.diagram${index}`;
      // console.log(className);
      this.treeCharts.push({index: index,chartNames: this.chartNames[index], chart: echarts.init(document.querySelector(className) as any)})
    });
    this.nodeValueByTime.forEach((item:any,index: number) => {
      console.log(this.treeCharts[index]);
      this.setEchartOptions(this.treeCharts[index].chart, index);
    });
  }
  getEchartOptions() {
    let options:any = {
      seriesData: [],
      legendData:[],
      xAxisData: [],
      keyTexts: [],
      sDatasss:[],
      maxValues:[],
      minValues: []
    }
    this.chartNames = [];  // init value
    this.nodeValueByTime.forEach((item:any, index:number) => {
      let sDatas:any = [];
      let xDatas:any = [];
      let lDatas:any = [];
      let sDatass: any = [];
      let maxData:any = [];
      let minData:any = [];

      this.chartNames.push(item.nodeName);
      options.keyTexts.push(item.nodeName);
      if(item.max) {
        maxData.push(item.max);
      } 
      if(item.min){
         minData.push(item.min)
      }
      item.nodeValues.forEach((node:any, index: number) => {
        lDatas.push(node.equipment);
        let sDatasTemp:any = [];
        node.value.forEach((v:any) => {
          xDatas.push(this.transferStingDate(v.date)),
          v.points.forEach((p:any) => {
            sDatasTemp.push([this.transferStingDate(p.time), p.value]);
            sDatass.push(p.value);
            if (p.value) {
              maxData.push(p.value);
              minData.push(p.value);
            }
            const sDatasObj = {
              name:node.equipment,
              itemStyle: {
                color: this.colors[index],
                borderColor: '#f00',
                borderWidth:5
              }, 
              type: 'scatter',
              symbolSize: 20,
              data: [[this.transferStingDate(p.time), p.value]],
            }
            const marklineOjb = {
              symbol: 'none',
              lineStyle:{type:'solid',color:'red'},
              data:[
                  {name:'top',yAxis:2},
                  {name:'bottom',yAxis: -10}
              ]
            }
            if (this.showMarkLineStatus) {
              sDatas.push(Object.assign(cloneDeep(sDatasObj), {
                markLine:marklineOjb
              }))
            } else {
              sDatas.push(sDatasObj);
            }
            // sDatas.push({
            //   name:node.equipment,
            //   itemStyle: {
            //     color: this.colors[index],
            //     borderColor: '#f00',
            //     borderWidth:5
            //   }, 
            //   type: 'scatter',
            //   symbolSize: 20,
            //   data: [[this.transferStingDate(p.time), p.value]],
            //   markLine: {
            //     symbol: 'none',
            //     lineStyle:{type:'solid',color:'red'},
            //     data:[
            //         {name:'top',yAxis:-10},
            //         {name:'bottom',yAxis: 2}
            //     ]
            //   }
            // })
          });
        })
       
        // sDatas.push({name:node.equipment, type: 'scatter', symbolSize: 20, data: sDatasTemp})
        
      });
   
      options.seriesData.push(sDatas);
      options.xAxisData.push([...new Set(xDatas)]);
      options.legendData.push(lDatas);
      options.sDatasss.push(sDatass);
      options.maxValues.push(maxData);
      options.minValues.push(minData);
      
    });
    if (this.showMarkLineStatus) {
      options.seriesData.forEach((sItem:any, index: number) => {
        let maxV:any = Math.max.apply(null,options.maxValues[index].map(Number));
        let minV:any = Math.min.apply(null,options.minValues[index].map(Number));
        sItem.forEach((currentSeries:any) => {
          console.log(currentSeries);
          currentSeries.markLine.data[0].yAxis = this.nodeValueByTime[index].max?this.nodeValueByTime[index].max:'none';
          currentSeries.markLine.data[1].yAxis = this.nodeValueByTime[index].min?this.nodeValueByTime[index].min:'none';;
         
        })
        this.yAxisMax.push(maxV);
        this.yAxisMin.push(minV);
      })
      // console.log(options.seriesData);
      // console.log(this.yAxisMax);
      // console.log(this.yAxisMin);
    } 
    this.optionsData = options;
    // console.log(this.optionsData);
    // console.log(this.optionsData.sDatasss);
    // console.log(this.optionsData.maxValues);
    // console.log(this.optionsData.minValues);
   
  }
  public yAxisMax: Array<number> = [];
  public yAxisMin:  Array<number> = [];

  setEchartOptions(myTreeChart:any, index:number){
    let yMax:number | null, yMin:number | null;
    if(this.yAxisMax[index] && this.yAxisMin[index] && this.showMarkLineStatus) {
      yMax = this.yAxisMax[index] + (this.yAxisMax[index]-this.yAxisMin[index])/2;
      yMin = this.yAxisMin[index] - (this.yAxisMax[index]-this.yAxisMin[index])/2;
      // yMax = this.yAxisMax[index];
      // yMin = this.yAxisMin[index];
    } else {
      yMax = null;
      yMin = null;
    }
    if(typeof yMax === 'number') {
      yMax = parseInt(yMax.toString(), 10)
    }
    if(typeof yMin === 'number') {
      yMin = parseInt(yMin.toString(), 10)
    }
    myTreeChart.showLoading();
    let setOptionData = {
      key: {
        text: this.optionsData.keyTexts[index]
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: this.optionsData.legendData[index],
        itemStyle: {
          borderColor: 'none'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        name: '日期',
        nameLocation: 'end',
        axisTick: { alignWithLabel: true },
        axisLine: { symbol: ['none', 'arrow'], symbolOffset: 10, symbolSize: [6, 15], onZero: true },
        data: this.optionsData.xAxisData[index]
      },
      yAxis: {
        type: 'value',
        grid: { top: '200' },
        axisLine: { symbol: ['none', 'arrow'], show: true, symbolOffset: 10, symbolSize: [6, 15], onZero: true },
        max: yMax,
        min: yMin
      },
      series: this.optionsData.seriesData[index],
      graphic: {
        type: 'text', // 类型：文本
        left: 'center',
        top: 'middle',
        silent: true, // 不响应事件
        invisible: this.optionsData.sDatasss[index].every((item:any)=>{return item!==""}), // 有数据就隐藏
        style: {
          fill: '#9d9d9d',
          fontWeight: 'bold',
          text: '暂无数据',
          fontFamily: 'Microsoft YaHei',
          fontSize: '25px'
        }
      }
      
    }
    console.log(setOptionData);
    myTreeChart.clear();
    myTreeChart.setOption(setOptionData);
    myTreeChart.hideLoading();
  }
  downloadImage() {
    const canvasLists = document.querySelectorAll('canvas');
    console.log(canvasLists);
    if (canvasLists && canvasLists.length) {
      const mainCanvas = document.createElement('canvas');
      const mcContext = mainCanvas.getContext('2d');
      if (mcContext) {
        mainCanvas.width = 1500;
        mainCanvas.height = 500 * canvasLists.length;
        mcContext.fillStyle = 'white';
        mcContext.fillRect(0, 0 , mainCanvas.width, mainCanvas.height);
       (canvasLists || []).forEach((item:any, index: number) => {
         let row  = index;
         let column = 0;
         mcContext.drawImage(item, column * 600 + 50, row * 400 + 100);
       })
       let url = mainCanvas.toDataURL('image/png');
       let a = document.createElement('a');
       a.download = 'test图表截图';
       a.href = url;
       a.click();
      }
    }
  }
  
  nzEvent(event: NzFormatEmitEvent): void {
    // console.log(this.nodes);
    this.getNodeValueByTime();
   
  }
  onChange(result: Date[]): void {
    [this.startTime, this.endTime]=[...this.date];
    this.getNodeValueByTime();
  }
  transferStingDate(timestamp:any) {
    let date = new Date(timestamp);
    return `${date.getFullYear()}-${(date.getMonth() + 1 )}-${date.getDate()}`
  }
 
}

tree.json

[
  {
    "title": "Ws基准版本",
    "children": [
      { 
        "title": "EMBMWA-C1",

         "children": [
          { 
            "title": "RA1",
            "children": [
              { "title": "Rot", "isLeaf": true },
              { "title": "Mag", "isLeaf": true }
            ]
          },
          { 
            "title": "RA2",
            "children": [
              { "title": "Trans X", "isLeaf": true },
              { "title": "Rot",  "isLeaf": true },
              { "title": "Mag",  "isLeaf": true }
            ]
          },
          { 
            "title": "IS",
            "children": [
              { "title": "Trans X", "isLeaf": true },
              { "title": "Rot",  "isLeaf": true },
              { "title": "Mag", "isLeaf": true }
            ]
          }
      
        ]
      }
     
    ]
  },
    {
      "title": "环境稳定性检查",
      "children": [
        {
          "title": "从ctlog中提取下面测试项",
          "children": [
            { "title": "Plans_ref", "isLeaf": true },
            { "title": "Thens", "isLeaf": true }
          ]
        }
      ]
    }
 
  ]

查询值json

[
    {
        "nodeName": "Rot",
        "nodeValues": [
            {
                "equipment": "mot-008",
                "value": [
                    {
                        "date": 1640966400000,
                        "points": [
                            {
                                "time": 1640988007000,
                                "value": "0.98"
                            },
                            {
                                "time": 1640995209000,
                                "value": "0.38"
                            }
                        ]
                       
                    },
                    {
                        "date": 1641052800000,
                        "points": [
                            {
                                "time": 1641070809000,
                                "value": "1.98"
                            },
                            {
                                "time": 1641078008000,
                                "value": "2.38"
                            },
                            {
                                "time": 1641085207000,
                                "value": "3.48"
                            }
                
                        ]
                       
                    },
                    {
                        "date": 1641139200000,
                        "points": [
                            {
                                "time": 1641175200000,
                                "value": "2.98"
                            },
                            {
                                "time": 1641168000000,
                                "value": "4.38"
                            }
                
                        ]
                       
                    },
                    {
                        "date": 1641254400000,
                        "points": [
                            {
                                "time": 1641254400000,
                                "value": "4.98"
                            },
                            {
                                "time": 1641261600000,
                                "value": "5.38"
                            }
                
                        ]
                       
                    },
                    {
                        "date": 1641348000000,
                        "points": [
                            {
                                "time": 1641348000000,
                                "value": "6.98"
                            },
                            {
                                "time": 1641344400000,
                                "value": "7.38"
                            }
                
                        ]
                       
                    }
                    
                ]

            },
            {
                "equipment": "mot-009",
                "value": [
                    {
                        "date": 1640966400000,
                        "points": [
                            {
                                "time": 1640988007000,
                                "value": "0.98"
                            },
                            {
                                "time":1640995209000,
                                "value": "0.38"
                            },
                            {
                                "time": 1641002402000,
                                "value": "0.48"
                            }, 
                            {
                                "time": 1641009604000,
                                "value": "0.58"
                            }
                        ]
                       
                    },
                    {
                        "date": 1641052800000,
                        "points": [
                            {
                                "time": 1641070809000,
                                "value": "0.98"
                            },
                            {
                                "time": 1641078008000,
                                "value": "0.38"
                            },
                            {
                                "time": 1641085207000,
                                "value": "0.48"
                            }
                
                        ]
                       
                    }
                ]

            }
        ]
    },
    {
        "nodeName": "Mot",
        "nodeValues": [
            {
                "equipment": "mot-008",
                "value": [
                    {
                        "date": 1640966400000,
                        "points": [
                            {
                                "time": 1640988007000,
                                "value": "0.98"
                            },
                            {
                                "time": 1640995209000,
                                "value": "0.38"
                            }
                        ]
                       
                    },
                    {
                        "date": 1641052800000,
                        "points": [
                            {
                                "time": 1641070809000,
                                "value": "1.98"
                            },
                            {
                                "time": 1641078008000,
                                "value": "2.38"
                            },
                            {
                                "time": 1641085207000,
                                "value": "3.48"
                            }
                
                        ]
                       
                    },
                    {
                        "date": 1641139200000,
                        "points": [
                            {
                                "time": 1641175200000,
                                "value": "2.98"
                            },
                            {
                                "time": 1641168000000,
                                "value": "4.38"
                            }
                
                        ]
                       
                    },
                    {
                        "date": 1641254400000,
                        "points": [
                            {
                                "time": 1641254400000,
                                "value": "4.98"
                            },
                            {
                                "time": 1641261600000,
                                "value": "5.38"
                            }
                
                        ]
                       
                    },
                    {
                        "date": 1641348000000,
                        "points": [
                            {
                                "time": 1641348000000,
                                "value": "6.98"
                            },
                            {
                                "time": 1641344400000,
                                "value": "7.38"
                            }
                
                        ]
                       
                    }
                    
                ]

            },
            {
                "equipment": "mot-009",
                "value": [
                    {
                        "date": 1640966400000,
                        "points": [
                            {
                                "time": 1640988007000,
                                "value": "0.98"
                            },
                            {
                                "time":1640995209000,
                                "value": "0.38"
                            },
                            {
                                "time": 1641002402000,
                                "value": "0.48"
                            }, 
                            {
                                "time": 1641009604000,
                                "value": "0.58"
                            }
                        ]
                       
                    },
                    {
                        "date": 1641052800000,
                        "points": [
                            {
                                "time": 1641070809000,
                                "value": "0.98"
                            },
                            {
                                "time": 1641078008000,
                                "value": "0.38"
                            },
                            {
                                "time": 1641085207000,
                                "value": "0.48"
                            }
                
                        ]
                       
                    }
                ]

            }
        ]
      
    }
]

html

<section class="welcome-page">
  <div>
    <nz-range-picker [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker>
  </div>

  <span class="tree">
    <nz-tree
    [nzData]="nodes"
    nzCheckable
    nzMultiple
    (nzCheckBoxChange)="nzEvent($event)"
    [nzExpandedKeys]="defaultExpandedKeys"
    [nzCheckedKeys]="defaultCheckedKeys"
      ></nz-tree>
  </span>
  <span *ngFor="let echartItem of chartNames; let i = index;" class="{{'diagram'+ ' ' + 'diagram' + i}}"></span>
  <div>
   
  </div>
</section>

ts

import { Component, OnInit } from '@angular/core';
import { WelcomeService } from './services/welcome.service';
import * as _ from 'lodash';
import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
import * as echarts from 'echarts';
import { HttpClient } from '@angular/common/http';

interface TreeNodes {
  title: string;
  key: string;
  expanded?: boolean;
  children?: Array<TreeNodes>;
  isLeaf?:boolean;
}
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.less']
})
export class WelcomeComponent implements OnInit{

  public myTreeChart: any;
  public treeCharts: any[] = [];
  public chartNames: Array<string> = [];
  public nodeValueByTime = [];
  public optionsData:any = {};
  public nodes:Array<TreeNodes> = [];
  defaultExpandedKeys:Array<string> = [];
  defaultCheckedKeys: Array<string> = [];
  public startTime:any = new Date(new Date().getTime() - 60*60*24*6*1000);
  public endTime:any = new Date(new Date().getTime() - 60*60*24*1000);
  date = [this.startTime, this.endTime];
  public keyIndex:number = 0;
  public tempEquipmentSelectionList: Array<any> =  ['机台1', '机台2']

  constructor(
    private welcomeService: WelcomeService,
    private http: HttpClient
    ) { }
  ngOnInit() {
    // 获取树型列表
    this.getTreeLists();
  }
  initValue() {
    this.defaultExpandedKeys = [];
    this.defaultCheckedKeys = [];
    this.chartNames = [];
    this.treeCharts = [];
  }
  getTreeLists() {
    this.welcomeService.getTreesList().subscribe((res:any) => {
      this.nodes = res;
      this.defaultExpandedKeys = []; // init value
      this.defaultCheckedKeys = []; // init value
      this.addTreeKey(this.nodes);
      this.getDefaultKkeys(this.nodes[0]); 
      this.defaultCheckedKeys = [this.nodes[0].key]; 
       // 获取不同时间段节点的数据    
      this.getNodeValueByTime();
    });
  }

  addTreeKey(nodes:any) {
    nodes.forEach(((item:any) => {
      item.key = this.keyIndex++;
      if (item?.children) {
        item?.children.forEach((e:any) => {
          e.key = this.keyIndex++;
          this.addTreeKey((e?.children || []));
        })
      }
    }))
  }
  getDefaultKkeys(currentNode:any) {
    if (currentNode?.children) {
      this.defaultExpandedKeys.push(currentNode.key);
      currentNode?.children.forEach((item:any) => {
        this.getDefaultKkeys(item);
      })
    }
  }

  getNodeValueByTime() {
    console.log(this.nodes);
    const [startTime, endTime]=[this.startTime.getTime(), this.endTime.getTime()]
    // this.initValue();
    this.welcomeService.getNodeValueByTime(this.nodes, startTime, endTime, this.tempEquipmentSelectionList).subscribe((res:any) => {
      this.nodeValueByTime = res;
      console.log(this.nodeValueByTime)
      this.getEchartOptions();
      setTimeout(() => {
        this.initCharts(this.nodeValueByTime);
        console.log(this.nodeValueByTime);
      },0)
    });
  }

  initCharts(data:any) {
    this.treeCharts = []; // init value
    data.forEach((item:any, index:number) => {
      const className = `.diagram${index}`;
      console.log(className);
      this.treeCharts.push({index: index,chartNames: this.chartNames[index], chart: echarts.init(document.querySelector(className) as any)})
    });
    this.nodeValueByTime.forEach((item:any,index: number) => {
      this.setEchartOptions(this.treeCharts[index].chart, index);
    });
  }
  getEchartOptions() {
    let options:any = {
      seriesData: [],
      legendData:[],
      xAxisData: [],
      keyTexts: [],
    }
    this.chartNames = [];  // init value
    this.nodeValueByTime.forEach((item:any, index:number) => {
      let sDatas:any = [];
      let xDatas:any = [];
      let lDatas:any = [];
      this.chartNames.push(item.nodeName);
      options.keyTexts.push(item.nodeName);
      item.nodeValues.forEach((node:any) => {
        lDatas.push(node.equipment);
        let sDatasTemp:any = [];
        node.value.forEach((v:any) => {
          xDatas.push(this.transferStingDate(v.date)),
          v.points.forEach((p:any) => {
            sDatasTemp.push([this.transferStingDate(p.time), p.value]);
          });
        })
        sDatas.push({name:node.equipment, type: 'scatter', symbolSize: 20, data: sDatasTemp})
      });
      options.seriesData.push(sDatas);
      options.xAxisData.push([...new Set(xDatas)]);
      options.legendData.push(lDatas);
      
    });
    this.optionsData = options;
    console.log(this.optionsData);
  }
  setEchartOptions(myTreeChart:any, index:number){
    myTreeChart.showLoading();
    let setOptionData = {
      key: {
        text: this.optionsData.keyTexts[index]
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: this.optionsData.legendData[index]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        name: '日期',
        nameLocation: 'end',
        axisTick: { alignWithLabel: true },
        axisLine: { symbol: ['none', 'arrow'], symbolOffset: 10, symbolSize: [6, 15], onZero: true },
        data: this.optionsData.xAxisData[index]
      },
      yAxis: {
        type: 'value',
        grid: { top: '200' },
        axisLine: { symbol: ['none', 'arrow'], show: true, symbolOffset: 10, symbolSize: [6, 15], onZero: true },
      },
      series: this.optionsData.seriesData[index]
    }
    console.log(setOptionData);
    myTreeChart.setOption(setOptionData);
    myTreeChart.hideLoading();
  }
  
  nzEvent(event: NzFormatEmitEvent): void {
    console.log(this.nodes);
    this.getNodeValueByTime();
   
  }
  onChange(result: Date[]): void {
    [this.startTime, this.endTime]=[...this.date];
    this.getNodeValueByTime();
  }
  transferStingDate(timestamp:any) {
    let date = new Date(timestamp);
    return `${date.getFullYear()}-${(date.getMonth() + 1 )}-${date.getDate()}`
  }
 
}

servcies

getNodeValueByTime(nodes:Array<any>, startTime:any, endTime:any, tempEquipmentSelectionList: Array<any>) {
  const params = {
      startTime: startTime,
      endTime: endTime,
      nodes: nodes,
      tempEquipmentSelectionList:tempEquipmentSelectionList
  }
  console.log(params);

  //  let url = `${environment.ASSETS_URL}/${WelcomeConstant.NODE_VALUE_BY_TIME}`
   let url = `${environment.ASSETS_URL}/${WelcomeConstant.NODE_VLAUE_BY_TIMETAP}`
   
   return this.http.get(url)
  // return this.http.post(url, params)
  .pipe(
    catchError((error => {return throwError({errorMessage: 'test error http'})}))
    )
}
getTreesList() {
  let url = `${environment.ASSETS_URL}/${WelcomeConstant.TREE_LIST}`
 return this.http.get(url)
 .pipe(
   catchError((error => {return throwError({errorMessage: 'test error http'})}))
   )
}

运行效果：
在这里插入图片描述
批量下载echarts图

downloadImage() {
    const canvasLists = document.querySelectorAll('canvas');
    console.log(canvasLists);
    if (canvasLists && canvasLists.length) {
      const mainCanvas = document.createElement('canvas');
      const mcContext = mainCanvas.getContext('2d');
      if (mcContext) {
        mainCanvas.width = 1500;
        mainCanvas.height = 500 * canvasLists.length;
        mcContext.fillStyle = 'white';
        mcContext.fillRect(0, 0 , mainCanvas.width, mainCanvas.height);
       (canvasLists || []).forEach((item:any, index: number) => {
         let row  = index;
         let column = 0;
         mcContext.drawImage(item, column * 600 + 50, row * 400 + 100);
       })
       let url = mainCanvas.toDataURL('image/png');
       let a = document.createElement('a');
       a.download = 'test图表截图';
       a.href = url;
       a.click();
      }
    }
  }
lvxinaidou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts动态加载多条折线图的实现代码
10-16
主要介绍了Echarts动态加载多条折线图的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
echarts散点图实现轮播
童童童彤
08-27 2256
为了让echarts散点图中每个点实现轮播，散点高亮（highLight）+显示提示框（showTip），具体的去看我上一篇写到的 echarts API action 之 dispatchAction 吧。 现在来写一下echarts散点图中每个点实现轮播，首先来屡一下思路： 第一，需要一个定时器，每隔5秒执行一遍，还需要定义一个count计数器，当count值等于数据数组的长度时，让count等于0，重新轮播散点 先执行一遍downplay取消所有高亮指定的数据图形，再给当前第count个散点指定hig
Echarts基础(一)：散点图
热门推荐
weiweitb8的博客
10-10 3万+
一 Echarts制作散点图 Echarts的使用：首先需要设定一个div用来承载图表，然后初始化echarts实例。将所有的数据与配置写在option中，需要设置的几部分内容为： 一）backgroundColor：背景颜色，可设置为某一个固定的背景颜色，也可设置为渐变的背景颜色，如下:(参数为x轴，y轴，z轴位置) backgroundColor: new echarts. graphi
Echarts之散点图
qq_37881565的博客
03-16 8052
根据Echarts画出散点图 option = { dataset: { dimensions:['dept','age'],//设置x轴和y轴的数据 source:[ {dept:'法务部',age:'0-10',num:'10'}, {dept:'财务部',age:'10-20',num:'20'}, {dept:'商务部',age:'20-30',num:'30'}, {dept:'计划部',age:'30-40',num:'10'}
Echarts数据可视化series-line线图，开发全解+完美注释
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-07 2万+
mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans-serif", //字体系列
在Vue 中实现循环渲染多个相同echarts图表
10-15
主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts图表柱状图折线图动态轮播tooltip窗
08-12
引入该包，在 myChart.setOption(option)注册表后，调用该方法 tools.loopShowTooltip(myChart, option, { loopSeries: true }) 注：myChart为echarts实例，option为该表配置。配置中必须要有tooltip的配置才可生效
Jpgraph创建统计图（案例 PDF）
11-27
Jpgraph 统计图 饼状图 柱状图 折线图
antdesign 地图_React 使用recharts实现散点地图的示例代码
weixin_35820008的博客
01-14 569
一、前端框架react+ant design UI二、首先安装rechartsnpm install recharts或者yarn add recharts三、引入插件及chinaJSON.js(里面有经纬度信息)由于项目需要我是全部存数据库的，因为也需要自己添加，下面附一份儿全国省市县经纬度数据import React,{Component} from 'react';import {messa...
angularJs2使用eCharts，折线散点组合图
Echarts折线图的平移假动画
05-30 582
option = { title: { x: 'center', y: 0 }, tooltip:{ position:'inside', formatter: function(params) { if(params.value[1] == undefined){ console.log...
python绘制多个散点图_如何利用python把多个散点图画在一张图上：一个案例
weixin_39527487的博客
11-20 8906
如果你想做很多个散点图，却又不想使用Excel一个一个地画，一张一张图调整。那么你可以考虑使用Python。首先，需要安装并启动anaconda3，过程略。开始写代码了。01基本库的导入，以及为避免后续问题和提前做的设定，包括中文乱码问题的解决，负号的正常显示、让图形显示为矢量图：#导入基本库import numpy as npimport pandas as pdimport matplotli...
python绘图基础—scatter散点图用循环分类法加图例
xiaobaicai4552的博客
01-15 1万+
import matplotlib.pyplot as plt import kNN plt.rcParams['font.sans-serif']=['Simhei'] plt.rcParams['axes.unicode_minus']=False datingDataMat, datingLabels = kNN.file2matrix('datingTestSet2.txt') pl
python 绘制 多个 散点图_Python-matplotlib 另类散点图绘制02
weixin_36198878的博客
01-24 3498
01. 引言这篇推文还是python-matplotlib 散点图的绘制过程，涉及到的内容主要包括matplotlib ax.scatter()、hlines()、vlines()、text()、添加小图片和定制化散点图图例样式等。前期的数据处理部分还是pandas、numpy库的灵活 应用(这里主要涉及可视化的设置，数据处理、分析部分后期会专门开设专辑进行教程讲解。当然大家有不理解地方可以后台和...
python用for循环画多个图形_在for循环中绘制散点图，只生成一个图：Python
weixin_39774445的博客
11-24 1551
我只想生成一个图形，其中包含在for循环中生成的所有散点图，当然还要在循环中的每次迭代之间更改颜色。这是我目前的密码。它确实单独绘制每个散点图，但我想同时显示所有曲线。感谢您的帮助！import sysimport getoptimport osimport numpy as npimport pandas as pdimport datetimeimport matplotlib.dates a...
Python 利用循环画散点图
weixin_30287169的博客
12-10 1646
1 import pandas as pd 2 data = pd.read_csv('D:/suning/iris.csv') 3 data = data.iloc[:,1:] 4 5 ###2维散点图 6 import matplotlib.pyplot as plt 7 8 k=[ 9 'Sepal.Length', 10 'Sepal....
循环语句打印图形
m0_46287987的博客
02-09 1225
循环语句打印图形要根据打印图形进行判断，循环条件，双层循环需要几个循环，需要分为几部分。下面是两个例子。 1英文字符打印菱形 如 我把图形分为两部分（n-2）+1 为上部分 余者为下部分。 第一层循环变量为 i 上部分需要考虑前面的空格 分别为 3 -> 2 -> 1 为 (n / 2)- i -1 定义一个字符变量 c 用于保存打印的字符 每一行打印的字符分别为 1 ...
python学习——利用循环实现分类散点图绘制
weixin_30821731的博客
06-04 378
数据示例 代码实例 1 #!/usr/bin/env python 2 # -*- coding: utf-8 -*- 3 # 绘制分类散点图 4 5 import os 6 import argparse 7 import csv 8 import pandas as pd 9 import numpy as np 10 import matpl...
c语言循环输出图案*方法 笨人必看
kingtok的博客
06-22 2万+
搞一下题2019.6.22 1.在屏幕上输出以下图案： * *** ***** ******* ********* *********** ************* *********** ********* ******* ***** *** * 分析 首先得确定输出的图案有没有规律，很明显看出来是有的，第一行输出一个 * 第二行输出3个 *...
折线图series循环出错
最新发布
07-27
折线图的series循环出错可能有多种原因，根据提供的引用内容，我无法确定具体的错误原因。但是我可以给出一些常见的错误原因和解决方法。 1. 数据格式错误：在循环series时，确保数据格式正确。根据引用\[2\]中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值