react-highcharts 画3d饼图

首先要用安装highcharts-3d

npm i -S highcharts-3d

引入的时候要注意:

import highcharts3d from 'highcharts/highcharts-3d';
highcharts3d(ReactHighcharts.Highcharts);

完整代码:


import ReactHighcharts from 'react-highcharts';
import highcharts3d from 'highcharts/highcharts-3d';
highcharts3d(ReactHighcharts.Highcharts);
render() {
    const {title } = this.props;
    const config = {
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45,
          beta: 0,
        },
      },
      title: {
        text: title,
      },
      colors: ['#629ef8', '#51d89d', '#a79ae7'],
    
      },
      series: [{
        name: '用餐次数',
        data: [
                {name: '1', y: 400},
                {name: '2', y: 1000},
                {name: '3', y: 100},

        ],
      }],
    };
    return <ReactHighcharts config={config} ref="chart" />;
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容