使用echarts 仪表盘制作进度效果

好久没写博客了，感觉没什么技术难点需要记录，今天就把这两天遇到的比较费时费力的东西记录一下吧，代码没有注释，逻辑不难，echarts仪表盘的配置是最花时间的。老板就给了一个静态图片，取色都是用的qq 取色和Snipaste,后面发现两个软件的取色居然还不一样。其他什么也没有，有个别的透明图标，叫用代码画出来。还要一毛一样，沉思了，这种东西要说好弄，就是太过于繁琐了。

其他好说，下面的居住信息要和设计原稿一致。下面第一张图是boss发的图片

这是最后的成品图片

不啰嗦了。下面来晒代码。

<template><div class="bottom"><sub-title text="居住信息" size="18" /><el-row><el-col :span="5" :push='2'><el-col>{{source['num_total_households']}}</el-col><el-col>总户数</el-col></el-col><el-col :span="5" :push='2'><el-col>{{source['num_Resident']}}</el-col><el-col>居住人数</el-col></el-col><el-col :span="5" :push='2'><el-col>{{source['num_owner']}}</el-col><el-col>业主人数</el-col></el-col><el-col :span="5" :push='2'><el-col>{{source['num_tenant']}}</el-col><el-col>租户人数</el-col></el-col></el-row><el-row><el-col :span="8"><div class="install_first" style="height: inherit"></div></el-col><el-col :span="16"><el-col>住房空置房</el-col><el-col>1257</el-col><el-col>数量<span>315</span></el-col><el-col>占比<span>25%</span></el-col><div></div><div><span></span></div></el-col></el-row><el-row><el-col :span="8"><div class="install_second" style="height: inherit"></div></el-col><el-col :span="16"><el-col>住房空置房</el-col><el-col>1257</el-col><el-col>数量<span>315</span></el-col><el-col>占比<span>25%</span></el-col><div></div><div><span></span></div></el-col></el-row><el-row><el-col :span="8"><div class="install_third" style="height: inherit"></div></el-col><el-col :span="16"><el-col>住房空置房</el-col><el-col>1257</el-col><el-col>数量<span>315</span></el-col><el-col>占比<span>25%</span></el-col><div></div><div><span></span></div></el-col></el-row></div>
</template><script>
import subTitle from "@/components/item_title.vue";
import { reside } from "@/data/datas";
const install = {install_first: null,install_second: null,install_third: null
};
export default {name: "reside",// name: '居住信息',components: { subTitle },data() {return {timer: { install_first: null, install_second: null, install_third: null },source: {},statistics: [],obj: {first: '', second: '', third: ''}};},mounted() {this.source = reside;for(const key in install) this.init_charts(key);},methods: {init_charts(el, val) {install[el] = echarts.init(document.querySelector("." + el));const option = {series: [{type: "gauge",startAngle: 90,endAngle: -270,progress: { show: true, width: 5, color: '#00227d' },axisLabel: { show: false, },axisLine: {// 坐标轴线lineStyle: {// 属性lineStyle控制线条样式// color: [ [80 / 100, "#00217D"],[1, "#00217D"] ],//根据实际数据动态改变color: [[1, "#4bf3f9"]],width: 5, //半径shadowColor: "#4bf3f9", //默认透明shadowBlur: 5}},pointer: {show: false },axisTick: {// 坐标轴小标记lineStyle: {// 属性lineStyle控制线条样式color: "transparent", //坐标轴 小刻度线颜色shadowColor: "#fff", //默认透明shadowBlur: 10}},splitLine: { // 分隔线length: 20, // 属性length控制线长lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式width: 30,color: "transparent", //分割线shadowColor: "#fff", //默认透明shadowBlur: 10}},detail: {show : true ,borderColor: "#fff",shadowColor: "#fff", //默认透明textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: "200",fontSize: 26,color: "#FDFDFC"},formatter: "{value}{per|%}",rich: {per: { fontSize: 12, color: '#909399' },},offsetCenter: ["0", "5%"]},data: [{ value: 100 }]},{type: "gauge",radius: "55%",startAngle: 90,endAngle: -270,axisLabel: { show: false, },axisLine: {// 坐标轴线lineStyle: {// 属性lineStyle控制线条样式color: [ [80 / 100, "#00217D"],[1, "#00217D"] ],//根据实际数据动态改变width: 1,shadowColor: "#1F4088", //默认透明shadowBlur: 4}},pointer: {show: false },axisLabel: {show: false },axisTick: { show: false, },splitLine: { show: false, },detail: {show : false },data: [{ value: 100}]}]};const ceil = (n) => Math.ceil(n / 10);this.timer[el] = setInterval(() => {this.obj[el.split('_')[1]] = (Math.random() * 100).toFixed(0) - 0;option.series[0].data[0].value = this.obj[el.split('_')[1]];let sibling = document.querySelector("." + el).parentNode.nextElementSibling;let targetEl = sibling.lastElementChild;let Progress = ceil(this.obj[el.split('_')[1]]);targetEl.lastElementChild.style.width = "calc(" + ( Progress ) + '%' + " - 1%)";let previousEl = targetEl.previousSibling;previousEl.innerHTML = "";for (let i = 0; i < Progress / 10; i++ ) previousEl.appendChild(document.createElement("span"));install[el].setOption(option);}, 2021);}},beforeDestroy() {//清除定时器clearInterval(this.timer['install_first']);clearInterval(this.timer['install_second']);clearInterval(this.timer['install_third']);}//  End
};
</script><style lang='scss' scoped>
@mixin repeat() {background-size: 95% 100%;margin-left: 15px;height: 125px;& > .el-col {height: inherit;}& > :first-child {position: relative;p {position: absolute;top: 55px;left: 45px;font-size: 22px;span {font-size: 13px;color: $fontGrey;}}}& > :last-child {background: url("~@/assets/imgs/商铺空置房@2x.png") no-repeat;// 图片下面有background-size: 100% 100%;position: relative;right: 0.83333%;& > :nth-child(1) {position: absolute;top: 30px;left: 10px;}& > :nth-child(2) {position: absolute;top: 30px;right: -241px;}& > :nth-child(3) {position: absolute;top: 90px;left: 15px;font-size: 13px;span {margin-left: 30px;font-size: 14px;font-weight: 200;text-shadow: 5px 5px 5px #2fa8c7;}}& > :nth-child(4) {position: absolute;top: 90px;left: 140px;font-size: 13px;span {margin-left: 30px;font-size: 14px;font-weight: 200;}}& > :nth-child(5) {position: absolute;top: 57px;z-index: 2;width: 100%;height: 10px;padding: 0 5px;box-sizing: border-box;/deep/ span {display: inline-block;width: calc(10% - .9px);height: inherit;border-right: 1px solid #06153f;opacity: 0.5;margin-bottom: 10px;}}& > :nth-child(6) {position: absolute;top: 57px;width: 100%;height: 10px;padding: 0 5px;box-sizing: border-box;span {display: inline-block;height: inherit;background-image: linear-gradient(to right, #072652, #3BC8DE);transition: width 1s;margin-bottom: 10px;}}}
}
.bottom {@include border("55%");color: $themeWhite;& > :nth-child(2) {text-align: center;height: 45px;& > .el-col {height: inherit;position: relative;:first-child {font-size: 26px;}:last-child {margin-top: 5px;color: $fontGrey;font-size: 10px;}}& > :not(:nth-child(4)):after {content: "";position: absolute;right: 0px;display: inline-block;width: 1px;height: inherit;background: linear-gradient(to bottom, #072652, #034c8e, #042049);}}& > :nth-child(3) {@include repeat;}& > :nth-child(4) {@include repeat;}& > :nth-child(5) {@include repeat;}
}
</style>

datas和subTitle组件内容以及scss的color变量颜色和方法

<template><div><div class="sub-title-warp" :style="{textAlign: align, fontSize: size + 'px'}"><span>{{text}}</span></div></div>
</template><script>
//  import {} from ''export default {name: "sub_title",data() {return {};},props: {text: { type: String, default: "" },background: { type: Boolean, default: false },align: { type: String, default: 'left'},size: { type: String, default: '16' }},mounted() {},methods: {},computed: {}//  End
};
</script><style lang='scss' scoped>
.sub-title-warp {max-width: 65%;height: 39px;line-height: 39px;padding-left: 5px;.icon {display: inline-block;width: 25px;height: 25px;// background: url("~@/assets/img/小标题装饰块.png") center center/100% 100% no-repeat;transform: translateY(10px);}span {margin-left: 5px;font-size: inherit;color: $titleColor;}
}
</style>

export const reside = {num_total_households: 1415, // 总户数num_Resident: 1040, // 居住人数num_owner: 1040, // 业主人数num_tenant: 0, // 租户人数statistics: [{ num_vacant_room: 1257, number: 315, num_proportion: 25, str_room_type: "住房空置房" },{ num_vacant_room: 155, number: 0, num_proportion: 0, str_room_type: "商铺空置房" },{ num_vacant_room: 1415, number: 1100, num_proportion: 77.7, str_room_type: "整体入住率" },]
}

$borderTheme: #025E8E; // 盒子border 颜色
$themeWhite: #FDFDFC; // 主题白
$themeBox: rgb(6,21,63); // 盒子背景色
$ItembgColor: rgb(11,28,79); // 卡片背景色
$titleColor: #01D8E4; // 暗色 淡蓝色$fontLightBlue: #2DFDFC; // 亮色 淡蓝色
$fontLightGreen: #2DFB99; // 亮色 淡绿色
$fontDarkBlue: #039CAE;   // 暗色 淡蓝色$itemYellow: #F6B158;  // 亮色 浅黄色
$itemSkyblue: #58DAF6;  // 亮色 浅蓝色
$itemPurple: #CF28FF;  // 亮色 浅紫色
$itemBlue: #58ABF6;  // 亮色 蓝色$fontGrey: #B9BBC2; // 浅灰色
$fontrich: #909399; // 副灰色
$primary: #0468B5;
$warning: #C5263A; @mixin border($h) {border: 1px solid $borderTheme;background-color: $themeBox;height: #{$h};
}@mixin queue($w, $justify) {width: #{$w};height: 100%;display: flex;flex-direction: column;justify-content: #{$justify};
}@mixin card() {margin: 0 10px;padding: 0 15px;
}

如果你认真再看，我就讲一下实现思路吧，布局都是2/8分，左边图表，右侧数据，图表里面用了两个圆来实现视觉效果的。当然我最近做了很多echarts图例，里面附表作用都是起衬托作用的。右侧是取得进度百分比值向上取整除10%来添加元素。再使用css 给元素组加上右侧border效果实现刻度分隔符。上面所有适配度根据我的画面进行配置，觉得有误差的自行排查调整，当然实际中使用了定时器，记得销毁时候清除，否则会继续执行提示错误的。

我是前端小白，如果文章觉得不错请点赞支持一下吧！

使用echarts 仪表盘制作进度效果相关推荐

echarts 仪表盘带进度条
echarts 仪表盘带进度条最终结果思路:3个仪表盘叠加代码: echarts.min.js 下载放到同级文件 <!DOCTYPE html> <html lang=" ...
组态王怎么做进度条_三种方法制作进度条效果
进度条可以说出现在我们生活的方方面面,游戏.视频加载会碰到它,刷新会碰到它,就连网络不顺畅时也会碰到它.进度条不仅仅只是作为信息载入时的标志,还可以运用到片头开场,让观众对接下来的视频内容产生好奇和期 ...
ECharts 仪表盘（gauge）改环形跑道使用方法分享
ECharts 仪表盘(gauge) 改环形数据跑道使用方法分享官方原效果这是ECharts的仪表盘,制作的多数据展示效果好了开始干活! 先跳过简单的部分,相信大家都能搞定前面的几步,如有不会 ...
echarts 仪表盘图展示百分比
echarts 仪表盘图展示百分比效果图如下: 背景图一加,效果就好看多了代码: let myChart = echarts.getInstanceByDom(document.getElemen ...
自定义View | 仿QQ运动步数进度效果
项目GitHub地址思路固定不动的蓝色大圆弧动画变动的红色小圆弧中间的步数文字显示相关的自定义属性比如固定不动的大圆弧, 我们不能写死他的蓝色颜色属性, 要提供一个颜色的自定义属性给用户自 ...
Qt实战开发-仪表盘制作
仪表盘制作相关的基础知识 QPainter用来执行具体的绘图相关的操作,用来画点,线,填充,变换,alpha/阿尔法通道(透明度) Appha的值越大,就越不透明,范围是0-255,255就是不透明 ...
mapboxgl+echarts 简单制作专题地图
mapboxgl+echarts 简单制作专题地图实现效果思路实现过程全部代码实现效果思路 1.引用mapboxgl脚本库及样式库与echart脚本库. 2.准备专题数据,此处我们使用模拟 ...
echarts仪表盘option_ECharts仪表盘属性与使用
series[i]-gauge 用于表示ECharts仪表盘,当您要使用ECharts仪表盘的时候,需要将series中的type属性设置为" 'gauge' ",本节介绍了ECh ...
python制作进度条显示_Python进度条的制作代码实例
这篇文章主要介绍了Python进度条的制作代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 import sys,time #导入模块 for ...

使用echarts 仪表盘制作进度效果

其他好说，下面的居住信息要和设计原稿一致。下面第一张图是boss发的图片

不啰嗦了。下面来晒代码。

datas和subTitle组件内容以及scss的color变量颜色和方法

使用echarts 仪表盘制作进度效果相关推荐

最新文章

热门文章