React项目中使用Echarts图表库

最近在项目中使用到Echarts图表库，今天来分享一下我是如何使用Echarts图表库的。

Echarts官网地址: https://echarts.apache.org/zh/index.html.

1.通过npm获取 ECharts：

npm install echarts --save

2.引入Echarts

// 引入 ECharts 主模块
import echarts from 'echarts';

3.创建一个柱状图

import React from 'react';
import styles from './styles.less';
import {
    connect } from 'dva';
import DeckGL from 'deck.gl';
// import { TripsLayer } from '@deck.gl/layers';
import {
    TripsLayer } from '@deck.gl/geo-layers';
import {
    IconLayer, PathLayer, PolygonLayer, LineLayer } from '@deck.gl/layers';
import icon1 from '@/assets/wenbrigadeimages/icon1.png';
import icon2 from '@/assets/wenbrigadeimages/icon2.png';
import icon3 from '@/assets/wenbrigadeimages/icon3.png';
import icon4 from '@/assets/wenbrigadeimages/icon4.png';
import liBird from '@/assets/bird/icon1.png';

import router from 'umi/router'
// import EchartsComponents from './components/echarts/index'
// let echartEntity = new EchartsComponents();
// 引入 ECharts 主模块
import echarts from 'echarts';


const ICON_MAPPING = {
   
    marker: {
    x: 0, y: 0, width: 4, height: 4, mask: true }
};
var thisSocket = null;
function mapStateToProps({
    ContingencyModel, globalMapModel }) {
   
    return {
   
        ContingencyModel: ContingencyModel,
        globalMapModel: globalMapModel,
    };
}

@connect(mapStateToProps)
class OneList extends React.Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            oneList: {
   
                title: {
   
                    text: '',
                    subtext: '(出现次数)',
                    textStyle: {
   
                        color: '#fff',
                        //字体风格,'normal','italic','oblique'
                        fontStyle: 'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight: 'bold',
                        //字体系列
                        fontFamily: 'sans-serif',
                        //字体大小
                        fontSize: 20
                    },
                    rich: {
   

                    },
                    subtextStyle: {
   
                        color: 'rgba(255,255,255,.8)',
                    }

                },
                grid: {
   
                    left: '3%',   //组件离容器左侧的距离
                    right: '4%',
                    bottom: '0%',
                    containLabel: true     //grid 区域是否包含坐标轴的刻度标签
                },

                tooltip: {
   
                    trigger: 'axis'
                },
                legend: {
   
                    data: ['6.00-18.00', '20.00-5.00'],
                    top: '30px',
                    right: '0',
                    textStyle: {
   
                        color: 'rgba(255,255,255,.8)',
                        //字体风格,'normal','italic','oblique'
                        fontStyle: 'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight: 'bold',
                        //字体系列
                        fontFamily: 'sans-serif',
                    },
                },
                xAxis: [
                    {
   
                        type: 'category',
                        data: ['1', '2', '3', '4', '5', '6',