react应用数据可视化

地址:https://echarts.apache.org/examples/zh/index.html#chart-type-radar

1.下载依赖包

npm add echarts -S

2.引入

import echarts from ‘echarts’

export default class App extends Component {
  render() {
    return (
      <div>
        <div id="main" style={{ width: 600, height: 400 }}></div>
      </div >
    )
  }
  componentDidMount() {
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
      // title: {
      //   text: 'ECharts 入门示例'
      // },
      // tooltip: {},
      // xAxis: {
      //   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      // },
      // yAxis: {},
      // series: [{
      //   name: '销量',
      //   type: 'bar',
      //   data: [5, 20, 36, 10, 10, 20]
      // }]
      angleAxis: {
        type: 'category',
        data: ['js', 'html5', 'vue', 'react', '小程序', 'Bootstrap', 'nodejs']
      },
      radiusAxis: {
      },
      polar: {
      },
      series: [{
        type: 'bar',
        data: [1, 2, 3, 4, 3, 5, 1],
        coordinateSystem: 'polar',
        name: 'A',
        stack: 'a'
      }, {
        type: 'bar',
        data: [2, 4, 6, 1, 3, 2, 1],
        coordinateSystem: 'polar',
        name: 'B',
        stack: 'a'
      }, {
        type: 'bar',
        data: [1, 2, 3, 4, 1, 2, 5],
        coordinateSystem: 'polar',
        name: 'C',
        stack: 'a'
      }],
      legend: {
        show: true,
        data: ['A', 'B', 'C']
      }
    });
  }
}