antd mobile(四) highcharts集成---采用react-highcharts

采用react-highcharts来集成highcharts，效果图：

第一步：安装react-highcharts

cnpm i --save-dev react-highcharts

第二步：在文件头部引入相应的组件：

var ReactHighcharts = require('react-highcharts');

第三步：在需要添加图表的地方添加标签：

<ReactHighcharts config={config}></ReactHighcharts>

第四步：定义config内容：

 var config = {
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 295.6, 454.4]
      }]
    };

整个文件内容如下：

  import { Tabs } from 'antd-mobile';
  import  React,{Component} from 'react';
  const TabPane = Tabs.TabPane;
  var ReactHighcharts = require('react-highcharts');
  var Highcharts = require('highcharts');

  import styles from './IndexPage.less';



  export default class TabPanel extends Component{
    componentDidMount(){
      Highcharts.theme = {
        colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee',
          '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
        chart: {
          backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            stops: [
              [0, '#585060'],
              [1, '#585060']
            ]
          },
          style: {
            fontFamily: '\'Unica One\', sans-serif'
          },
          plotBorderColor: '#606063'
        },
        title: {
          style: {
            color: '#E0E0E3',
            textTransform: 'uppercase',
            fontSize: '20px'
          }
        },
        subtitle: {
          style: {
            color: '#E0E0E3',
            textTransform: 'uppercase'
          }
        },
        xAxis: {
          gridLineColor: '#707073',
          labels: {
            style: {
              color: '#E0E0E3'
            }
          },
          lineColor: '#707073',
          minorGridLineColor: '#505053',
          tickColor: '#707073',
          title: {
            style: {
              color: '#A0A0A3'

            }
          }
        },
        yAxis: {
          gridLineColor: '#707073',
          labels: {
            style: {
              color: '#E0E0E3'
            }
          },
          lineColor: '#707073',
          minorGridLineColor: '#505053',
          tickColor: '#707073',
          tickWidth: 1,
          title: {
            style: {
              color: '#A0A0A3'
            }
          }
        },
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
          style: {
            color: '#F0F0F0'
          }
        },
        plotOptions: {
          series: {
            dataLabels: {
              color: '#B0B0B3'
            },
            marker: {
              lineColor: '#333'
            }
          },
          boxplot: {
            fillColor: '#505053'
          },
          candlestick: {
            lineColor: 'white'
          },
          errorbar: {
            color: 'white'
          }
        },
        legend: {
          itemStyle: {
            color: '#E0E0E3'
          },
          itemHoverStyle: {
            color: '#FFF'
          },
          itemHiddenStyle: {
            color: '#606063'
          }
        },
        credits: {
          style: {
            color: '#666'
          }
        },
        labels: {
          style: {
            color: '#707073'
          }
        },

        drilldown: {
          activeAxisLabelStyle: {
            color: '#F0F0F3'
          },
          activeDataLabelStyle: {
            color: '#F0F0F3'
          }
        },

        navigation: {
          buttonOptions: {
            symbolStroke: '#DDDDDD',
            theme: {
              fill: '#505053'
            }
          }
        },

        // scroll charts
        rangeSelector: {
          buttonTheme: {
            fill: '#505053',
            stroke: '#000000',
            style: {
              color: '#CCC'
            },
            states: {
              hover: {
                fill: '#707073',
                stroke: '#000000',
                style: {
                  color: 'white'
                }
              },
              select: {
                fill: '#000003',
                stroke: '#000000',
                style: {
                  color: 'white'
                }
              }
            }
          },
          inputBoxBorderColor: '#505053',
          inputStyle: {
            backgroundColor: '#333',
            color: 'silver'
          },
          labelStyle: {
            color: 'silver'
          }
        },

        navigator: {
          handles: {
            backgroundColor: '#666',
            borderColor: '#AAA'
          },
          outlineColor: '#CCC',
          maskFill: 'rgba(255,255,255,0.1)',
          series: {
            color: '#7798BF',
            lineColor: '#A6C7ED'
          },
          xAxis: {
            gridLineColor: '#505053'
          }
        },

        scrollbar: {
          barBackgroundColor: '#808083',
          barBorderColor: '#808083',
          buttonArrowColor: '#CCC',
          buttonBackgroundColor: '#606063',
          buttonBorderColor: '#606063',
          rifleColor: '#FFF',
          trackBackgroundColor: '#404043',
          trackBorderColor: '#404043'
        },

        // special colors for some of the
        legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
        background2: '#505053',
        dataLabelsColor: '#B0B0B3',
        textColor: '#C0C0C0',
        contrastTextColor: '#F0F0F3',
        maskColor: 'rgba(255,255,255,0.3)'
      };

  // Apply the theme
      Highcharts.setOptions(Highcharts.theme);

      console.log("--------------------");
      // Create the chart
      Highcharts.chart('tabPanel', {
        chart: {
          type: 'column'
        },
        title: {
          text: '任务数量'
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          title: {
            text: '数量'
          }

        },
        legend: {
          enabled: false
        },
        plotOptions: {
          series: {
            borderWidth: 0,
            dataLabels: {
              enabled: true,
              format: '{point.y:.1f}%'
            }
          }
        },

        tooltip: {
          headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
          pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },

        series: [{
          name: 'Brands',
          colorByPoint: true,
          data: [{
            name: '任务总数',
            y: 56.33,
            drilldown: '任务总数'
          }, {
            name: '待完成',
            y: 24.03,
            drilldown: '待完成'
          }, {
            name: '已完成',
            y: 10.38,
            drilldown: '已完成'
          }
          ]
        }]
      });
    }

    render(){
      var {callback=()=>"",onTabClick=()=>"",handleTabClick=()=>""}=this.props;
       var config = {
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 295.6, 454.4]
      }]
    };

      return (
        <Tabs className={styles.dayTab} defaultActiveKey="1" onChange={callback} onTabClick={handleTabClick}>
          <TabPane tab="日" key="1">
            <div className={styles.charDiv} id="tabPanel">

            </div>
          </TabPane>

          <TabPane tab="周" key="2">
            <ReactHighcharts config={config}></ReactHighcharts>
          </TabPane>
          <TabPane tab="月" key="3">
            <div className={styles.charDiv}>
              <div className={styles.itemZhuChar}>
                任务
              </div>

              <div className={styles.itemZhuChar}>
                任务2
              </div>

              <div className={styles.itemZhuChar}>
                任务3
              </div>
            </div>
          </TabPane>
          <TabPane tab="总" key="4">
            <div className={styles.charDiv}>
              <div className={styles.itemZhuChar}>
                任务
              </div>

              <div className={styles.itemZhuChar}>
                任务2
              </div>

              <div className={styles.itemZhuChar}>
                任务3
              </div>
            </div>
          </TabPane>
        </Tabs>
      )
    }

  }