react 如果简单实用echarts

npm i echarts -S

import echarts from ‘echarts‘

export default class Echarts extends Component {
  state = {
    data: []
  }
  //请求数据
  getEchartsData = () => {
    Axios.get(‘/echartsData.json‘).then(res => {
      this.setState({
        data: res.data.list
      })
      this.initEcharts(); //调用下 封装的Echarts
    })
  }

  //封装Echarts
  initEcharts = () => {
    // var myChart = echarts.init(document.getElementsByClassName(‘echarts_wrap‘)[0]);
    var myChart = echarts.init(this.el);

    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: ‘item‘,
        formatter: ‘{a} <br/>{b}: {c} ({d}%)‘
      },
      legend: {
        orient: ‘vertical‘,
        left: 10,
        data: [‘直接访问‘, ‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘搜索引擎‘]
      },
      series: [
        {
          name: ‘访问来源‘,
          type: ‘pie‘,
          radius: [‘50%‘, ‘70%‘],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: ‘center‘
          },
          emphasis: {
            label: {
              show: true,
              fontSize: ‘30‘,
              fontWeight: ‘bold‘
            }
          },
          labelLine: {
            show: false
          },
          data: this.state.data
        }
      ]
    };
    // 自动缩放 拖动屏幕
    window.addEventListener(‘resize‘, () => {
      myChart.resize()
    })

    // 处理点击事件判断点击的哪一个，进行一些逻辑处理
    myChart.on(‘click‘, function (params) {
      switch (params.name) {
        case ‘直接访问‘:
          console.log(‘直接访问‘)
          break;
        case ‘邮件营销‘:
          console.log(‘邮件营销‘)
          break;
        default:
          break;
      }
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  componentDidMount() {
    this.getEchartsData() //调用获取的数据
  }

  render() {
    return (
      <div className=‘views_echarts‘>
        <div className=‘echarts_wrap‘ ref={v => this.el = v}></div>
      </div>
    )
  }
}