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}} />
-
)
-
}
-
}
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/
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfbfga
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01