<template>
<div>
<div class="rate-title">
<span style="transform: scale(0.8);">{{chartData.name}}</span>
</div>
<div :id="id" :style="{height:height,width:width}"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import {echartfontSize} from "@/utils"
export default {
name: "creditRate",
// 验证类型
props: {
id: {
type: String
},
chartData: {
type: Object,
default: () => {
},
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '200px'
},
},
data() {
return {
chart: null,
option: {
tooltip: {
formatter: "{b} : {c}",
triggerOn: "mousemove",
backgroundColor: "rgba(1,70,86,1)",
borderColor: "rgba(0,246,255,1)",
borderWidth: 0.5,
},
angleAxis: {
max: 0,
clockwise: false,
startAngle: -45,
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%', '60%'],
radius: '20%', //图形大小
},
series: [
//由外往内第一层线色部分
{
name: "ring5", //最外层圆环
type: 'custom',
coordinateSystem: "none",
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.5,
cy: api.getHeight() * 0.7,
r: Math.min(api.getWidth(), api.getHeight()) / 2 ,
startAngle: 180 * Math.PI / 180,
endAngle: 360 * Math.PI / 180
},
style: {
stroke: "#01B5DB",
fill: "transparent",
lineWidth: 1
},
silent: true
};
},
data: [0]
},
//由外往内第二层线色部分
{
zlevel: 1,
type: 'pie',
radius: ["94%", "92%"],
center: ['50%', '70%'],
data: [
{
value: 180,
itemStyle: {
normal: {
color: '#01B5DB'
}
}
},
{
value: 180,
itemStyle: {
opacity: 0
}
}
],
tooltip: {show: false},
startAngle: 180,
endAngle: 0,
hoverAnimation: false,
label: {
show: false
},
labelLine: {
show: false
}
},
//由外往内第三层灰色部分
{
zlevel: 1,
type: 'pie',
radius: ["92%", "83%"],
center: ['50%', '70%'],
data: [
{
value: 180,
itemStyle: {
normal: {
color: 'rgba(0,213,255, 0.2)'
}
}
},
{
value: 188,
itemStyle: {
opacity: 0
}
}
],
tooltip: {show: false},
startAngle: 178,
endAngle: 2,
hoverAnimation: false,
label: {
show: false
},
labelLine: {
show: false
}
},
//由外往内第四层刻度部分
{
type: "gauge",
radius: "78%", // 1行3个
center: ["50%", "70%"],
splitNumber: 4,
min: 0,
max: 100,
startAngle: 180,
endAngle: 0,
axisLine: {
show: true,
lineStyle: {
width: 0,
color: '#00c8f1'
}
},
axisTick: {
show: true,
lineStyle: {
color: '#00D5FF',
width: 1
},
length: echartfontSize(0.08),
splitNumber: 10
},
splitLine: {
show: true,
length: echartfontSize(0.08),
lineStyle: {
fontWeight: 400,
color: '#00D5FF'
}
},
axisLabel: {
show: false
},
pointer: {
show: 0
},
detail: {
show: 0
}
},
//最里面黄色圆环进度部分
{
zlevel: 2,
type: 'pie',
radius: ["55%", "62%"],
center: ['50%', '70%'],
data: [
{
value: 0,
itemStyle: {
normal: {
color: '#FFCF40',
borderWidth: 2,
shadowBlur: 3,
shadowColor: '#FFCF40',
}
}
},
{
value: 0,
itemStyle: {
opacity: 0
}
},
],
tooltip: {show: false},
startAngle: 180,
endAngle: 0,
hoverAnimation: false,
label: {
show: false
},
labelLine: {
show: false
}
},
//最里面圆环底色部分
{
zlevel: 1,
type: 'pie',
radius: ["55%", "62%"],
center: ['50%', '70%'],
data: [
{
value: 180,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#1E3756'
}
}
},
{
value: 180,
itemStyle: {
opacity: 0
}
}
],
tooltip: {show: false},
startAngle: 180,
endAngle: 0,
hoverAnimation: false,
label: {
show: false
},
labelLine: {
show: false
}
},
//标题和数字部分
{
type: 'gauge',
radius: '45%',
center: ['50%', '70%'],
min: 0,
max: 100,
splitNumber: 5,
axisLine: {
show: false,
lineStyle: {
opacity: 0
}
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
detail: {
color: '#fff',
fontSize: echartfontSize(0.35),
offsetCenter: [0, -echartfontSize(0.15)],
fontWeight: 700,
},
title: { //标题
show: false,
},
data: []
},
{
name: "ring5", //最里层圆环绿点
type: 'custom',
coordinateSystem: "none",
zIndex: 9,
z: 9,
renderItem: (params, api) => {
let x0 = api.getWidth() * 0.502; //偏右一点
let y0 = api.getHeight() * 0.7;
let r = Math.min(api.getWidth() , api.getHeight()) / 2;
let point = this.getCirlPoint(x0, y0, r, 360)
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: echartfontSize(0.015)
},
style: {
stroke: "#01B5DB", //绿
fill: "#01B5DB",
},
silent: true
};
},
data: [0]
},
{
name: "ring5", //最里层圆环绿点
type: 'custom',
coordinateSystem: "none",
zIndex: 9,
z: 9,
renderItem: (params, api) => {
let x0 = api.getWidth() * 0.502; //偏右一点
let y0 = api.getHeight() * 0.7;
let r = Math.min(api.getWidth() , api.getHeight()) / 2 * 0.93;
let point = this.getCirlPoint(x0, y0, r, 360)
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: echartfontSize(0.015)
},
style: {
stroke: "#01B5DB", //绿
fill: "#01B5DB",
},
silent: true
};
},
data: [0]
},
{
name: "ring5", // 左第一绿点
type: 'custom',
coordinateSystem: "none",
zIndex: 9,
z: 9,
renderItem: (params, api) => {
let x0 = api.getWidth() * 0.498; //偏左一点
let y0 = api.getHeight() * 0.7;
let r = Math.min(api.getWidth(), api.getHeight()) / 2;
let point = this.getCirlPoint(x0, y0, r, 180)
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: echartfontSize(0.015)
},
style: {
stroke: "#01B5DB", //绿
fill: "#01B5DB",
},
silent: true
};
},
data: [0]
},
{
name: "ring5", //左第二绿点
type: 'custom',
coordinateSystem: "none",
zIndex: 9,
z: 9,
renderItem: (params, api) => {
let x0 = api.getWidth() * 0.498; //偏左一点
let y0 = api.getHeight() * 0.7;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.93;
let point = this.getCirlPoint(x0, y0, r, 180)
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: echartfontSize(0.015)
},
style: {
stroke: "#01B5DB", //绿
fill: "#01B5DB",
},
silent: true
};
},
data: [0]
},
]
}
}
},
watch: {
height: {
handler: function (newVal) {
let self = this;
setTimeout(function () {
if (self.chart) {
self.chart.resize()
}
}, 800);
}
},
chartData: {
deep: true,
handler (newVal) {
console.log(newVal)
this.option.series[4].data[0].value = (newVal.value / 100) * 180
this.option.series[4].data[1].value = 360 - this.option.series[4].data[0].value
this.option.series[6].data = [newVal]
this.initEchart();
}
}
},
methods: {
initEchart() {
this.chart = echarts.init(document.getElementById(this.id));
if (this.option && typeof this.option === "object") {
this.chart.setOption(this.option, true);
}
},
resize() {
window.addEventListener('resize', this.__resizeHandler)
},
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
return {
x: x1,
y: y1
}
},
},
mounted() {
this.initEchart();
this.resize();
},
beforeDestroy() {
if (!this.chart) {
return
}
window.removeEventListener('resize', this.chart);
this.chart.dispose();
this.chart = null
},
}
</script>
<style scoped lang="scss">
$url: '~images/module/shipPortrayyal/';
.rate-title {
background: url("#{$url}/img-switch.png") no-repeat center;
background-size: 100% 100%;
width: 26%;
height: 13%;
bottom: 5%;
left: 50%;
margin-left: -13%;
position: absolute;
display: flex;
align-items: center;
justify-content: center ;
text-align: center;
}
</style>
父组件引用
<credit-rate id="creditRate" :chartData="rateData" :height="throwSecionBodyHeight + 'px'"></credit-rate>
// 数据结构
rateData: {
name: "信用评价分",
value: 0
},
