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

￡神魔★判官ぃ 2022-06-10 07:52 252阅读 0赞

采用react-highcharts来集成highcharts，效果图：  
![这里写图片描述][SouthEast]

第一步：安装react-highcharts

cnpm i --save-dev react-highcharts

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

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

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

第四步：定义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>
          )
        }
    
      }

[SouthEast]: /images/20220610/f8a09b361b8d430a87b4918cb8cdfa3a.png