react中使用echarts

import React, { Component } from 'react';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

class EchartsTest extends Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
         
        tooltip: {   //提示框，鼠标悬浮交互时的信息提示
            show:true,
            trigger: 'axis'
        },
        legend: {    //图例，每个图表最多仅有一个图例
            x: 'center',
            data: ['个人', '团队','部门'],
            bottom: 10,
            itemGap: 40,
            textStyle: {
              color: 'black',
              fontSize: 14
          }
        },
        polar: [{    //极坐标 
            indicator: [{text: '引用',max: 100}, 
                        {text: '热度',max: 100},
                        {text: '贡献',max: 100},
                        {text: '产量',max: 100},
                        {text: '口碑',max: 100},
                        
                       ],
            radius: 100,      
            startAngle: 90  // 改变雷达图的旋转度数
        }],
         
        series: [{         // 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据
            name: '总点击量',
            type: 'radar',
            itemStyle: {//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：
                normal: {
                    areaStyle: {
                        type: 'default'
                    }
                }
            },
            data: [{
                value: [78,98,90,94,98],
                name: '团队',
                itemStyle: {
                  normal: {
                      color: '#B3E4A1'
                  }
              }
            },{
              value: [20,15,94,60,78],
              name: '部门',
              itemStyle: {
                normal: {
                    color: 'rgb(238, 197, 102)'
                }
            }
          },{
            value: [12,32,34,53,53],      //外部加载，也可以通过ajax去加载外部数据。
            name: '个人'       
        }]
        }]
        });
    }
    render() {
        return (
            <div id="main" style={{ width: 300, height:350,left:20 ,top:-20}}></div>
        );
    }
}

export default EchartsTest;

echarts 雷达图