如何实现动态水球图 --》 echars结合echarts-liquidfill实现
2024-08-29 00:36:25
1）项目中作为项目依赖，安装到项目当中(注意必须要结合echars)
npm install echarts vue-echarts--save
npm install echarts-liquidfill --save
2）在需要使用水晶球的组件里引入liquidFill.js
import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入
3）在模板中加入挂载水晶球的DOM节点
<div id="myChartWhater" :style="{width: '340px', height: '220px',}"></div>
4）在方法methods中添加liquidFill调用方法，如
在data中先定义：score: 0.8,healthyName: "良好"，
initWater() {
let value = this.score;
let myChart = this.echarts.init(document.getElementById("myChartWhater"));
let colorScore = this.score * ;
let colorList = [];
if (colorScore >= ) {
let color1 = "rgb(45,224,1135)";
let color2 = "rgb(74,227,141)";
colorList.push(color1);
colorList.push(color2);
} else if (colorScore >= && colorScore < ) {
let color1 = "rgb(41,145,235)";
let color2 = "rgb(0,137,255)";
colorList.push(color1);
colorList.push(color2);
} else if (colorScore >= && colorScore < ) {
let color1 = "rgb(219,185,246)";
let color2 = "rgb(253,208,0)";
colorList.push(color1);
colorList.push(color2);
} else if (colorScore < ) {
let color1 = "rgb(207,74,84)";
let color2 = "rgb(243,17,34)";
colorList.push(color1);
colorList.push(color2);
}
var data = [];
data.push(value);
data.push(value);
myChart.setOption({
backgroundColor: "white", //容器背景颜色
title: {
text: "",
textStyle: {
fontWeight: "normal",
fontSize: ,
color: "rgb(97, 142, 205)"
}
},
series: [
{
type: "liquidFill",
radius: "80%", //水球的半径
data: data,
backgroundStyle: {
color: "white"
},
label: {
normal: {
formatter:
"{a|" +
(value * ).toFixed() +
"}" +
" " +
"\n" +
"\n" +
"{b|" +
this.healthyName +
"}",
textStyle: {
fontSize: //字体大小
},
position: ["50%", "50%"],
rich: {
//富文本 对字体进一步设置样式。a对应的value,b对应的healthyName
a: {
fontSize: ,
lineHeight: ,
fontWeight: "bold",
padding: [, , , ]
},
b: {
fontSize: ,
lineHeight: ,
fontWeight: "bold"
}
}
}
},
outline: {
show: true, //是否显示轮廓 布尔值
borderDistance: , //外部轮廓与图表的距离 数字
itemStyle: {
borderColor: "#edf2f6", //边框的颜色
borderWidth: //边框的宽度
}
},
color: [...colorList]
}
]
});
}
5）在mounted（）{}中调用 initWater方法
页面完成效果如：
大功告成！！！！
最新文章
- Oracle数据库中序列用法讲解
- ubuntu下规避终端打开gvim出现的错误
- PHP定义静态方法的原则
- PAT (Advanced Level) 1043. Is It a Binary Search Tree (25)
- 大咖云集！IMWebConf 2017 前端大会即将在深圳盛大开幕
- Windows下Apache添加SSL模块
- python 字符串中的%s与format
- Entity Framework DBContext 增删改查深度解析
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(九)
- sql语句表连接删除
- SecureCRT窗口输出代码关键字高亮设置
- Java 设置PDF文档背景——单色背景、图片背景
- Hadoop 本地模式安装
- 生产机器禁止ROOT远程SSH登录
- php模拟post提交数据,用处很多,可用来网站的采集,登陆等等
- jquery中event对象属性与方法小结
- spring 中c3p0的优化配置
- UVa 1596 Bug Hunt (STL栈)
- jquery appaend元素中id绑定事件失效问题
- Java高级软件工程师面试题