q-react-highchart

安装

npm install q-react-highchart

本地调试

npm run dev

本地测试

ES6转ES5

npm run babel

使用

import { LineChart, PieChart }　from 'q-react-highchart';
 
const lineSeries = [
  {
    name: 'name1',
    data: [{
      x: 1231232131,
      y: 1123,
    }, {
      x: 1231235551,
      y: 1123123,
    }],
  },
];
 
const lineConfig = {
  colors: ['#F06C53', '#56bc76', '#1eb7d8', '#7A5AA6', '#F0CA4D', '#98CB65', '#0873b9'],
};
 
 
const pieSeries =[
  {        
    suffix: 'GB', 
    name: 'A-1', 
    y: 100,
  },
  {        
    suffix: 'GB', 
    name: 'B-1', 
    y: 30,
  }
];
 
const pieConfig = {
  colors: ['#F06C53', '#56bc76', '#1eb7d8', '#7A5AA6', '#F0CA4D', '#98CB65', '#0873b9'],
};
 
 
class　Demo extends Component {
  constructor(props) {
    super(props);
  }
 
  render () {
 
    return (
      <div>
        <div>
          <LineChart data={lineSeries} config={lineConfig} />
          <PieChart data={pieSeries} config={pieConfig} />
        </div>
      </div>
    )
  }
}
 
ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);
 

LineChart线性图

参数	类型	描述
data	Array	图表数据
config	Object	图表配置

data

参数	类型	描述
x	string	number
y	number	纵轴坐标值
suffix	string	纵轴单位

PieChart饼图

参数	类型	描述
data	Array	图表数据
config	Object	图表配置

data

参数	类型	描述
name	string	显示名称
y	number	饼图值
suffix	string	饼图单位