react+echartsg2bizcharts可视化图表

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

      width: 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="" 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;