react+echarts/g2/bizcharts可视化图表

一.echarts的折线图的使用demo如下，linecharts为实例化的封装组件，line为实际应用的组件

cnpm install echarts

import React from 'react';
import './lineCharts.less';
let echarts = require('echarts');

/**
  * 组件参数配置
  *
  * @param {string} id
  * id = 每个图标的标识
  * @param {array} color
  * color = 多组数据的颜色区分，第一组数据为第一种颜色
  * @param { } legendShow
  * legendShow 是否显示默认标注，右上角颜色对应块
  * @param {string} legendTextStyle
  * legendTextStyle = 折线图标注的文字颜色
  * @param {  } noPercent
  * noPercent 折线图不是以百分比来显示
  * @param { array } xAxis
  * xAxis": ["翡翠城西南区", "盛世嘉园","西溪北苑"],
  * @param { array } yAxis
  * "yAxis": [
    {
      "data": [100,200,300],
      "name": "水费",
      "stack": "1",
      "type": "line",
    },
    {
      "data": [100,200,300],
      "name": "物业管理费",
      "stack": "1",
      "type": "line",
    },
    {
      "data": [100,200,300],
      "name": "燃气费",
      "stack": "1",
      "type": "line",
    }
  ]
  * 
*/

let colors = ['#f27573', '#69757a', '#ffd553', '#51b8ae', '#ff8d69', '#a48b82', '#dde779', '#7d89cd', '#cacaca', '#51d1e1', '#f06695', '#fff179', '#8ca8f9', '#c9b185', '#9e5c81'];

class lineCharts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    let { id, xAxis, yAxis } = this.props;
    let myChart = echarts.init(document.getElementById(id));
    myChart.setOption({
      color: this.props.color ? this.props.color : colors,
      title: {
        left: "center",
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        show: this.props.legendShow ? true : false,
        textStyle: {
          color: this.props.legendTextStyle ? this.props.legendTextStyle : '#000',
          fontSize: 12
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: this.props.noPercent ? '' : '{b0}<br />{a0}: {c0}%<br />{a1}: {c1}%'
      },
      grid: {
        left: '20%',
        right: '20%',
        bottom: '3%',
        top:'30%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxis,
        "axisLabel": {
          interval: this.props.intervalNum ? this.props.intervalNum : 0,
          rotate: 7
        },
        axisLine: {
          lineStyle: {
            color: this.props.lineColor ? this.props.lineColor : '#000',
          }
        },
      },
      yAxis: {
        type: 'value',
        minInterval: 1,
        boundaryGap: [0, 0.1],
        axisLabel: {
          formatter: this.props.noPercent ? '{value}' : '{value} %',
        },
        axisLine: {
          lineStyle: {
            color: this.props.lineColor ? this.props.lineColor : '#000',
          }
        },
        precision: 0,
        // min: 1,
        max: this.props.maxSize && this.props.maxSize <= 10 ? 10 : null,
      },
      series: yAxis
    })
  }

  render() {
    return (
      <div id={this.props.id} className="charts">

      </div>
    );
  }

}

export default lineCharts;

import React, { Component } from 'react'
import { Button } from 'antd';
import LineCharts from "./lineCharts";
import './lineCharts.less';

class Line extends Component {

  render() {
    const data = {
        "xAxis": ["翡翠城西南区", "盛世嘉园","西溪北苑"],
        "yAxis": [
          {
            "data": [100,200,300],
            "name": "水费",
            "stack": "1",
            "type": "line",
            "areaStyle": {}
          },
          {
            "data": [100,200,300],
            "name": "物业管理费",
            "stack": "2",
            "type": "line",
            "areaStyle":{}
          },
          {
            "data": [100,200,300],
            "name": "燃气费",
            "stack": "3",
            "type": "line",
            "areaStyle":{}
          }
        ]
      }
    return (
      <div className="root">
        <Button className="big">这是一个按钮</Button>
        <LineCharts id="lineCharts-1" color={['#f38747', '#f7dc3e', '#6ed66d']} legendShow legendTextStyle="#5d71a2" noPercent maxSize={100}  lineColor="#5d71a2" xAxis={data.xAxis} yAxis={data.yAxis} />
      </div>
    );
  }
}

export default Line

二.g2的使用以如下柱状图为例

cnpm install @antv/g2

import React from 'react';
import G2 from '@antv/g2';

class g2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data :[
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 }
      ]
    };
  }

  componentDidMount() {
    const chart = new G2.Chart({
      container: 'c1', // 指定图表容器 ID
       600, // 指定图表宽度
      height: 300 // 指定图表高度
    });
    chart.source(this.state.data);
    chart.interval().position('genre*sold').color('genre');
    chart.render();
  }
  render() {
    return (
      <div id="c1" className="charts">

      </div>
    );
  }

}

export default g2;

三：bizcharts：基于g2的封装版本，去除实例化图表的步骤，更多的关注于各字段的控制，以下两个demo分别为折线图，扇形图

cnpm install bizcharts;
cnpm install @antv/data-set;//扇形图时要安装改依赖

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';

class bizcharts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { genre: 'Sports', sold: 275, income: 2300 },
        { genre: 'Strategy', sold: 115, income: 667 },
        { genre: 'Action', sold: 120, income: 982 },
        { genre: 'Shooter', sold: 350, income: 5271 },
        { genre: 'Other', sold: 150, income: 3710 }
      ],
    };
  }

  render() {
    return (
      <div>
      <Chart width={600} height={200} padding={[60,'auto','auto',160]} data={this.state.data} >
        <Axis name="genre" />
        <Legend position="bottom"/>
        <Tooltip />
          <Geom type="line" position="genre*sold" size={2} />
          <Geom type='point' position="genre*sold" size={4} shape={'circle'} style={{ stroke: '#fff', lineWidth: 1 }} />
      </Chart>
      </div>
    );
  }

}

export default bizcharts;

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord, Label } from 'bizcharts';
import DataSet from '@antv/data-set';//cnpm install @antv/data-set
const { DataView } = DataSet;
const dv = new DataView();

class bizcharts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { item: '事例一', count: 40 },
        { item: '事例二', count: 21 },
        { item: '事例三', count: 17 },
        { item: '事例四', count: 13 },
        { item: '事例五', count: 9 }
      ],
    };
  }

  render() {
    dv.source(this.state.data).transform({
      type: 'percent',
      field: 'count',
      dimension: 'item',
      as: 'percent',
    });
    const cols = {
      percent: {
        formatter: val => {
          val = (val * 100) + '%';
          return val;
        }
      }
    }
    return (
      <div>
        <Chart height={window.innerHeight} data={dv} scale={cols} padding={[80, 100, 80, 80]} forceFit>
          <Coord type='theta' radius={0.75} />
          <Axis name="percent" />
          <Legend position='right' offsetY={-window.innerHeight / 2 + 120} offsetX={-100} />
          <Tooltip
            showTitle={false}
            itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
          />
          <Geom
            type="intervalStack"
            position="percent"
            color='item'
            tooltip={['item*percent', (item, percent) => {
              percent = percent * 100 + '%';
              return {
                name: item,
                value: percent
              };
            }]}
            style={{ lineWidth: 1, stroke: '#fff' }}
          >
            <Label content='percent' formatter={(val, item) => {
              return item.point.item + ': ' + val;
            }} />
          </Geom>
        </Chart>
      </div>
    );
  }

}

export default bizcharts;