antd mobile (三) 集成highcharts--传统方式

highcharts是一套比较出名的图表组件，做了个集成展示测试下效果跟速度，效果图：

第一步是安装highcharts组件

cnpm i --save-dev highcharts

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

var Highcharts = require('highcharts');

第三步：则就是在界面定义一个容器div，并为div设置相应的id

 <div className={styles.charDiv} id="tabPanel">

 </div>

第四步：则是通过Highcharts 来渲染组件，而且是定义在componentDidMount()方法里面：

  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: '已完成'
        }
        ]
      }]
    });

npm start 就看到效果了，完整的代码如下：

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=()=>"",config:config}=this.props;
    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>
    )
  }

}