image.png
1.配置
let dataArr=['1500','r/min'];
let dataArrName=['1号冷却水泵','1号冷冻水泵','1号冷却塔风机'];
let echartOption={
title:{
text: '{name|' + dataArr[1] + '}\n{val|' +dataArrName[0] + '}',
top: '54%',
left: 'center',
z: 8,
textStyle: {
rich: {
name: {
fontWeight: 'normal',
color: '#fff',
fontSize: 14,
padding: [70, 0,0,0]
},
val: {
color: '#fff',
fontSize: 18,
fontWeight: 'normal'
}
}
}
},
grid: {
top: 0,
left: 0,
bottom: 0,
right: 0
},
xAxis: [],
yAxis: [],
series: [
{
name: '',//内部（环形）进度条
type: "gauge",
bottom: '40%',
// center: ['20%', '50%'],
radius: "60%",
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[60 / 100, new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#35FFFA"
},
{
offset: 1,
color: "#1890FF"
}
])],
[1, "rgba(255,255,255,0.10)"],
],
width: 7,
borderRadius: 15,
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
pointer: {
show: false,
},
},
{
name: "",//外部刻度
type: "gauge",
// center: ['20%', '50%'],
radius: "70%",
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度数量
startAngle: 225,
endAngle: -45,
axisLine: {
show: true,
// 仪表盘刻度线
lineStyle: {
width: 0,
color: [[1, "#1890FF"]],
},
},
//仪表盘文字
axisLabel: {
show: true,
color: "rgba(255,255,255,0.65)",
distance: -25,
formatter: function (v) {
switch (v + "") {
case "0":
return "0%";
case "10":
return "10%";
case "20":
return "20%";
case "30":
return "30%";
case "40":
return "40%";
case "50":
return "50%";
case "60":
return "60%";
case "70":
return "70%";
case "80":
return "80%";
case "90":
return "90%";
case "100":
return "100%";
}
},
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 7,
lineStyle: {
color: "#1890FF", //用颜色渐变函数不起作用
width: 1,
},
length: -8,
}, //刻度样式
splitLine: {
show: true,
length: -11,
lineStyle: {
width:1,
color: "#1890FF", //用颜色渐变函数不起作用
},
}, //分隔线样式
detail: {
show: false,
},
pointer: {
show: false,
},
},
/*内部*/
{
type: "pie",
radius: ["0", "40%"],
center: ["50%", "50%"],
z: 8,
hoverAnimation: false,
data: [
{
name: "",
value: dataArr[0],
itemStyle: {
normal: {
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#3398ff",
},
{
offset: 1,
color: "rgba(24,144,255,1)",
},
]),
},
},
label: {
normal: {
formatter: function (params) {
return params.value;
},
color: "#FFFFFF",
fontSize: 22,
fontWeight: "bold",
position: "center",
show: true,
},
},
labelLine: {
show: false,
},
},
],
},
/*外一层*/
{
type: "pie",
radius: "45%",
startAngle: 220,
endAngle: -40,
hoverAnimation: false,
center: ["50%", "50%"],
avoidLabelOverlap: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: 1,
itemStyle: {
normal: {
color: "rgba(24,144,255,0.5)",
},
},
},
],
},
//外二层圈
{
type: "pie",
radius: "50%",
center: ["50%", "50%"],
avoidLabelOverlap: false,
z: 0,
hoverAnimation: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: 1,
itemStyle: {
normal: {
color: "rgba(24,144,255,0.2)",
},
},
},
],
},
],
},
2.组件
<template>
<div ref="charts"
:style="{ height: (echartOption.height!=undefined?echartOption.height:'100%'), width: (echartOption.width!=undefined?echartOption.width:'100%') }"/>
</template>
<script>
import echarts from 'echarts'
import { mapState } from 'vuex'
import resize from '@/views/dashboard/mixin.js'
import equApi from '@/api/equ.js'
import equEventStatusStatistics from '../../data/equEventStatusStatistics.json'
export default {
mixins: [resize],
components: {},
props: {
width: {
type: [String, Number],
default: '100%'
},
height: {
type: [String, Number],
default: '100%'
},
echartOption: {
type: [Object],
default: () => []
},
data: {
type: [Array],
default: () => []
},
xAxis: {
type: [Object, Array],
default: () => []
},
title: {
type: String,
default: ''
},
type: {
type: String,
default: ''
}
},
data() {
return {
option: {
tooltip: Object.assign({
trigger: 'axis'
}, this.echartOption.tooltip),
title: Object.assign({
text: '请输入标题',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 18,
fontWeight: 'normal',
padding: [0, 0, 10, 0]
}
}, this.echartOption.title),
// '#15E865',
color: this.echartOption.color || ['#1890FF', '#FFE000', '#FF3B59'],
legend: Object.assign({
show: true, textStyle: {
color: '#fff'
}
}, this.echartOption.legend),
grid: Object.assign({
show: false,
top: "30%",
left: "5%",
bottom: 30,
right: 60,
containLabel: true
}, this.echartOption.grid),
toolbox: {},
xAxis: this.echartOption.xAxis.map(item => {
if (item == null) {
return null
} else {
return Object.assign({
type: 'value',
axisLine: {
lineStyle: {
color: '#87929e',
opacity: 0.2
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#87929e',
nameTextStyle: {
verticalAlign: 'top',
padding: [30, 18, 0, 0],
align: 'right'
},
fontSize: 12
},
boundaryGap: true,
splitLine: {
show: false,
lineStyle: {
color: '#ccc',
opacity: 0.1
}
}
}, item)
}
}),
yAxis: this.echartOption.yAxis.map(item => {
if (item == null) {
return null
} else {
return Object.assign({
type: 'category',
axisLabel: { // y轴标签
color: '#87929e',
fontSize: 12,
margin: 8,
interval: 0
},
axisLine: { // y轴线
show: false,
lineStyle: {
color: '#87929e',
opacity: 0.2
}
},
axisTick: { // y轴刻度
show: false
}
}, item)
}
}),
series:
[]
}
}
},
computed: {},
watch: {},
created() {
this.getCharts()
},
mounted() {
window.addEventListener('resize', this.getCharts, 20)
},
destroyed() {
window.removeEventListener('resize', this.getCharts, 20)
},
methods: {
async getCharts() {
// const res = await equApi.getEquEventStatus({ equId: this.equId })
// const res = equEventStatusStatistics
let series = []
this.echartOption.series.forEach((item, index) => {
let newItem = Object.assign({
data: item.data,
symbol: 'none',
type: 'bar',
barWidth: 16,
/* itemStyle: {
normal: {
color: params => {
const colorList = ['#15E865', '#0EA6FF', '#FFDE0E', '#FF6D7D']
return colorList[params.dataIndex]
}
}
}*/
}, item)
series.push(newItem)
})
this.$set(this.option, 'series', series)
setTimeout(() => {
var myChart = echarts.init(this.$refs.charts)
myChart.clear()
myChart.resize()
myChart.setOption(this.option)
setTimeout(() => {
myChart.resize()
}, 100)
console.log(this.option, 'this.option')
}, 100)
}
}
}
</script>
<style scoped lang="scss"></style>
