echarts使用

Posted 2021-02-03 l8l8

import React,{ PureComponent } from ‘react‘;
// import { routerRedux } from ‘dva/router‘;
import { connect } from ‘dva‘;
import ReactEcharts from ‘echarts-for-react‘;
// import echarts from ‘echarts/lib/echarts‘;
// import G6 from ‘@ali/g6‘;
import { Graph } from ‘g6-for-react‘;

@connect(({ performancetesting }) => {
  return performancetesting;
})

export default class Performancetesting extends PureComponent {
   componentDidMount() {
    // const data = {
    //     "nodes": [
    //       {
    //         "x": 140,
    //         "y": 210,
    //         "id": "node1"
    //       },
    //       {
    //         "x": 270,
    //         "y": 210,
    //         "id": "node2"
    //       }
    //     ],
    //     "edges": [
    //       {
    //         "source": "node1",
    //         "id": "edge1",
    //         "target": "node2"
    //       }
    //     ]
    //   };
    // const net = new G6.Net({
    //     id: ‘c1‘,      // 容器ID
    //     width: 500,    // 画布宽
    //     height: 500    // 画布高
    //   });
    //   net.source(data.nodes, data.edges);
    //   net.render();
   }  

  getG6Demo = () => {
    const data = {
        "nodes": [
          {
            "x": 140,
            "y": 210,
            "id": "node1"
          },
          {
            "x": 270,
            "y": 210,
            "id": "node2",
            style: {               // 关键形样式（优先级高于color）
                fill: ‘red‘,
                stroke: ‘blue‘
              },  
          }
        ],
        "edges": [
          {
            "source": "node1",
            "id": "edge1",
            "target": "node2"
          }
        ]
      };
    return <Graph fitView=‘cc‘ data={data} height={500} animate />
  }

  G2Demo = () => {
    const data = [
        { type: ‘序列1‘, year: ‘1991‘, value: 3 },
        { type: ‘序列1‘, year: ‘1992‘, value: 4 },
        { type: ‘序列1‘, year: ‘1993‘, value: 3.5 },
        { type: ‘序列1‘, year: ‘1994‘, value: 5 },
        { type: ‘序列1‘, year: ‘1995‘, value: 4.9 },
        { type: ‘序列1‘, year: ‘1996‘, value: 6 },
        { type: ‘序列1‘, year: ‘1997‘, value: 7 },
        { type: ‘序列1‘, year: ‘1998‘, value: 9 },
        { type: ‘序列1‘, year: ‘1999‘, value: 13 },
        { type: ‘序列2‘, year: ‘1991‘, value: 6 },
        { type: ‘序列2‘, year: ‘1992‘, value: 8 },
        { type: ‘序列2‘, year: ‘1993‘, value: 5.5 },
        { type: ‘序列2‘, year: ‘1994‘, value: 7 },
        { type: ‘序列2‘, year: ‘1995‘, value: 9.9 },
        { type: ‘序列2‘, year: ‘1996‘, value: 6 },
        { type: ‘序列2‘, year: ‘1997‘, value: 5 },
        { type: ‘序列2‘, year: ‘2000‘, value: 10 },
        { type: ‘序列2‘, year: ‘1999‘, value: 19 },
        { type: ‘序列3‘, year: ‘1991‘, value: 2 },
        { type: ‘序列3‘, year: ‘1992‘, value: 6 },
        { type: ‘序列3‘, year: ‘1993‘, value: 9 },
        { type: ‘序列3‘, year: ‘1994‘, value: 10 },
        { type: ‘序列3‘, year: ‘1995‘, value: 15 },
        { type: ‘序列3‘, year: ‘1996‘, value: 8 },
        { type: ‘序列3‘, year: ‘1997‘, value: 5 },
        { type: ‘序列3‘, year: ‘1998‘, value: 4.6 },
        { type: ‘序列3‘, year: ‘2000‘, value: 4 },
      ];
    const arr = [];
    data.forEach(item => {
      if (!arr.includes(item.type)) {
        arr.push(item.type);
      }
    })
    const year = Array.from(new Set(data.map(item => item.year)));
    const series = arr.map(item => {
      const yearData = {};
      data.filter(item1 => {
        return item === item1.type
      }).sort((a, b) => Number(a.year) - Number(b.year)).forEach(d => {
        yearData[d.year] = d.value;
      })
      return {
        name: item,
        type:‘line‘,
        // xAxisIndex: 1,
        smooth: true,
        data: year.map(y => yearData[y])
      };
    })
    const option1 = {
      title: {
        text: ‘demo‘,
        left: ‘center‘
      },
      xAxis: {
        type: ‘category‘,
        boundaryGap: false,
        data: year
      },
      yAxis:  {},
      tooltip: {
        show: true,
        trigger: ‘axis‘
      },
      dataZoom: [{
        type: ‘inside‘,
        start: 0,
        end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon: ‘M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z‘,
            handleSize: ‘80%‘,
            handleStyle: {
                color: ‘#fff‘,
                shadowBlur: 3,
                shadowColor: ‘rgba(0, 0, 0, 0.6)‘,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
    series
    };
    return (
      <ReactEcharts
        option={option1}
        style={{height: 400}} 
      />
       );
  }

  render(){
    let base = +new Date(1968, 9, 3);
    const oneDay = 24 * 3600 * 1000;
    const date = [];
    const data = [Math.random() * 300];

    for (let i = 1; i < 20000; i++) {
        const now = new Date(base += oneDay);
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join(‘/‘));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }
    const option = {
        tooltip: {
            trigger: ‘axis‘,
            position: (pt) => {
                return [pt[0], ‘10%‘];
            }
        },
        title: {
            left: ‘center‘,
            text: ‘大数据量面积图‘,
        },
        toolbox: {
            feature: {
                dataView: {readOnly: false},
                dataZoom: {
                    yAxisIndex: ‘none‘
                },
                magicType: {
                    type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘],
                    show: true
                  },
                restore: {},
                saveAsImage: {},
            }
        },
        xAxis: {
            type: ‘category‘,
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: ‘value‘,
            boundaryGap: [0, ‘100%‘]
        },
        dataZoom: [{
            type: ‘inside‘,
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon: ‘M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z‘,
            handleSize: ‘80%‘,
            handleStyle: {
                color: ‘#fff‘,
                shadowBlur: 3,
                shadowColor: ‘rgba(0, 0, 0, 0.6)‘,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [
            {
                name:‘模拟数据‘,
                type:‘line‘,
                smooth:true,
                symbol: ‘none‘,
                sampling: ‘average‘,
                itemStyle: {
                    color: ‘rgb(255, 70, 131)‘
                },
                areaStyle: {
                  color: {
                    type: ‘linear‘,
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: ‘red‘ // 0% 处的颜色
                    }, {
                        offset: 1, color: ‘blue‘ // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  smooth: true,
                  sampling: ‘average‘
                },
                data,
                markPoint: {
                  data: [
                    {type: ‘max‘, name:‘最大值‘},
                    {type: ‘min‘ ,name: ‘最小值‘}
                  ]
                }
            }
        ]
    };
    return (
      <div>Performancetesting
        <ReactEcharts
          option={option}
          style={{height: 400}} 
        />
        {this.G2Demo()}
        {this.getG6Demo()}
      </div>
    );
  }
}