Echarts案例：整⼀个炫酷⼀点的仪表盘
故事发⽣在⼏天前
公司要求做个仪表盘，⼤致UI是这样的
这不是为难我胖虎嘛，于是找遍整个全⽹也没找到相似的，只能⾃⼰⼿写⼀个。
然⽽，最开始是准备⽤极坐标写的
折腾了⼀上午发现极坐标做出的效果两头是360度的圆环，这使UI给的标注⽆法实现，于是我⼜开始研究仪表盘，官⽅给的实例倒是挺炫酷
当我感觉快找到希望时，却⽆法实现两端圆⾓
以及将刻度显⽰在数字外，在⽹上找资料发现也有同学遇到相同的问题，但是没找到解决⽅法
然⽽急中⽣智却被我想到了⼀个⽅法，将这⼆者合并⼀下
先简单画个仪表盘
设置⼀下他的属性，去掉指针，去掉表盘颜⾊，得到只有刻度和数字的表盘
之后将除了圆环以外的所有属性配置⼀下实现这样的效果
突然有内味了，这时我们加上极坐标环状图
然⽽⼆者最⼤⾓度不同，我们需要做⼀个换算，设计图中仪表盘的⾓度相当于极坐标的-30度到210度，⼆者偏移值是240度除360度也就是极坐标得乘以2分之3（240分之360）才是真实仪表盘的值
经过换算后，实现以下效果
诗配画简单又好看同样需要引⼊Echarts
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.PolarGauge {
margin: 100px auto;
background: #000;
width: 400px;
height: 400px;
}
</style>
<script src="./echarts.js"></script>
<script src="./chart.js"></script>
</head>
<body>
<div id="PolarGauge" class="PolarGauge"></div>
摆动导杆机构</body>
</html>
chart.js
var chart, option, data, timeTickId, timer, max;
chart = echarts.init(PolarGauge); //初始化chart容器
data = { //显⽰的数据
"name": '馆藏量',
"num": 1000
}兰亭序的作者
timer = 1.5 //刷新频率
max = 1000 //最⼤馆藏量
createPolarGauge() //配置chart
}
function createPolarGauge() {
option = {
angleAxis: {
show: fal,
max: max * 3 / 2, //这⾥将极坐标最⼤值转换成仪表盘的最⼤值，(360度除以240度) type: 'value',
startAngle: 210, //极坐标初始⾓度，从第⼀象限算起，⼤约在7-8点钟⾓度之间
splitLine: {
show: fal //隐藏坐标
}
},
barMaxWidth: 18, //圆环宽度
radiusAxis: { //隐藏坐标
show: fal,
type: 'category',
},
polar: { //设置圆环位置和⼤⼩
center: ['50%', '50%'],
radius: '296'
radius: '296'
},
ries: [{
type: 'bar',
data: [{ //上层圆环，⽤于显⽰真实数据
value: data.num,
itemStyle: {
color: { //图形渐变颜⾊⽅法，四个数字分别代表，右，下，左，上，offt表⽰0%到100% type: 'linear',
x: 0,
y: 0,
x2: 1, //从左到右 0-1
y2: 0,
建筑实习总结colorStops: [{
offt: 0,
color: '#CD48AE' // 0% 处的颜⾊
}, {
offt: 1,
color: '#2CABFC' // 100% 处的颜⾊
}],
globalCoord: fal // 缺省为 fal
},
shadowColor: 'rgba(255, 255, 255, 0.2)', //加⽩⾊阴影产⽣⾼亮效果
shadowBlur: 10
}
}],
barGap: '-100%', //柱间距离,⽤来将上下两层圆环重合
coordinateSystem: 'polar', //类型，极坐标
更换电脑桌面壁纸roundCap: true, //顶端圆⾓
z: 2 //圆环层级，和zindex相似
}, { //下层圆环，⽤于显⽰最⼤值
type: 'bar',
data: [{
value: max,
itemStyle: {
color: '#265195',
shadowColor: 'rgba(0, 0, 0, 0.2)', //加⽩⾊阴影产⽣⾼亮效果
shadowBlur: 5,
shadowOfftY: 2
}
}],
barGap: '-100%', //柱间距离,⽤来将上下两层圆环重合
coordinateSystem: 'polar', //类型，极坐标
roundCap: true, //顶端圆⾓
z: 1 //圆环层级，和zindex相似
},
{ //仪表盘
向阳章type: 'gauge',
radius: '95%',
startAngle: 210, //起始⾓度，同极坐标
endAngle: -30, //终⽌⾓度，同极坐标
max: max,
splitNumber: 5, //分割线个数（除原点外）
axisLine: { // 坐标轴线
show: fal
},
pointer: {
show: fal
},
axisLabel: {
// 坐标轴数字
textStyle: {
fontSize: 8,
color: "#13B5FC"
},
},
axisTick: { // 坐标轴标记给导师发邮件
length: 10,
lineStyle: {
color: "#13B5FC"
}
},
splitLine: { // 分隔线
length: 5,
lineStyle: {
width: 1,
}
},
title: { //标题，显⽰'馆藏量'
textStyle: {
color: '#fff',
shadowColor: '#fff',
fontSize: 30
},
offtCenter: ["0", '-35%'] //位置偏移
},
detail: { //仪表盘数值
formatter: function (params) {
var name = String()
var list = ''
for (var i = 0; i < name.length; i++) {
list += '{value|' + name[i] + '}' //每个数字⽤border隔开 if (i !== name.length - 1) {
list += '{margin|}' //添加margin值
}
}
return [list]
},
offtCenter: ["0", '5%'],
rich: { //编辑富⽂本样式
value: {
width: 34,
height: 42,
borderColor: '#02A0F0',
borderWidth: 2,
borderRadius: 5,
lineHeight: 1000,
fontSize: 36,
padding: [0, 0, 4, 0],
color: '#fff',
shadowColor: 'rgb(2,157,239)',
shadowBlur: 5
},有关诚信的作文
margin: {
width: 8,
height: 42,
}
}
},
data: [{
value: data.num,
name: data.name
}]
}
]
}
timeTick()
}
