对比效果图
当我们拿到带有图表的设计稿，首先要分析我们图表属于echarts中哪一种类型，然后看有没有示例比较接近，然后去更改配置项，达到我们预期的效果，由于每一类的图表的配置项都比较多，修改细节的尤为耗时间，所以我们要对一些大的配置项足够的了解，就能准确的找到对的位置去配置，接下来是开发仪表盘图表的些许心得，我们先看看效果图。
这是我需要完成的效果图。然后我们看看echarts中比较相符合的图例，
气温仪表盘是比较接近我的图表的，ok，接下来我们就需要改的地方，首先是弧度，然后是颜色以及圆角，以及数据项为2项，中间的文字以及指针和刻度数字这些都需要改，话不多少上代码
<template>
<div>//因为我有三个图表，考虑到复用，但是id又是唯一的，所以根据条件渲染，共用逻辑。用ref可以不考虑这种方法
<div id="left" class="left" v-if="id == 'left'"></div>
<div id="center" class="center" v-if="id == 'center'"></div>
<div id="right" class="right" v-if="id == 'right'"></div>
</div>
</template>
<script>
export default {
data() {
return {
myChart: null,//空变量用来赋值echarts实例对象
};
},
mounted() {
this.initQuanProgress();
},
props:{
id:{
type:String
},
maxvalue:{
type:Number
},
text:{
type:String
}
},
watch: {
// showData() {//用来监听数据改变，初始化echarts实例，暂时还没有用到
// this.$nextTick(function () {
// switch (this.id) {
// case 'left':
// this.initQuanProgress('left')
// break;
// case 'center':
// this.initQuanProgress('center')
// break;
// case 'right':
// this.initQuanProgress('right')
// break;
// }
// })
// }
},
created() {
//判断传进来的id，获取不同实例初始化，判断渲染
this.$nextTick(()=> {
//因为获取实例，需要等待dom节点渲染完，所以需要在这个回调里调用初始化方法
switch (this.id) {
case 'left':
this.initQuanProgress('left')
break;
case 'center':
this.initQuanProgress('center')
break;
case 'right':
this.initQuanProgress('right')
break;
}
})
},
methods: {
initQuanProgress: function (id) {
if (!document.getElementById(id)) return;
this.myChart = this.$echarts.init(document.getElementById(id));//获取实例
this.setQuanProgress();//设置options配置项数据
window.addEventListener("resize", () => {
//监听浏览器的变化，控制图表自适应
if (this.myChart) {
this.myChart.resize();
}
});
},
setQuanProgress() {
let option = {
//下面是echarts图表的配置项，以及一些我修改的细节
title: {
//echarts标题通用配置项不必多说
text: this.text,
left: "center",
y: "65%",
textStyle: {
fontSize: 14,
fontStyle: "normal",
fontWeight: "bolder",
color: "#000",
},
},
series: [//仪表盘关键配置项
{
type: "gauge", //类型
radius: "75%", //控制整个图的大小
center: ["50%", "48%"],//位置
startAngle: 220, //控制弧度，因为设计稿的弧度比示例的要大，我取值220
endAngle: -40, //结束弧度，调整圆弧的起始位置，我这里是让其对齐
min: 0, //刻度值的最小值
max: this.maxvalue, //刻度值的最大值
splitNumber: 10, //一共多少个大的刻度
itemStyle: {
color: "#56e033", //第一项数据的默认颜色，就是绿色的那一项
},
progress: {
//第一项数据的进度条配置
show: true, //是否显示
width: 10, //当前进度条的宽度值
roundCap: true, //是否是圆角
},
pointer: {
//指针项，由于指针比较特别不同于普通表的指针，我做了一下配置
show: true, //是否显示指针
offsetCenter: [2, -35], //指针的位置
showAbove: true,
length: "20%", //指针的长度
width: 1, //指针的宽度
keepAspect: false,
},
axisLine: {
//主轴
lineStyle: {
//主轴线的样式
width: 10, //最底下默认线的宽度
},
roundCap: true, //主轴圆角样式
},
axisTick: {
//小刻度轴
distance: -20, //小刻度离进度条的距离
splitNumber: 5, //每个大刻度显示几个小刻度
length: 1, //小刻度轴的长度
lineStyle: {
//小刻度轴线的样式
width: 1, //小刻度线的宽度
color: "#999", //小刻度线的颜色
},
},
splitLine: {
//大刻度轴
distance: -24, //大刻度离进度条的距离
length: 5, //大刻度的长度
lineStyle: {
//大刻度线的样式
width: 1, //大刻度线的宽度
color: "#999", //大刻度线的颜色
},
},
axisLabel: {
//大刻度数字
//show:true,//是否显示数字
distance: -10, //大刻度数字离大刻度的距离
color: "#999", //大刻度数字的颜色
fontSize: 10, //大刻度数字的字体大小
formatter: (value)=> {
//过滤器只显示最大最小值
if (value == 0 || value == this.maxvalue) {
return value;
}
},
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 20,
barGap: "-100%",
borderRadius: 8,
offsetCenter: [-5, "0%"],
fontSize: 25,
fontWeight: "bolder",
formatter: "{value}",
color: "#000",
},
data: [
{
value: 10,
},
],
},
{
type: "gauge",
center: ["50%", "48%"],
radius: "75%",
startAngle: 220,
endAngle: -40,
min: 0,
max: this.maxvalue,
itemStyle: {
color: "#219cf9",
},
progress: {
show: true,
width: 10,
roundCap: true,
},
pointer: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 20,
},
],
},
],
};
this.myChart.setOption(option);
},
},
};
</script>
<style lang="less" scoped>
.left {
width: 170px;
height: 170px;
}
.center {
width: 150px;
height: 150px;
}
.right {
width: 150px;
height: 150px;
}
</style>