报图组件

基于 highcharts 二次封装通用报图

何时使用

• h5 报图
• web 报图

浏览器支持

IE 11+

安装

npm install @51yzone/chart --save

运行

# 默认开启服务器，地址为 ：http://local:8000/

# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start

# 构建生产环境静态文件，用于发布文档
npm run site

代码演示

highchart 二次封装

最简单的用法

import '@51yzone/chart/lib/style/';
import { DoublePie, Bar, Pie } from '@51yzone/chart';
class App extends React.Component {
  render() {
    return (
      <>
        <Pie
          options={{
            series: [
              {
                type: 'pie',
                data: [
                  {
                    name: 'a',
                    y: 25,
                  },
                  {
                    name: 'b',
                    y: 50,
                  },
                  {
                    name: 'c',
                    y: 50,
                  },
                  {
                    name: '好长或或或或或或的么么么么么猪猪猪猪猪',
                    y: 25,
                  },
                ],
              },
            ],
          }}
        />
        <Pie
          options={{
            title: {
              text: '自定义标题',
            },
            plotOptions: {
              pie: {
                showInLegend: true,
              },
            },
            series: [
              {
                type: 'pie',
                name: '市场份额',
                size: '50%',
                innerSize: '40%',
                data: [
                  ['Firefox', 44.2],
                  ['IE7', 26.6],
                  ['IE6', 20],
                  ['雅博兰湾业主卡雅博兰湾业主卡雅博兰湾业主卡', 3.1],
                  ['Other', 5.4],
                ],
              },
              {
                type: 'pie',
                name: '市场份额23',
                size: '80%',
                innerSize: '70%',
                data: [
                  ['Firefox', 11.2],
                  ['IE7', 22.6],
                  ['IE6', 44],
                  ['雅博兰湾业主卡雅博兰湾业主卡雅博兰湾业主卡', 39.1],
                  ['Other', 55.4],
                  ['Other1', 55.4],
                  ['Other2', 55.4],
                ],
              },
            ],
          }}
        />
        <Bar
          options={{
            xAxis: {
              categories: ['非洲', '美洲', '亚洲', '欧洲'],
            },
            series: [
              {
                name: '采集数',
                data: [107, 31, 635, 203],
                color: '#FA6400',
              },
              {
                name: '安装设备数',
                data: [133, 156, 947, 408],
                color: '#24C5A3',
              },
            ],
          }}
        />
        <Bar
          options={{
            xAxis: {
              categories: [
                '非洲',
                '美洲',
                '亚洲',
                '欧洲',
                '大洋大洋洲大洋洲洲',
                '非洲1',
                '美洲2',
                '亚洲3',
                '欧洲34',
                '非洲11',
                '美洲21',
                '亚洲31',
                '欧洲341',
                '美1洲21',
                '亚洲131',
                '欧2洲341',
              ],
            },
            series: [
              {
                name: '采集数',
                data: [107, 31, 635, 203, 2, 107, 31, 635, 203, 107, 31, 635, 203, 2, 34, 5],
                color: '#FA6400',
              },
              {
                name: '安装设备数',
                data: [133, 156, 947, 408, 6, 107, 31, 635, 203, 107, 31, 635, 203, 2, 34, 5],
                color: '#24C5A3',
              },
            ],
          }}
        />
      </>
    );
  }
}
ReactDOM.render(<App />, mountNode);

line 二次封装

折线图

import '@51yzone/chart/lib/style/';
import { Line } from '@51yzone/chart';
class App extends React.Component {
  render() {
    return (
      <Line
        options={{
          series: [
            {
              name: '',
              data: [
                { x: 1, y: 43934 },
                { x: 2, y: 52503 },
                { x: 4, y: 57177 },
                { x: 5, y: 69658 },
                { x: 6, y: 97031 },
                { x: 7, y: 119931 },
                { x: 8, y: 137133 },
                { x: 9, y: 154175 },
              ],
            },
          ],
        }}
      />
    );
  }
}
ReactDOM.render(<App />, mountNode);

API

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | | ---------- | ------------------ | --------------------------------- | ------ | -------- | | options | 图表配置 | Object | {} | false | | callback | 初始化结束回调 | Function(chart: Highcharts.Chart) | - | false | | className | 容器节点样式类名称 | string | - | false | | otherProps | 图表其他配置 | Object | - | false |