直接在react中使用原生的方法

  1. // 引入 ECharts 主模块
  2. import echarts from 'echarts/lib/echarts';
  3. // // 引入提示框和标题组件
  4. import 'echarts/lib/component/tooltip';
  5. import 'echarts/lib/component/title';
  6. import 'echarts/lib/component/legend'
  7. import 'echarts/lib/chart/pie';
  9. const Model_echarts = (props) => {
  10.     let [main , setMain] = useState('')
  11.     const option = {
  12.         title: {
  13.             text: '某站点用户访问来源',
  14.             subtext: '纯属虚构',
  15.             left: 'center'
  16.         },
  17.         tooltip: {
  18.             trigger: 'item',
  19.             formatter: '{a} <br/>{b} : {c} ({d}%)'
  20.         },
  21.         legend: {
  22.             orient: 'vertical',
  23.             left: 'left',
  24.             data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  25.         },
  26.         series: [
  27.             {
  28.                 name: '访问来源',
  29.                 type: 'pie',
  30.                 radius: '55%',
  31.                 center: ['50%', '60%'],
  32.                 data: [
  33.                     { value: 335, name: '直接访问' },
  34.                     { value: 310, name: '邮件营销' },
  35.                     { value: 234, name: '联盟广告' },
  36.                     { value: 135, name: '视频广告' },
  37.                     { value: 1548, name: '搜索引擎' }
  38.                 ],
  39.                 emphasis: {
  40.                     itemStyle: {
  41.                         shadowBlur: 10,
  42.                         shadowOffsetX: 0,
  43.                         shadowColor: 'rgba(0, 0, 0, 0.5)'
  44.                     }
  45.                 }
  46.             }
  47.         ]
  48.     };
  49.     useEffect(()=>{
  50.         var node = document.getElementById('main')
  51.         setMain(node)
  52.     } , [])
  53.     // 基于准备好的dom，初始化echarts实例
  54.     if(main !== ""){
  55.         var myChart = echarts.init(main);
  56.         myChart.resize({ height: '400px' })
  57.         myChart.setOption(option);
  58.     }
  59.     // 绘制图表
  60.     return ( <div id="main"></div> )
  61. }

使用echarts-for-react控件

对于组件来说，只有一个API——getEchartsInstance()，用来获取Echarts的实例对象。获取到对象后就可以使用任意的Echarts API。

  1. // render the echarts component below with rel
  2. <ReactEcharts ref={(e) => { this.echarts_react = e }}
  3.   option={this.getOption()} />
  5. let echarts_instance = this.echarts_react.getEchartsInstance();
  6. // then you can use any API of echarts.
  7. let base64 = echarts_instance.getDataURL();
  9. 或者写成函数组件的形式
  10. <ReactEcharts ref={e => echartRef.current = e } option={options} />
  12.   let chartInstance = echartRef.current.getEchartsInstance()
  13.             chartInstance.resize({ height: '100%' })
  14. // then get the `ReactEcharts` use this.echarts_react