admin管理员组文章数量:1621487
前言
首先呐,我先介绍一下这个demo,是公司要求我来做一个额度指针转盘,这个东西也是非常的炫酷啊,难度也是有的,当时我做的时候也花了时间,但是做出来效果是非常的满意的,下面,我来给大家一步一步讲解。
一、上效果图
就是这个样子的,下面开始讲解这个东西是怎么实现的
二、demo解析
这个是分为两部分,一个就是Echarts的图表,一个就是中间的数字,它是滚动的,就是一个简单的数字滚动,本来这篇文章是不该又这个数字滚动的,就是专门来讲这个图表的,但是我懒的删了,就直接都说了吧,万一有小伙伴需要的话就不用自己再去找了,直接一套下来了
三、图表解析
这个还是有些复杂的,有两个半圆圈,我之前的思路是通过css给外面的圈加,但是真的是异想天开,于是就用了两个图表,因为 常用ECharts的都知道series这个属性,它默认是写一个表格的熟悉,但是给它在拼接一对象,他就可以展示两个图表,就通过这个道理,然后我就一直调一直调,终于是调出来了
这个ECharts里面的属性有点多,这篇文章就只是给大家来看这个功能的,所以属性这一块是几乎不怎么将的,但是我的代码里面都是有注释的,大家在看看文档,就懂了。
四、上代码!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>
var d = document.documentElement;
var cw = d.clientWidth || 750;
document.documentElement.style.fontSize = (cw / 750 * 100) + 'px';
</script>
<style>
.mainc {
position: relative;
background: #F06A64;
padding-top: 30px;
}
#root {
position: absolute;
top: 40%;
left: calc(50% + 2px);
transform: translate(-50%, 0);
color: #fff;
font-size: 42px;
font-weight: 900;
letter-spacing: 4px;
font-family: Arial;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div class="mainc">
<div id="main" style="height: 4.5rem;"></div>
<div id="root">0</div>
</div>
<script type="text/javascript">
function roll(total, idname, step) {
let n = 0;
return function() {
n = (n + step) >= total ? total : (n + step);
if (n <= total) {
document.getElementById(idname).innerHTML = n;
}
}
}
function start(index, idname, step, runtime = 3000) {
let rolling = roll(index, idname, step);
runtime = (runtime >= 300) ? runtime : 1000;
for (let i = 0; i < (index / step); i++) {
let timer = setTimeout(rolling, (runtime / index) * i * step)
}
}
var myChart = echarts.init(document.getElementById('main'));
var colorTemplate1 = [
[1,
"#F9B4B0"
]
];
var colorTemplate2 = [
[1,
"#fff"
]
];
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
grid: {
left: 100
},
series: [{
animationDuration: 3000,
animationEasing: "cubicInOut",
startAngle: 180,
endAngle: 0,
name: "单仪表盘示例",
type: "gauge", // 系列类型
selectedMode: 'single',
radius: '120%',
center: ["50%",
"65%"
],
markPoint: {
symbol: 'circle',
symbolSize: 25,
data: [
//跟你的仪表盘的中心位置对应上,颜色可以和画板底色一样
{
x: 'center',
y: '65%',
itemStyle: {
color: '#FFF'
}
}
]
},
title: { // 仪表盘标题。
show: true, // 是否显示标题,默认 true。
offsetCenter: [0,
'-66%'
],
textStyle: {
fontSize: 16, // 文字的字体大小,默认 15。
fontWeight: 900
},
color: "#fff", // 文字的颜色,默认 #333。
},
clockwise: true,
min: 0,
max: 100,
detail: {
show: false
},
pointer: {
// 仪表盘指针。
show: true, // 是否显示指针,默认 true。
length: "95%", // 指针长度,可以是绝对数值,也可以是相对于半径的百分比,默认 80%。
width: 5, // 指针宽度,默认 8。
},
axisTick: {
show: false
},
itemStyle: {
// 仪表盘指针样式。
color: "#FDC056", // 指针颜色,默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
zIndex: 2
},
splitLine: {
// 分隔线样式。
show: true, // 是否显示分隔线,默认 true。
length: 10, // 分隔线线长。支持相对半径的百分比,默认 30。
lineStyle: {
// 分隔线样式。
color: "#fff", //线的颜色,默认 #eee。
opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
width: 3, //线度,默认 2。
}
},
axisLine: {
// 仪表盘轴线(轮廓线)相关配置。
show: false, // 是否显示仪表盘轴线(轮廓线),默认 true。
lineStyle: {
// 仪表盘轴线样式。
color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
width: 10, //轴线宽度,默认 30。
}
},
axisLabel: {
// 刻度标签。
show: false, // 是否显示标签,默认 true。
},
data: [{
value: 100,
name: '额度最高达到',
selected: true
}],
}, {
startAngle: 180,
endAngle: 0,
type: "gauge", // 系列类型
selectedMode: 'single',
radius: '130%',
center: ["50%",
"65%"
],
clockwise: true,
min: 0,
max: 100,
detail: {
show: false
},
pointer: {
// 仪表盘指针。
show: false, // 是否显示指针,默认 true。
},
axisTick: {
show: false
},
itemStyle: {
// 仪表盘指针样式。
color: "#fff", // 指针颜色,默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
},
splitLine: {
// 分隔线样式。
show: false, // 是否显示分隔线,默认 true。
},
axisLine: {
// 仪表盘轴线(轮廓线)相关配置。
show: false, // 是否显示仪表盘轴线(轮廓线),默认 true。
lineStyle: {
// 仪表盘轴线样式。
color: colorTemplate2, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
width: 3, //轴线宽度,默认 30。
}
},
axisLabel: {
// 刻度标签。
show: false, // 是否显示标签,默认 true。
},
}]
};
myChart.setOption(option);
start(100000, 'root', 4, ) // 基于准备好的dom,初始化echarts实例
</script>
</body>
</html>
直接复制过去拿去用,代码自己应该都能研究明白
结语
这个demo还有点东西的,看明白了它,再碰到一些比较吊的ECharts,也都可以解决,希望这个东西对你有所帮助
版权声明:本文标题:ECharts来自定义仪表盘 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1728833473a1175851.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论