react—echarts实例

 先模拟定义后端数据

const statistics = [{"hour":"00","click_num":2208,"submit_num":921,"device_num":31},{"hour":"01","click_num":1957,"submit_num":805,"device_num":28},{"hour":"02","click_num":113,"submit_num":27,"device_num":0},{"hour":"03","click_num":0,"submit_num":0,"device_num":0},{"hour":"04","click_num":0,"submit_num":0,"device_num":0},{"hour":"05","click_num":10,"submit_num":5,"device_num":0},{"hour":"06","click_num":0,"submit_num":0,"device_num":0},{"hour":"07","click_num":12,"submit_num":9,"device_num":0},{"hour":"08","click_num":0,"submit_num":0,"device_num":0},{"hour":"09","click_num":689,"submit_num":561,"device_num":19},{"hour":"10","click_num":1499,"submit_num":1181,"device_num":19},{"hour":"11","click_num":1219,"submit_num":937,"device_num":37},{"hour":"12","click_num":2509,"submit_num":1752,"device_num":42},{"hour":"13","click_num":484,"submit_num":245,"device_num":18},{"hour":"14","click_num":3,"submit_num":3,"device_num":0},{"hour":"15","click_num":4,"submit_num":3,"device_num":0},{"hour":"16","click_num":1,"submit_num":1,"device_num":0},{"hour":"17","click_num":0,"submit_num":0,"device_num":0},{"hour":"18","click_num":0,"submit_num":0,"device_num":0},{"hour":"19","click_num":0,"submit_num":0,"device_num":0},{"hour":"20","click_num":0,"submit_num":0,"device_num":0},{"hour":"21","click_num":0,"submit_num":0,"device_num":0},{"hour":"22","click_num":0,"submit_num":0,"device_num":0},{"hour":"23","click_num":0,"submit_num":0,"device_num":0},{"hour":"总计","click_num":10708,"submit_num":6450,"device_num":194}]

echarts Api

echarts.init(this.ID) 创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。

echarts.dispose(this.ID) 销毁实例，实例销毁后无法再被使用。

myChart.setOption(lineOption) 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

配置项 // https://echarts.baidu.com/option.html#grid.tooltip.axisPointer.type

   tooltip:{} 本坐标系特定的 tooltip 设定。

   grid:{} 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴 

   xAxis:{} 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

   legend:{[]} 图例组件展现了不同系列的标记(symbol)，颜色和名字

   yAxis:{} 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

   series:[] 系列列表。每个系列通过 type 决定自己的图表类型

下面是react代码

 定义表头数据（初始值） 类似antd-table的columns

let lineOption = {
  title: {
    text: '每小时任务数'
  },
  tooltip : {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  toolbox: {
    feature: {
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '5%',
    containLabel: true
  },
  xAxis : [
    {
      type : 'category',
      boundaryGap : false,
      axisLabel: {
        showMaxLabel: true,
        margin: 13,
        rotate: 30,
      }
    }
  ],
  legend: {
    data:['每小时点击数', '每小时提交数']
  },
  yAxis: {
    type: 'value'
  },
  series : [{
    name: '每小时点击数',
    type: 'line',
    data: [120, 132, 101, 134, 90, 230, 210]
  }, {
    name: '每小时提交数',
    type: 'line',
    data: [120, 132, 101, 134, 90, 230, 210]
  }]
};

class类里面

import echarts from 'echarts';
export default class Hours extends Component {
  constructor(props) {
    super(props)
    this.state = {
      myChart: {},
      viewData:[],
    }
  }
  componentDidMount() {
    if (this.ID) {
        this.setState({
          myChart: echarts.init(this.ID),
          viewData:statistics,
        }, () => {
          this.initChart()
        })
     }
  }
  initChart () {
    const { viewData } = this.state;
    let chartData = viewData.slice(0, -1)
    if (viewData.length === 0) return false
    let xData = [], yClickData = [], ySubmitData = [];
    chartData.forEach((val) => {
      xData.push(val.hour);
      yClickData.push(val.click_num);
      ySubmitData.push(val.submit_num);
    })
    let max = Math.max(...yClickData);
    lineOption.xAxis[0].data = xData;
    lineOption.yAxis.max = max + 500 - (max % 500)
    lineOption.series[0].data = yClickData;
    lineOption.series[1].data = ySubmitData;
    echarts.dispose(this.ID)
    let myChart = echarts.init(this.ID) //初始化echarts
    //设置options
    myChart.setOption(lineOption)
    window.onresize = function () {
      myChart.resize()
    }
  }
  render() {
    return (
        <div style={{ width: '100%', height: 400 }} ref={ID => this.ID = ID}></div>
    )
  }
}