欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react中使用echarts

程序员文章站 2021-12-07 08:21:50
import React, { Component } from 'react'import * as echarts from 'echarts'export default class Statics extends Component { state = { data: [820, 563, 903, 743, 678, 873, 467] } initCharts = () => { let myChart = echarts.init(docume......

最近再学习react,今天写了react中使用echarts,现在分享给大家,希望对您能有所帮助!不好的话,勿喷!!!

代码如下:

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

export default class Statics extends Component {
  state = {
    data: [820, 563, 903, 743, 678, 873, 467]
  }

  initCharts = () => {
    let myChart = echarts.init(document.getElementById('myChart'));
    myChart.setOption({
      title: {
        text: '测试'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: [1, 2, 3, 4, 5, 6, 7]
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.state.data,
        type: 'line'
      }]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    })
  }

  componentDidMount() {
    this.initCharts();
  }

  render() {


    return (
      <div>
        <div id='myChart' style={{ width: '100%', height: '500px' }}></div>
      </div>
    )
  }
}

react中使用echarts

 

本文地址:https://blog.csdn.net/qq_39436399/article/details/111919858

相关标签: 前端