第一种方法echarts-for-react

1.添加依赖

npm install echarts-for-react --save
npm install echarts --save

2.成功后显示

image.png

3.在react页面引入Echarts

import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

4.声明

//把你在echar中编辑好的文件放在这个声明的对象中；
let  echartsOption = {
tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
      orient: 'vertical',
      x: 'left',
      data:['天海湾','鼎龙湾','珍珠湾','翠逸家园','紫林湾'] //需要对应 series 的 name值
  },
series: [
  xxxxxxxxxxxxxxxxxxxx
  xxxxxxxxx
]
}

5.注入到render 中

 render () {
        return(
            <div id="kidAlert" >
                <ReactEcharts
                    ref={(e) => { this.echartsElement = e }}
                    option={echartsOption}
                    notMerge={true} // 重新渲染数据的 重绘的,老坑了
                    theme="clear"
                    style={kidAlert}//这个图表的大小
                />
            </div>
        )
    }

6.然后就显示出来了

image.png

第二种方法echarts

1.导入echars

import echarts from 'echarts';

2.声明一波

 render () {
        return(
            <div id="kidGraph" style={{height:"500px"}}>
            </div>
        )
    }

3.编写代码

let echartsOption = {
  title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
}
class KpiGraph extends Component {
    constructor(props,context) {
        super(props,context)
        this.state = {}
    }
    componentDidMount () {
      this.newGraph()
    }
    newGraph(){
        var myChart = echarts.init(document.getElementById('kidGraph'));
        myChart.setOption(echartsOption)
    }
}