需求
在前端的工作中难免要遇到用各种图形去展示数据，这时一般都会涉及到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}} />
)
}
}| swidth | 设置的宽 |
| sheight | 设置的高 |
| keys | 唯一的key值 |
| svalue | 设置的内容 |
| cname | 设置的文字 |
当然 如果想封装的更为灵活一些，你可以将 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/
