Contrast renderings
When we get a design draft with a chart, we must first analyze which type of chart our chart belongs to, and then see if there are any examples that are relatively close, and then change the configuration items to achieve our expected effect, because each type of chart There are many configuration items, and it takes time to modify the details. Therefore, we need to know enough about some large configuration items to accurately find the right location to configure. Next is some experience in developing dashboard charts. We Look at the renderings first.
Here is a rendering of what I need to accomplish. Then let's look at the corresponding legend in echarts,
the temperature dashboard is closer to my chart, ok, the next thing we need to change, first is the radian, then the color and rounded corners, and the data item is 2 Items, the text in the middle, the pointer and the scale numbers all need to be changed, and the code is not much.
<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>