echarts实战:一个包含水波图,圆角环形图(类似仪表盘)的echarts,带部分注释
动态图:
静态图:
完整代码:
<template>
<div class="contain">
<el-button type="text" @click="handleOpen">点击打开</el-button>
<el-dialog title="查看" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
<div class="daily-box">
<div class="daily-top">
<div class="daily-top-left">
<div id="score"></div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
data() {
return {
dialogVisible: false
}
},
methods: {
// 弹窗关闭
handleClose() {
this.dialogVisible = false
},
handleOpen() {
this.dialogVisible = true
this.$nextTick(function() {
this.drawScore('score')
})
},
// 传入div的ID
drawScore(id) {
// 数据
const score = 89
// const dataValArray = 0.72
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
backgroundColor: '#489FFF', // 设置无背景色
title: {
text: '精神压力评分',
textStyle: {
color: '#FFF',
fontSize: 14
},
subtext: score,
subtextStyle: {
color: '#fff',
fontSize: 40
},
itemGap: 35, // 主副标题距离
left: 'center',
top: 'top',
padding: 75
},
angleAxis: {
max: 100, // 满分
clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '140%' // 图形大小
},
series: [{
// 圆角环形图
type: 'bar',
data: [{
value: score,
itemStyle: {
normal: {
color: '#fff'
}
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 5,
barGap: '-100%', // 两环重叠
z: 2
}, {
// 起始点的圆点
name: 'Line 1',
type: 'pie',
startAngle: 270,
clockWise: true,
radius: ['66%', '66%'], // 控制圆环大小的
itemStyle: {
normal: {
label: {
show: true
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
name: '',
value: 0,
// 起始点的大小
label: {
position: 'inside',
backgroundColor: '#fff',
width: 1,
height: 1,
borderRadius: 50,
padding: 5
}
}]
},
// 虚线那一圈
{
name: 'decorationTwo',
type: 'pie',
color: ['#fff', 'rgba(255,255,255,0)'],
center: ['50%', '50%'],
radius: ['60%', '59%'],
hoverAnimation: false,
lable: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: new Array(200).fill(1).map(() => {
return {
name: '',
value: 100
}
})
},
// 水波求
{
type: 'liquidFill',
data: [(score / 100)],
backgroundStyle: { // 背景样式
borderWidth: 5,
color: 'rgba(0,0,0,0)', // 水球未到的背景颜色
opacity: 0 // 水球未到的背景颜色的透明度
},
outline: { // 外边线样式
show: false // 是否显示外边线
},
// color: ['rgba(0,0,0,0)', '#A0C1FF', 'rgba(0,0,0,0)'],
itemStyle: {
color: '#A0C1FF',
shadowBlur: 0, // 波浪的阴影范围
opacity: 0.64 // 透明度
},
label: {
show: false
}
}
]
})
}
}
}
</script>
<style lang="scss" scoped>
.daily-box {
.daily-top {
width: 100%;
display: flex;
.daily-top-left {
border-radius: 8px;
flex: 1;
// background: linear-gradient(#489FFF, #558FFA);
background: linear-gradient(#489FFF, #489FFF);
color: #fff;
margin-right: 20px;
#score {
width: 90%;
margin: auto;
height: 220px;
}
}
.daily-top-right {
flex: 1;
#condition {
width: 90%;
margin: auto;
height: 220px;
}
}
}
}
</style>