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>    )  }}