前端引入并且封装echarts图(柱状图、折线图、饼状图、关联关系图谱)

前端引入并且封装echarts图（以react项目为例）

react组件组件一般放在src的components文件夹下。

1.引入柱状图

a.封装echarts组件：

components下，新建Bar文件夹，内部写index.js文件

/**
 * 柱状图
 */
import React, { Component } from "react";
import ReactEcharts from 'echarts-for-react';

export default class Bar extends Component {

  constructor(props) {
    super(props)
    this.state = {
      thisYear: [260, 500, 230, 625, 750, 500, 125, 628, 240, 245, 980, 40],
      lastYear: [280, 270, 240, 660, 230, 0, 885, 480, 650, 125, 130, 760]
    }
  }

  getOption = (thisYear, lastYear) => {
    return {

      // grid: {
      //   left: 30,
      //   right: 40,
      //   bottom: 30,
      //   containLabel: true
      // },
      // title: {
      //   text: ''
      // },
      color: ["#EDC878", "#96CDFA"],
      tooltip: {},
      legend: {
        data: ['当年日均', '上年日均'],
      },
      xAxis: {
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
      },
      yAxis: {},
      series: [{
        name: '当年日均',
        type: 'bar',
        data: thisYear
      },
      {
        name: '上年日均',
        type: 'bar',
        data: lastYear
      }]
    };
  };

  render() {
    const { thisYear, lastYear } = this.state;

    return (
      <div>
        <ReactEcharts
          option={this.getOption(thisYear, lastYear)} />
      </div>
    )
  }
}

b.在其他组件引入封装的echarts图组件

import React, { Component } from "react";
import Bar from "../../../../../../../components/echarts/Bar"

export default class DepositInfo extends Component {
    state = {};
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <div>
                <Bar/>
            </div>
        )
    }
}

2.引入折线图、饼状图、关联关系图谱

(同上，封装的组件文件不同)
index.js文件

/**
 * 折线图
 */
import React, { Component } from "react";
import ReactEcharts from 'echarts-for-react';

export default class Line extends Component {

    constructor(props) {
        super(props)
        this.state = {
            sales: [5, 20, 36, 10, 10, 20],
            stores: [15, 120, 6, 40, 110, 20]
        }
    }

    getOption = (sales, stores) => {
        return {
            color: ["#EDC878", "#96CDFA"],
            title: {
                text: '征信查询记录'
            },
            tooltip: {},
            legend: {
                data: ['查询次数', '查询机构数']
            },
            xAxis: {
                data: ["2019.11.3", "2019.11.6", "2019.11.9", "2019.11.12", "2019.11.15", "2019.11.18", "2019.11.21", "2019.11.24", "2019.11.27"]
            },
            yAxis: {},
            series: [{
                name: '查询次数',
                type: 'line',
                data: sales
            },
            {
                name: '查询机构数',
                type: 'line',
                data: stores
            }]
        };
    };

    render() {
        const {sales,stores} = this.state;
        return(
            <div>
                <ReactEcharts option={this.getOption(sales,stores)} />
            </div>
        )
    }
}

/**
 * 饼状图
 */
import React ,{Component} from 'react';
import {Card} from 'antd'
import ReactEcharts from 'echarts-for-react';
export default class Pie extends Component{
    constructor(props){
        super(props)
        this.state = {
            // sales:[5, 20, 36, 10, 10, 20],
            // stores:[15, 120, 6, 40, 110, 20]
        }
    }
    /**
     * 饼图的配置对象
     */
    getOption = (sales,stores) =>{
        return {
            // title : {
            //     text: '某站点用户访问来源',
            //     subtext: '纯属虚构',
            //     x:'center'
            // },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['5000万以上','1000-5000万','100-1000万','10-100万']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'5000万以上'},
                        {value:310, name:'1000-5000万'},
                        {value:234, name:'100-1000万'},
                        {value:135, name:'10-100万'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
    }
    render(){
        // const {sales,stores} = this.state;
        return(
            <div>
                <Card>
                    <ReactEcharts option={this.getOption()} />
                </Card>
            </div>
        )
    }
}

/**
 * 关联关系图谱
 */
import React, { Component } from "react";
import ReactEcharts from 'echarts-for-react';

export default class Graph extends Component {

    constructor(props) {
        super(props)
        this.state = {
        }
    }


    getOption = () => {
        let mainRelationShip = {
            人脸ID: "主要"
        }
        let phoneNum = {
            "手机号:13856978256": "111",
            "手机号:13998745632": "13998745632",
            "手机号:18812345678": "18812345678",
            "手机号:16812345678": "16812345678",
            "手机号:13856971111": "13856978256",
            "手机号:13998742222": "13998745632",
            "手机号:18812344444": "18812345678",
            "手机号:16812343333": "16812345678",
            "手机号:13878978256": "13856978256",
            "手机号:137895632": "13998745632",
        };
        let phoneIMSI = ["111", "次数:3，匹配度:30%", "次数:2，匹配度:26%",
            "次数:2，匹配度:26%", "次数:2，匹配度:26%", "次数:2，匹配度:26%",
            "匹配手机号码", "匹配手机号码", "匹配手机号码", "匹配手机号码"
        ]
        let carNum = {
            "车牌号码:豫AJ9685": "豫AJ9685",
            "车牌号码:豫AG5123": "豫AG5123",
            "车牌号码:豫AG6822": "豫AG6822",
            "车牌号码:豫CJ9685": "豫AJ9685",
            "车牌号码:豫AD5123": "豫AG5123",
            "车牌号码:豫AT6822": "豫AG6822",
            "车牌号码:豫AG6622": "豫AG6822",
            "车牌号码:豫CJ9885": "豫AJ9685",
        };
        let relationShipCar = ["匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码"]
        let legendes = ["手机IMSI", "人脸ID", "车牌号码", "人脸ID"];

        let listdata = [];
        let links = [];
        let texts = [];
        // listData
        for (let i in mainRelationShip) {
            listdata.push({
                name: i,
                showName: mainRelationShip[i],
                label: {
                    position: 'bottom'
                }
            })
            i++
        }
        for (let i in phoneNum) {
            listdata.push({
                name: i,
                showName: phoneNum[i],
                label: {
                    position: 'bottom'
                }
            })
        }
        for (let i in carNum) {
            listdata.push({
                name: i,
                showName: carNum[i],
                label: {
                    position: 'bottom'
                }
            })
        }
        // links
        let j = 0;
        for (let i in phoneNum) {
            links.push({
                source: i,
                target: legendes[3],
                value: phoneIMSI[j],
                lineStyle: {
                    normal: {
                        color: '#e8b842'
                    }
                }
            })
            j++
        }
        for (let i in carNum) {
            links.push({
                source: i,
                target: legendes[3],
                value: relationShipCar[i],
                lineStyle: {
                    normal: {
                        color: '#41b1ef'
                    }
                }
            })
            j++
        }
        // tests
        for (var i = 0; i < legendes.length; i++) {
            texts.push({
                "name": legendes[i]
            })
        }
        // console.log(listdata, links);


        return {

            title: {
                text: ''
            },
            tooltip: {},
            animationDuration: 1000,
            // animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    textStyle: {
                        color: '#000000',
                        fontWeight: 'normal',
                        fontSize: "12" //字体大小
                    },
                    formatter: function(params) {
                        return params.data.showName
                    },
                    fontSize: 18,
                    fontStyle: '600',
                }
            },
            //  上方提示文字
            legend: {
                data: legendes,
                textStyle: {
                    color: '#000000'
                },
                icon: 'circle',
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                top: 20,
                bottom: 20,
                itemWidth: 10,
                itemHeight: 10
            },
            series: [

                {
                    type: 'graph',
                    layout: 'force',
                    force: {
                        repulsion: 120,
                        gravity: 0,
                        edgeLength: 150,
                        layoutAnimation: true
                    },
                    symbolSize: 40,     //  元素圈大小
                    focusNodeAdjacency: false,  //  鼠标移动到某一元素实现高亮
                    roam: false,     // 是够开启鼠标的缩放和平移
                    draggable: false,   // 阶段是否可拖拽
                    categories: [
                        {
                            name: '担保汇总'
                        },
                        {
                            name: '手机号',
                            itemStyle: {
                                normal: {
                                    color: "#4592FF",
                                }
                            }
                        },
                    ],
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#000',
                                fontSize: 12
                            },
                        }
                    },

                    edgeSymbolSize: [4, 50],
                    edgeLabel: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 10
                            },
                            formatter: "{c}"
                        }
                    },
                    data: listdata,
                    links: links,
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 1,
                            curveness: 0
                        }
                    }
                }
            ],
        };
    };

    render() {

        return (
            <ReactEcharts option={this.getOption()} style={{height: "500px", width: "600px"}}/>
        )
    }
}

3.效果图：

a.柱状图

b.饼状图

c.折线图

d.关联关系图谱