React中使用echarts(折线图)

组件代码

import React, {
      Component } from 'react'
import echarts from 'echarts'

class Echart extends Component {
     
  constructor(props) {
     
    super(props)
    this.state = {
     
    }
  }

  // 挂载完成之后,因为React初始化echarts时长宽可能会获取到顶层,所以延迟200去生成,不影响视觉效果
  componentDidMount() {
     
    setTimeout(() => {
     
      this.initEchart(this.props.data)
    }, 200)
  }

  // 更新props以后调用
  componentWillReceiveProps(newProps) {
     
    this.initEchart(newProps.data)
  }

  initEchart = (data) => {
     
    let myEcharts = echarts.init(this.echartsBox)
    let option = {
     
      title: {
     
        text: this.props.title || '',
        left: 'center',
        top: '0'
      },
      tooltip: {
     
        show: true,
        trigger: 'axis',
        axisPointer: {
     
          type: 'cross',
          label: {
     
            show: false
          }
        },
        formatter: '{b}
汇总:{c}'
, extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' }, xAxis: { data: data.x, axisTick: { alignWithLabel: true } }, yAxis: { name: this.props.yname, nameGap: 15, position: 'left', axisTick: { inside: true }, axisLabel: { formatter: '{value}' } }, series: [{ name: '汇总', type: 'line', data: data.y, smooth: false, lineStyle: { color: '#00CC99', width: 2 }, itemStyle: { color: '#fff', borderColor: '#000' } }] } myEcharts.setOption(option) myEcharts.on('finished', () => { myEcharts.resize() }) } render() { return ( <div ref={ (c) => { this.echartsBox = c }} style={ { width: '100%', height: '100%' }} /> ) } } export default Echart

使用时

import React, {
      Component } from 'react'
import LineEcharts from '../components/LineEcharts/index'

class LineEchartsDemo extends Component{
     
  constructor(props) {
     
    super(props)
    this.state = {
     
	    data: {
     
	      x: ['2019-11-21', '2019-11-22', '2019-11-23', '2019-11-24', '2019-11-25', '2019-11-26'],
	      y: [20, 50, 80, 70, 45, 85]
	    }
    }
  }
  componentDidMount() {
      }
  render() {
     
  	<LineEcharts data={
     this.state.data} yname="单位:件" />  
  }
}

export default LineEchartsDemo 

效果

React中使用echarts(折线图)_第1张图片

你可能感兴趣的:(React,echarts,javascript)