使用仪表盘类型图表type:"gauge"变换成以上图片样式，实现环形图的渐变以及背景环
1.计算当前数据占总数的比例，从而得出当前环开始角度和结束角度，目前上图中开始角度都是0，结束角度通过数据占比得到 当前数据/三个数和*360 得到结束角度
2.利用角度计算出环形的渐变参数
代码过程：
1.新建vue文件gauge.vue
html:
<template>
<div ref="chart" :id=chartID></div>
</template>js代码：
export default {
props: {
id: {type: String, default: "gauge_line"}, // id名称
processData: {
type: Object, default: function () {
return {
tieleFontSize: 22,//标题文字大小
labelfontSize: 22,//lable标签文字大小
name:'',
value:0,
valueColor:'#ffffff',
colorArr: [
[
{offset: 0, color: "#C0CDFF"},
{offset: 1, color: "#156BFF"},
],
[
{offset: 0, color: "rgba(243,237,153,0)"},
{offset: 1, color: "rgba(243,237,153,1)"}
],
[
{offset: 0, color: "rgba(140,181,255,0)"},
{offset: 1, color: "rgba(140,181,255,1)"}
],
[
{offset: 0, color: "rgba(140,181,255,0)"},
{offset: 1, color: "rgba(140,181,255,1)"}
],
],
}
}
},
max: {type: Number, default: 100}, // 最大值,也就是三个数据的和
},
data () {
return {
chartID: this.id + "_chart",
myChart: null
}
},
mounted () {
//this.myChart.setOption(this.option)
},
methods:{
initChart() {
this.myChart = this.$echarts.init(document.getElementById(this.chartID));
var angle = this.processData.value / this.max * 360; // 计算当前数据项对应的角度
let direction = this.getCoordinates(0, angle)
let color = {
type: 'linear',
/*x:0,
x1:0,
y:0,
y1:0,*/
...direction,
colorStops: this.processData.colorArr[0]
}
this.myChart.setOption({
series: [
{
type: 'gauge',
splitNumber: 1,
startAngle: 0,
endAngle:360,
max:this.max,
radius: "100%",
color:[color],
center: ['50%', '50%'],
progress: {
show: true,
roundCap:true,
width: 20
},
axisLine: {
lineStyle: {
color: [[1, '#F2F6FB']],
width: 20,
opacity: 0.1,
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
length: 20,
distance: -20,
lineStyle: {
width: 2
}
},
axisLabel: {
show: false
},
anchor: {
show: false
},
pointer: {
show: false
},
title: {
show: true,
color: "#fff",
fontSize: this.processData.tieleFontSize,
fontFamily:"微软雅黑",
offsetCenter: [0, '30%'],
},
detail: {
valueAnimation: true,
fontSize: 40,
color: "#BCCAFF",
fontFamily:"AGENCYB",
offsetCenter: [0, "-10%"],
//formatter: "{value}%",
//formatter: "{a|value}{b|件}",
formatter:function (param) {
return "{a|"+param+"}{b|件}"
},
rich: {
a: {
fontSize: this.processData.labelfontSize,
fontFamily:"AGENCYB",
color: this.processData.valueColor,
},
b: {
fontSize: 16,
fontFamily:"AGENCYB",
color: "#BED2FF",
},}
},
data: [{
value: this.processData.value,
name: this.processData.name
}]
}
]
})
},
getCoordinates(startArc, endArc) {
const posi = [
Math.sin(startArc),
-Math.cos(startArc),
Math.sin(endArc),
-Math.cos(endArc)
]
const dx = posi[2] - posi[0]
const dy = posi[3] - posi[1]
return this.getLocation(dx, dy)
},
getLocation(dx, dy) {
const tanV = dx / dy
const directSign = Math.abs(tanV) < 1
const t = directSign ? tanV : 1 / tanV
const sign1 = t > 0 ? 1 : -1
const sign2 = dx > 0 ? 1 : -1
const sign = directSign ? sign1 * sign2 : sign2
const group1 = [0.5 - sign * t / 2, 0.5 + sign * t / 2]
const group2 = sign > 0 ? [0, 1] : [1, 0]
const group = [...group1, ...group2]
const keys = directSign ? ['x', 'x2', 'y', 'y2'] : ['y', 'y2', 'x', 'x2']
let res = {}
keys.forEach((k, idx) => {
res[k] = group[idx]
})
return res
},
},
beforeDestroy() {
if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
this.myChart.dispose();
}
this.myChart=null
},
}2.将以上文件引入需要使用的页面
import gaugeComponent from "./components/gauge";
<gaugeComponent ref="stageCaseGauge1" style="flex-grow:1;flex-basis:0;" :processData=stageCase_processData1 :id="'gauge1'" :max="gaugeMax"></gaugeComponent>
<gaugeComponent ref="stageCaseGauge2" style="flex-grow:1;flex-basis:0;" :processData=stageCase_processData2 :id="'gauge2'" :max="gaugeMax"></gaugeComponent>
<gaugeComponent ref="stageCaseGauge3" style="flex-grow:1;flex-basis:0;" :processData=stageCase_processData3 :id="'gauge3'" :max="gaugeMax"></gaugeComponent>使用文件中data定义以下图表参数
stageCase_processData1:{
tieleFontSize: 26,//标题文字大小
labelfontSize: 40,//lable数字大小
name:'测试1', //仪表盘 name 会被放在title位置
value:981,
valueColor:'#BCCAFF',
colorArr: [
[
{offset: 0, color: "#156BFF"},
{offset:1, color: "#C0CDFF"},
],
]
},
stageCase_processData2:{
title: "", //标题
tieleFontSize: 26,//标题文字大小
labelfontSize: 40,//lable数字大小
name:'测试2',
value:1921,
valueColor:'#EEFBF9',
colorArr: [
[
{offset: 0, color: "#009984"},
{offset: 1, color: "#F9FFFE"},
],
]
},
stageCase_processData3:{
tieleFontSize: 26,//标题文字大小
labelfontSize: 40,//lable数字大小
name:"测试3",
value:1213,
valueColor:'#EFFFC3',
colorArr: [
[
{offset: 0, color: "#56E400"},
{offset: 1, color: "#F6FFC8"},
],
]
},gaugeMax参数为三个数据的和用来作为圆环的最大值
3.执行初始化函数
this.$refs.stageCaseGauge1.initChart() this.$refs.stageCaseGauge2.initChart() this.$refs.stageCaseGauge3.initChart()
