日常水位图
实现水位图，可以选择两种：
1：echart和echarts-liquidfill两种文件，vue项目
2：采用charts.ant.design运用react项目
效果图如下
1：水位图渐变，2：百分比3：水位在动
hygrometer.setOption({
tooltip: {
show: true,
formatter: function (a) {
var str = "";
var dataValueNum = Number(Number(a.value) * 100).toFixed(2);
str = `满意率：${dataValueNum}%`;
return str;
},
},
title: {
text: "满意率",
textStyle: {
color: "#fff", // 字体颜色
fontSize: 18,
fontWeight: "400",
align: "center", // 文字的水平方式
baseline: "middle",
position: "inside",
verticalAlign: "middle", // 文字的垂直方式
},
left: "center", // 定位
top: "20%",
},
series: [
{
type: "liquidFill",
radius: "95%",
waveAnimation: true,
data: [
{
value: dataValue,
direction: "left",
itemStyle: {
normal: {
// color: "#1890ff",
color: {//配置水位颜色从上到下渐变
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#06305a",
},
{
offset: 1,
color: "#1890ff",
},
],
global: false,
},
},
},
},
],
outline: {
// show: true , //是否显示轮廓 布尔值
borderDistance: 2, // 外部轮廓与图表的距离 数字
itemStyle: {
borderColor: "#1890ff", // 边框的颜色
borderWidth: 2,
},
},
itemStyle: {
opacity: 0.8, // 波浪的透明度
shadowBlur: 0, // 波浪的阴影范围
},
backgroundStyle: {
color: "#060715", // 图表的背景颜色
},
label: {
// 数据展示样式
formatter: function (a) {
var str = "";
var dataValueNum = Number(Number(a.value) * 100).toFixed(2);
str = `${dataValueNum}%`;
return str;
},
show: true,
color: "#fff",
insideColor: "#fff",
fontSize: 26,
fontWeight: 400,
align: "center",
baseline: "middle",
position: "inside",
},
},
],
});
},
网友评论