Echart图组件封装

需求

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

实现

1.  
   import React, { Component } from 'react'
2.  
   const echarts = require('echarts');
3.  
    
4.  
   export default class Chart extends Component {
5.  
   constructor(props){
6.  
   super(props)
7.  
   }
8.  
    
9.  
   componentDidMount(){
10.  
    this.loadTeamAppEcharts()
11.  
    }
12.  
    loadTeamAppEcharts = () => {
13.  
    const {keys, svalue, cname} = this.props
14.  
    const echartsId = '#' keys 'clusterInfo'
15.  
    // 1.创建实例对象
16.  
    const myEcharts1 = echarts.init(document.querySelector(echartsId));
17.  
    // 2. options配置项
18.  
    var datas = {
19.  
    value: 80,
20.  
    title: "健康度",
21.  
    type: 1,
22.  
    radiusType: 1,
23.  
    };
24.  
    var fontColor = "#fff";
25.  
    var seriesName = "";
26.  
    let noramlSize = 16;
27.  
    let state = "";
28.  
    let center = ["50%", "70%"];
29.  
    let wqradius, nqradius, kdradius;
30.  
     
31.  
    wqradius = "100%";
32.  
    nqradius = "100%";
33.  
    kdradius = "100%";
34.  
     
35.  
     
36.  
     
37.  
    let wqColor = svalue > 80 ? "#f5222d" : 'rgba(80, 152, 237,0.9)';
38.  
    let nqColor = [
39.  
    [
40.  
    datas.value / 100,
41.  
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
42.  
    {
43.  
    offset: 0,
44.  
    color: svalue > 80 ? "#f5222d" : "#3d54c4",
45.  
    },
46.  
    {
47.  
    offset: 0.5,
48.  
    color: svalue > 80 ? "#f5222d" : "#3d54c4",
49.  
    },
50.  
    {
51.  
    offset: 1,
52.  
    color: svalue > 80 ? "#f5222d" : "#3d54c4",
53.  
    },
54.  
    ]),
55.  
    ],
56.  
    [1, "rgb(199, 222, 239)"],
57.  
    ];
58.  
    const option = {
59.  
    backgroundColor:"#fff",
60.  
    title: {
61.  
    //分配率文字配置
62.  
    show: true,
63.  
    x: "left",
64.  
    bottom: "-3%",
65.  
    left: "14%",
66.  
    text: cname,
67.  
    textStyle: {
68.  
    fontWeight: "500",
69.  
    fontSize: 12,
70.  
    color: svalue > 80 ? "#f5222d" : "#79828f",
71.  
    },
72.  
    },
73.  
    tooltip: {
74.  
    show: false
75.  
    },
76.  
    series: [
77.  
    {
78.  
    name: "刻度文字",
79.  
    type: "gauge",
80.  
    radius: "100%", //仪表盘大小
81.  
    center: ["50%", "74%"],
82.  
    startAngle: 180,
83.  
    endAngle: 0,
84.  
    z: 2,
85.  
    splitNumber: 5,
86.  
    min: 0,
87.  
    max: 100,
88.  
    axisTick: {
89.  
    show: false,
90.  
    lineStyle: {
91.  
    color: "#0af", //刻度线
92.  
    width: 1, //刻度线宽度
93.  
    },
94.  
    length: 3, //刻度线长度
95.  
    splitNumber: 1, //刻度线分割比例
96.  
    },
97.  
    splitLine: {
98.  
    show: false,
99.  
    },
100.  
     axisLine: {
101.  
     lineStyle: {
102.  
     width: 25,
103.  
     opacity: 0,
104.  
     },
105.  
     },
106.  
     axisLabel: {
107.  
     distance: -34, //外层文字位置
108.  
     fontSize: 10, //文字大小
109.  
     color: svalue > 80 ? "#f5222d" : "#3d54c4", //颜色
110.  
     },
111.  
     pointer: {
112.  
     show: true,
113.  
     width: 2, //指针
114.  
     length: "70%",
115.  
     },
116.  
     itemStyle: {
117.  
     normal: {
118.  
     //color: "#0af",//wqColor
119.  
     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
120.  
     {
121.  
     offset: 0,
122.  
     color: svalue > 80 ? "#f5222d" : "#3d54c4",
123.  
     },
124.  
     {
125.  
     offset: 0.5,
126.  
     color: svalue > 80 ? "#f5222d" : "#3d54c4",
127.  
     },
128.  
     {
129.  
     offset: 1,
130.  
     color: svalue > 80 ? "#f5222d" : "#3d54c4",
131.  
     },
132.  
     ]),
133.  
     },
134.  
     },
135.  
     detail: {
136.  
     show: true,
137.  
     offsetCenter: [24, "39%"], //显示数值的位置
138.  
     color: svalue > 80 ? "#f5222d" : "#3d54c4",
139.  
     fontSize: 20,
140.  
     rich: {
141.  
     value: {
142.  
     fontSize: 20,
143.  
     lineHeight: 10,
144.  
     color: svalue > 80 ? "#f5222d" : "#3d54c4",
145.  
     fontWeight: "700",
146.  
     },
147.  
     company: {
148.  
     fontSize: 10,
149.  
     lineHeight: 20,
150.  
     color: svalue > 80 ? "#f5222d" : "#3d54c4",
151.  
     },
152.  
     },
153.  
     valueAnimation: true,
154.  
     formatter: "{value}%",
155.  
     },
156.  
     data: [
157.  
     {
158.  
     value: svalue,
159.  
     },
160.  
     ],
161.  
     },
162.  
     {
163.  
     name: "内层盘",
164.  
     type: "gauge",
165.  
     z: 2,
166.  
     radius: "85%",
167.  
     startAngle: 180,
168.  
     endAngle: 0,
169.  
     center: ["49%", "70%"],
170.  
     axisLine: {
171.  
     lineStyle: {
172.  
     color: nqColor,
173.  
     width: 10,
174.  
     opacity: 1,
175.  
     },
176.  
     },
177.  
     splitNumber: 5,
178.  
     min: 0,
179.  
     max: 100,
180.  
     axisTick: {
181.  
     show: false,
182.  
     },
183.  
     splitLine: {
184.  
     show: true,
185.  
     length: 4,
186.  
     lineStyle: {
187.  
     color: svalue > 80 ? "#f5222d" : "#3d54c4",
188.  
     width: 1,
189.  
     shadowBlur: 0.5,
190.  
     opacity: 0.9,
191.  
     shadowOffsetX:0,
192.  
     shadowOffsetY: 0,
193.  
     },
194.  
     },
195.  
     itemStyle: {
196.  
     //指针阴影
197.  
     shadowBlur: 10,
198.  
     shadowColor: svalue > 80 ? "#f5222d" : "rgba(0, 103, 255, 0.2)",
199.  
     shadowOffsetX: 0,
200.  
     shadowOffsetY: 8,
201.  
     },
202.  
     axisLabel: {
203.  
     show: false,
204.  
     },
205.  
     pointer: {
206.  
     show: false,
207.  
     },
208.  
      
209.  
     detail: {
210.  
     show: false,
211.  
     },
212.  
     },
213.  
     ],
214.  
     };
215.  
     // 3. 配置项和数据给实例化对象
216.  
     myEcharts1.setOption(option);
217.  
     // 4. 当我们浏览器缩放的时候，图表也等比例缩放
218.  
     window.addEventListener('resize', function () {
219.  
     // 让我们的图表调用 resize这个方法
220.  
     myEcharts1.resize();
221.  
     });
222.  
     };
223.  
     render() {
224.  
     const {keys, swidth, sheight} = this.props
225.  
     return (
226.  
     <div id={keys 'clusterInfo'} style={{width: swidth,height: sheight}} />
227.  
     )
228.  
     }
229.  
     }

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

 使用

1.  
   {/* chart图 */}
2.  
   <div className={styles.chartsStyle}>
3.  
    
4.  
   <div>
5.  
   <Charts keys={'upcpu' `${1}`} svalue={cpuUsed} cname="CPU" swidth='200px' sheight='120px' />
6.  
   </div>
7.  
   <div>
8.  
   <Charts keys={'upcpu' `${2}`} svalue={Number(memoryUsed) == 0 ? 0 : Number(memoryUsed)} cname={formatMessage({id:'enterpriseColony.mgt.cluster.memory'})} swidth='200px' sheight='120px' />
9.  
   </div>
10.  
    <div>
11.  
    <Charts keys={'upcpu' `${3}`} svalue={Number(diskUsed) == 0 ? 0 : Number(diskUsed)} cname={formatMessage({id:'enterpriseColony.mgt.cluster.store'})} swidth='200px' sheight='120px' />
12.  
    </div>
13.  
    <div>
14.  
    <p>
15.  
    {node_ready == {} ? 0 : node_ready || 0}
16.  
    <span>
17.  
    /{all_nodes || 0}
18.  
    </span>
19.  
    </p>
20.  
    </div>
21.  
    <div>
22.  
    <p>
23.  
    {services_status && services_status.running || 0}
24.  
    </p>
25.  
    </div>
26.  
    </div>
27.  
    </>

其他 

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

echarts官网：Examples - Apache ECharts

MCChart官网：MCChart 

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

这篇好文章是转载于：学新通技术网