• 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="" 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;
    复制代码
  • 相关阅读:
    /tmp/orbit-oracle/目录inode耗尽
    sp_change_users_login 'Update_One', '用户名', '登录名';
    自动载入Python虚拟环境
    Windows下安装MySQL详细教程
    python版本下载时时,官方目录web-based与executable和embeddable 的区别
    print,printf,println
    大文件文本数据处理
    通过文件指针插入文件内容
    sizeof和strlen的使用
    java八大基本数据类型
  • 原文地址:https://www.cnblogs.com/williamjie/p/9584374.html
Copyright © 2020-2023  润新知