数据可视化相关库说明

【一】常用数据可视化图表库
  1) echarts
a. https://echarts.baidu.com/
b. 百度开源, 如果要在 react 项目中使用, 需要下载 echarts-for-react
  2) G2
a. https://antv.alipay.com/zh-cn/g2/3.x/index.html
b. 阿里开源
  3) bizcharts
a. https://bizcharts.net/products/bizCharts
b. 基于 react 包装 G2 的开源库
c. 需要额外下载 @antv/data-set
  4) d3
a. https://d3js.org.cn/
b. 国外的免费可视化图表库,使用较为繁琐,使用频率较低

 

 

【二】echarts柱状图

  (1)首先将其基本案例写出,如下所示

/*** 柱状图---路由 */
import React, { Component, Fragment } from 'react'
import {
    Card,
    Button,
} from 'antd'
import ReactEcharts from 'echarts-for-react';

class Bar extends Component {
    state = {}
    /**返回柱状图配置对象 */
    getOption = () => {
        return {
            title: {/**标题组件,包含主标题和副标题 */
                text: '柱状图数据统计'
            },
            tooltip: {},/**提示框组件 */
            legend: {
                data: [{
                    name: '销量',
                    icon: 'circle',/**强制设置图形为圆*/
                    textStyle: {/** 设置文本为红色*/
                        color: 'red'
                    }
                },{
                    name: '库存',
                    icon: 'circle',/**强制设置图形为圆*/
                    textStyle: {/** 设置文本为红色*/
                        color: 'green'
                    }
                }]/**图例的数据数组 */
            },
            /**直角坐标系 grid 中的 x 轴 */
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            /**直角坐标系 grid 中的 y 轴 */
            yAxis: {},
            /**柱状/条形图 */
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            },{
                name: '库存',
                type: 'bar',
                data: [13, 8, 16, 18, 9, 16]
            }]
        }
    }
    render() {
        return (
            
                
                    
                
                "柱状图">
                    {/* render echarts option. */}
                    this.getOption()} />
                
            
        );
    }
}

export default Bar;

  数据可视化相关库说明_第1张图片

 

 

  (2)接着讲数组数据改为state,然后传参到方法里进行实例化

    

 

    数据可视化相关库说明_第2张图片

 

    然后在返回配置对象里传入state

    数据可视化相关库说明_第3张图片

 

    此时结果如下

    数据可视化相关库说明_第4张图片

 

  (3)点击按钮更新

  点击按钮时,销量都+1,库存都-1,如下所示,分别用map和reduce

  

 

  数据可视化相关库说明_第5张图片

 

  因为这里的state更新是基于原数组的变动,所以推荐使用函数式编程修改state。

 

  

【三】echarts折线图

  如上所示,type改为line即可

 

 

 

 

 

 

 

 

 

 

.

你可能感兴趣的:(数据可视化相关库说明)