Echart图组件封装

需求

        在前端的工作中难免要遇到用各种图形去展示数据，这时一般都会涉及到echarts图，那么为了方便使用，我们可以封装一个简单的echart组件去满足一些基本的需求。

实现

import React, { Component } from 'react'
const echarts = require('echarts');
 
export default class Chart extends Component {
    constructor(props){
        super(props)
    }
    
    componentDidMount(){
        this.loadTeamAppEcharts()
    }
    loadTeamAppEcharts = () => {
        const {keys, svalue, cname} = this.props
        const echartsId = '#'+ keys +'clusterInfo'
        // 1.创建实例对象
        const myEcharts1 = echarts.init(document.querySelector(echartsId));
        // 2. options配置项
        var datas = {
            value: 80,
            title: "健康度",
            type: 1,
            radiusType: 1,
          };
          var fontColor = "#fff";
          var seriesName = "";
          let noramlSize = 16;
          let state = "";
          let center = ["50%", "70%"];
          let wqradius, nqradius, kdradius;
      
          wqradius = "100%";
          nqradius = "100%";
          kdradius = "100%";
      
        
      
          let wqColor = svalue > 80 ? "#f5222d" : 'rgba(80, 152, 237,0.9)';
          let nqColor = [
            [
              datas.value / 100,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: svalue > 80 ? "#f5222d" : "#3d54c4",
                },
                {
                  offset: 0.5,
                  color: svalue > 80 ? "#f5222d" : "#3d54c4",
                },
                {
                  offset: 1,
                  color: svalue > 80 ? "#f5222d" : "#3d54c4",
                },
              ]),
            ],
            [1, "rgb(199, 222, 239)"],
          ];
        const option = {
            backgroundColor:"#fff",
            title: {
              //分配率文字配置
              show: true,
              x: "left",
              bottom: "-3%",
              left: "14%",
              text: cname,
              textStyle: {
                fontWeight: "500",
                fontSize: 12,
                color: svalue > 80 ? "#f5222d" : "#79828f",
              },
            },
            tooltip: {
                show: false
            },
            series: [
              {
                name: "刻度文字",
                type: "gauge",
                radius: "100%", //仪表盘大小
                center: ["50%", "74%"],
                startAngle: 180,
                endAngle: 0,
                z: 2,
                splitNumber: 5,
                min: 0,
                max: 100,
                axisTick: {
                  show: false,
                  lineStyle: {
                    color: "#0af", //刻度线
                    width: 1, //刻度线宽度
                  },
                  length: 3, //刻度线长度
                  splitNumber: 1, //刻度线分割比例
                },
                splitLine: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    width: 25,
                    opacity: 0,
                  },
                },
                axisLabel: {
                  distance: -34, //外层文字位置
                  fontSize: 10, //文字大小
                  color: svalue > 80 ? "#f5222d" : "#3d54c4", //颜色
                },
                pointer: {
                  show: true,
                  width: 2, //指针
                  length: "70%",
                },
                itemStyle: {
                  normal: {
                    //color: "#0af",//wqColor
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color:  svalue > 80 ? "#f5222d" : "#3d54c4",
                      },
                      {
                        offset: 0.5,
                        color:  svalue > 80 ? "#f5222d" : "#3d54c4",
                      },
                      {
                        offset: 1,
                        color:  svalue > 80 ? "#f5222d" : "#3d54c4",
                      },
                    ]),
                  },
                },
                detail: {
                  show: true,
                  offsetCenter: [24, "39%"], //显示数值的位置
                  color:  svalue > 80 ? "#f5222d" : "#3d54c4",
                  fontSize: 20,
                  rich: {
                    value: {
                      fontSize: 20,
                      lineHeight: 10,
                      color:  svalue > 80 ? "#f5222d" : "#3d54c4",
                      fontWeight: "700",
                    },
                    company: {
                      fontSize: 10,
                      lineHeight: 20,
                      color:  svalue > 80 ? "#f5222d" : "#3d54c4",
                    },
                  },
                  valueAnimation: true,
                  formatter: "{value}%",
                },
                data: [
                  {
                    value: svalue,
                  },
                ],
              },
              {
                name: "内层盘",
                type: "gauge",
                z: 2,
                radius: "85%",
                startAngle: 180,
                endAngle: 0,
                center: ["49%", "70%"],
                axisLine: {
                  lineStyle: {
                    color: nqColor,
                    width: 10,
                    opacity: 1,
                  },
                },
                splitNumber: 5,
                min: 0,
                max: 100,
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: true,
                  length: 4,
                  lineStyle: {
                    color:  svalue > 80 ? "#f5222d" : "#3d54c4",
                    width: 1,
                    shadowBlur: 0.5,
                    opacity: 0.9,
                    shadowOffsetX:0,
                    shadowOffsetY: 0,
                  },
                },
                itemStyle: {
                  //指针阴影
                  shadowBlur: 10,
                  shadowColor:  svalue > 80 ? "#f5222d" : "rgba(0, 103, 255, 0.2)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 8,
                },
                axisLabel: {
                  show: false,
                },
                pointer: {
                  show: false,
                },
      
                detail: {
                  show: false,
                },
              },
            ],
        };
        // 3. 配置项和数据给实例化对象
        myEcharts1.setOption(option);
        // 4. 当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener('resize', function () {
          // 让我们的图表调用 resize这个方法
          myEcharts1.resize();
        });
      };
  render() {
    const {keys, swidth, sheight} = this.props
    return (
        <div id={keys + 'clusterInfo'} style={{width: swidth,height: sheight}} />
    )
  }
}复制

        当然 如果想封装的更为灵活一些，你可以将 option也作为参数传入该组件。这样就能实现不同的图标了。这里我就不过多赘述。

 使用

 {/* chart图 */}
                            <div className={styles.chartsStyle}>
 
                                <div>
                                    <Charts keys={'upcpu' + `${1}`} svalue={cpuUsed} cname="CPU" swidth='200px' sheight='120px' />
                                </div>
                                <div>
                                    <Charts keys={'upcpu' + `${2}`} svalue={Number(memoryUsed) == 0 ? 0 : Number(memoryUsed)} cname={formatMessage({id:'enterpriseColony.mgt.cluster.memory'})} swidth='200px' sheight='120px' />
                                </div>
                                <div>
                                    <Charts keys={'upcpu' + `${3}`} svalue={Number(diskUsed) == 0 ? 0 : Number(diskUsed)} cname={formatMessage({id:'enterpriseColony.mgt.cluster.store'})} swidth='200px' sheight='120px' />
                                </div>
                                <div>
                                    <p>
                                        {node_ready == {} ? 0 : node_ready || 0}
                                        <span>
                                            /{all_nodes || 0}
                                        </span>
                                    </p>
                                </div>
                                <div>
                                    <p>
                                        {services_status && services_status.running || 0}
                                    </p>
                                </div>
                            </div>
                        </>复制

其他 

echarts配置项使用手册：Documentation - Apache ECharts

echarts官网：Examples - Apache ECharts

MCChart官网：MCChart 

isqqw官网： https://www.isqqw.com/