Echarts之球形水波纹

球形水波纹是比较与饼图展现方式更灵动更高级的一种
echarts-liquidfill 水球图插件官网: https://www.npmjs.com/package/echarts-liquidfill

1.展示图：【左侧即为水波图，右侧是想要展示的信息列】

2.实现过程

①、 需要下载echarts及liquidfill 插件

安装命令：
npm install echarts
npm install echarts-liquidfill

以下为我的版本号：

"echarts": "^4.1.0",
"echarts-liquidfill": "^2.0.2",

注意：【echarts-liquidfill@3兼容echarts@5、 echarts-liquidfill@2兼容echarts@4】

②、引用

import * as echarts from 'echarts';
import 'echarts-liquidfill'

③、代码

<template><div class="pie-overall-yield-container"><div class="content-title">Overall Yield</div><div id="pie-overall-yield" class="chart"></div><div class="nums-overall-yield"><div class="nums"><span class="num white">1036</span><span class="type">All</span></div><div class="nums"><span class="num blue">1036</span><span class="type">Target</span></div><div class="nums"><span class="num turquoise">99%</span><span class="type">Target Per</span></div></div></div>
</template><script>
import * as echarts from "echarts";
import "echarts-liquidfill";
export default {name: "PieOverallYield",props: {completeList: Array,productionList: Array,},watch: {},data() {return {nums: [{ num: 1036, type: "All" },{ num: 1036, type: "Target" },{ num: "99%", type: "Target Per" },],};},methods: {// OverallYield 饼图pieChart(id) {const value = 0.52;let count = echarts.init(document.getElementById(id));let option = {title: {// 标题text: (value * 100).toFixed(0) + "%",textStyle: {// 标题的样式color: "#47c7ec", // 字体颜色fontFamily: "Microsoft YaHei", // 字体fontSize: 24,fontWeight: "bold",align: "center", // 文字的水平方式baseline: "middle",position: "inside",verticalAlign: "middle", // 文字的垂直方式},left: "center", // 定位top: "30%",},polar: {radius: ["65%", "60%"],center: ["50%", "50%"],},angleAxis: {max: 100,clockwise: false,//刻度增长是否按顺时针，默认顺时针(true)。axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},},radiusAxis: {type: "category",show: true,axisLabel: {show: false,},axisLine: {show: false,},axisTick: {show: false,},},series: [{type: "liquidFill",//定义类型radius: "55%",waveAnimation: true,z: 1,data: [{value: 0.52,direction: "left",//移动方向amplitude: 20, // 水波纹的振幅itemStyle: {//一个波浪设置透明度normal: {color: "#58419a",},},// 悬浮后的样式emphasis: {itemStyle: {opacity: 0.9,},},},{value: 0.41,direction: "right",amplitude: 10, // 水波纹的振幅itemStyle: {normal: {color: "#1b87b1",},},// 悬浮后的样式emphasis: {itemStyle: {opacity: 0.9,},},},{value: 0.2,direction: "left",amplitude: 5, // 水波纹的振幅itemStyle: {normal: {color: "#3a41ef",},},// 悬浮后的样式emphasis: {itemStyle: {opacity: 0.9,},},},],// 改变水球图的形状，比如 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'(默认为circle)shape: 'circle' //水球图边框属性设定outline: {show: true,borderDistance: 0, // 设置和外层轮廓的间距itemStyle: {borderWidth: 0, // 设置外层边框宽度// borderColor: 'red', // 设置外层边框颜色//  shadowBlur: 'none' // 消除外层边框阴影},},itemStyle: {opacity: 0.9, // 波浪的透明度shadowBlur: 0, // 波浪的阴影范围},backgroundStyle: {//  borderWidth: 4, // 修改背景边框宽度//  borderColor: 'green' // 修改背景边框的颜色color: "#212b3a", // 图表的背景颜色},label: {// 数据展示样式show: false,color: "#000",insideColor: "#fff",fontSize: 24,fontWeight: 400,align: "center",baseline: "middle",position: "inside",},},{name: "",type: "bar",roundCap: true,z: 2,showBackground: true,backgroundStyle: {color: "#15181e",},data: [52],coordinateSystem: "polar",itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0.5, 1, [{offset: 0,color: "#5acef2",},{offset: 0.7,color: "#5073fb",},{offset: 1,color: "#6ae8d8",},]),},},},],};count.setOption(option);window.addEventListener("resize", () => {if (count) {count.resize(); // 不报错}});},},mounted() {this.pieChart("pie-overall-yield");},
};
</script><style scoped lang="scss">
.pie-overall-yield-container {width: 100%;height: 100%;.content-title {height: 0.5rem;background: url("../../../assets/images/smtMonitor/sip/overall-title.png") no-repeat center;background-size: 30%;color: #e8e7e7;text-align: center;line-height: 0.5rem;font-size: 0.24rem;font-weight: 350;letter-spacing: 0em;}.chart {width: 50%;height: calc(100% - 20px);float: left;}.nums-overall-yield {display: inline-block;width: 50%;height: calc(100% - 20px);padding: 0.4rem 0;.nums {margin: 0.2rem 0.2rem 0;.num {font-size: 0.32rem;display: inline-block;margin-right: 0.1rem;width: 0.8rem;font-weight: bold;}.type {color: #9b9a9a;font-size: 0.18rem;}.white {color: #fff;}.blue {color: #0063ff;}.turquoise {color: #54defe;}}}
}
</style>

Echarts之球形水波纹相关推荐

echarts 单独实现水波纹涟漪效果
效果: 上代码可以直接在 echarts 示例中运行 ( 建立在直角系中 ): var option = {xAxis : [{boundaryGap:false,type : 'category', ...
echarts legend不显示_ECharts地图系列一（定制区域水波纹显示，以及其他区域圆点颜色不统一）...
Echarts水波纹地点显示,以及颜色点随机系列篇在现今的前端开发中,图表的展示是不可或缺的,也会接触到一些地图区域的展示,例如,现实场景下,需求需要现实当今公司在全国乃至世界的分部分布情况,这时就 ...
android自定义水波纹,Android自定义View——实现水波纹效果类似剩余流量球(示例代码)...
最近突然手痒就想搞个贝塞尔曲线做个水波纹效果玩玩,终于功夫不负有心人最后实现了想要的效果,一起来看下吧: 效果图镇楼一:先一步一步来分解一下实现的过程需要绘制一个正弦曲线(sin)或者余弦曲线(c ...
震惊！原来Android OpenGL ES可以这样用，实现（水波纹）涟漪效果超惊艳！
用几行代码实现惊艳的特效. 作者:字节流动链接:https://juejin.im/post/5ed9c9445188254344768bd6 水波纹效果原理最近一个做视频滤镜的朋友,让我给他做一 ...
android自定义WaveView水波纹控件
WaveView Github Repository and libaray https://github.com/onlynight/WaveView 首先看下演示demo demo中可以看到不同高 ...
Android自定义水波纹动画Layout
Android自定义水波纹动画Layout 源码是双11的时候就写好了,但是我觉得当天发不太好,所以推迟了几天,没想到过了双11女友就变成了前女友,桑心.唉不说了,来看看代码吧. 展示效果 Hi前辈 ...
水波纹效果，附工程源码
2019独角兽企业重金招聘Python工程师标准>>> 实现的一个水波纹效果,附工程代码. 这个可以用任意图片响应触屏事件显示波纹效果. 很多方面都能用得上,比如动态桌面,游戏,水族 ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
android 图片处理过程中添加进度条,『Android自定义View实战』给我一个图标，还你一个水波纹进度球...
前言我们都知道,平时表现进度的方式有千千万万种(没有UI想不到的,只有你做不到的= =.),其中有一种就是水波纹进度球的形式,网上很多种实现都是直接采用纯色填充的方式,即水波纹都是纯颜色填充,效果看 ...

Echarts之球形水波纹

Echarts之球形水波纹相关推荐

最新文章

热门文章