You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
14 KiB
437 lines
14 KiB
<template> |
|
<div> |
|
<div class="charts" ref="chart_ref"></div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as echarts from "echarts"; |
|
export default { |
|
props: { |
|
viewMes: { |
|
type: Object, |
|
default: () => ({}), |
|
}, |
|
}, |
|
data() { |
|
return { |
|
chartInstance: null, |
|
option: {}, |
|
energyMes: {}, |
|
}; |
|
}, |
|
watch: { |
|
viewMes: { |
|
immediate: true, // 页面加载时立即触发一次监听 |
|
handler(newVal) { |
|
if (Object.keys(newVal).length > 0) { |
|
console.log("newval", newVal); |
|
this.energyMes = newVal; |
|
this.$nextTick(() => { |
|
this.echartsData(); |
|
}); |
|
} |
|
}, |
|
}, |
|
}, |
|
mounted() { |
|
this.initChart(); |
|
window.addEventListener("resize", this.screenAdapter); |
|
this.screenAdapter(); |
|
}, |
|
destroyed() { |
|
//取消监听器 |
|
window.removeEventListener("resize", this.screenAdapter); |
|
}, |
|
methods: { |
|
echartsData() { |
|
console.log("父组件传过来的值", this.energyMes); |
|
if (this.energyMes) { |
|
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
|
const colorList = ["#ffe21e", "#08c8ff", "#0882ff", "#2df499"]; // 提取颜色列表 |
|
const adapterOption = { |
|
tooltip: { |
|
trigger: "item", |
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
|
}, |
|
legend: { |
|
itemWidth: titleFontSize, |
|
itemHeight: titleFontSize, |
|
itemGap: titleFontSize * 2, |
|
formatter: function (name) { |
|
var arr = []; |
|
let data = adapterOption.series[0].data; |
|
var index = 0; |
|
var total = 0; |
|
// 计算总和 |
|
for (var i = 0; i < data.length; i++) { |
|
total += data[i].value; |
|
if (data[i].name == name) { |
|
index = i; |
|
} |
|
} |
|
// 检查当前项的值是否为 0 |
|
var percentage = |
|
data[index].value === 0 |
|
? "0.00" |
|
: ((data[index].value / total) * 100).toFixed(2); |
|
arr.push( |
|
"{name|" + name + "}", |
|
"{text|" + " " + ":" + " " + "}", |
|
"{value|" + data[index].value + " " + "}", |
|
"{percentage|" + " " + percentage + "%}" |
|
); |
|
return arr.join(""); |
|
}, |
|
textStyle: { |
|
color: function (name) { |
|
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
|
const index = dataSeries.findIndex( |
|
(item) => item.name === name |
|
); |
|
const colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; // 数据圆的颜色列表 |
|
return colorList[index]; |
|
}, |
|
rich: { |
|
name: { |
|
align: "left", |
|
fontSize: titleFontSize * 1.6, |
|
}, |
|
text: { |
|
align: "left", |
|
fontSize: titleFontSize * 1.6, |
|
}, |
|
value: { |
|
align: "left", |
|
fontSize: titleFontSize * 1.6, |
|
// color: function (params) { |
|
// let data = adapterOption.series[1].data; |
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
|
// }, |
|
}, |
|
percentage: { |
|
align: "left", |
|
fontSize: titleFontSize * 1.6, |
|
// color: function (params) { |
|
// let data = adapterOption.series[1].data; |
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
|
// }, |
|
}, |
|
}, |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "数据详情:", |
|
data: [ |
|
{ value: this.energyMes.eleStandardCoal, name: "耗电量" }, |
|
{ value: this.energyMes.waterStandardCoal, name: "用水量" }, |
|
{ value: this.energyMes.coldStandardCoal, name: "产冷量" }, |
|
{ value: this.energyMes.gasStandardCoal, name: "蒸汽量" }, |
|
], |
|
itemStyle: { |
|
color: function (params) { |
|
var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; |
|
return colorList[params.dataIndex]; |
|
}, |
|
// borderWidth: 5, |
|
borderColor: "#002a56", |
|
}, |
|
}, |
|
{ |
|
data: [ |
|
{ value: this.energyMes.eleStandardCoal, name: "耗电量" }, |
|
{ value: this.energyMes.waterStandardCoal, name: "用水量" }, |
|
{ value: this.energyMes.coldStandardCoal, name: "产冷量" }, |
|
{ value: this.energyMes.gasStandardCoal, name: "蒸汽量" }, |
|
], |
|
}, |
|
], |
|
}; |
|
this.chartInstance.setOption(adapterOption); |
|
this.chartInstance.resize(); |
|
} else { |
|
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
|
const adapterOption = { |
|
tooltip: { |
|
trigger: "item", |
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
|
}, |
|
legend: { |
|
itemWidth: titleFontSize, |
|
itemHeight: titleFontSize, |
|
itemGap: titleFontSize * 2, |
|
formatter: function (name) { |
|
var arr = []; |
|
let data = adapterOption.series[0].data; |
|
var index = 0; |
|
var total = 0; |
|
// 计算总和 |
|
for (var i = 0; i < data.length; i++) { |
|
total += data[i].value; |
|
if (data[i].name == name) { |
|
index = i; |
|
} |
|
} |
|
// 检查当前项的值是否为 0 |
|
var percentage = |
|
data[index].value === 0 |
|
? "0.00" |
|
: ((data[index].value / total) * 100).toFixed(2); |
|
arr.push( |
|
"{name|" + name + "}", |
|
"{text|" + " " + ":" + " " + "}", |
|
"{value|" + data[index].value + " " + "}", |
|
"{percentage|" + " " + percentage + "%}" |
|
); |
|
return arr.join(""); |
|
}, |
|
textStyle: { |
|
color: function (name) { |
|
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
|
const index = dataSeries.findIndex( |
|
(item) => item.name === name |
|
); |
|
const colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; // 数据圆的颜色列表 |
|
return colorList[index]; |
|
}, |
|
rich: { |
|
name: { |
|
align: "left", |
|
fontSize: titleFontSize * 1.6, |
|
}, |
|
text: { |
|
align: "left", |
|
fontSize: titleFontSize * 1.6, |
|
}, |
|
value: { |
|
align: "left", |
|
fontSize: titleFontSize * 1.6, |
|
// color: function (params) { |
|
// let data = adapterOption.series[1].data; |
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
|
// }, |
|
}, |
|
percentage: { |
|
align: "left", |
|
fontSize: titleFontSize * 1.6, |
|
// color: function (params) { |
|
// let data = adapterOption.series[1].data; |
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
|
// }, |
|
}, |
|
}, |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "数据详情:", |
|
data: [ |
|
{ value: 0, name: "耗电量" }, |
|
{ value: 0, name: "用水量" }, |
|
{ value: 0, name: "产冷量" }, |
|
{ value: 0, name: "蒸汽量" }, |
|
], |
|
itemStyle: { |
|
color: function (params) { |
|
var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; |
|
return colorList[params.dataIndex]; |
|
}, |
|
// borderWidth: 5, |
|
borderColor: "#002a56", |
|
}, |
|
}, |
|
{ |
|
data: [ |
|
{ value: 0, name: "耗电量" }, |
|
{ value: 0, name: "用水量" }, |
|
{ value: 0, name: "产冷量" }, |
|
{ value: 0, name: "蒸汽量" }, |
|
], |
|
}, |
|
], |
|
}; |
|
this.chartInstance.setOption(adapterOption); |
|
this.chartInstance.resize(); |
|
} |
|
}, |
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
|
screenAdapter() { |
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
|
const titleFontSize = this.$refs.chart_ref.offsetWidth / 40; |
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
|
const adapterOption = { |
|
title: { |
|
subtextStyle: { |
|
fontSize: titleFontSize * 1.2, |
|
}, |
|
}, |
|
}; |
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
this.chartInstance.setOption(adapterOption); |
|
//手动的调用图标对象的resize才能产生效果 |
|
this.chartInstance.resize(); |
|
}, |
|
//初始化chartInstance对象 |
|
initChart() { |
|
this.chartInstance = echarts.init(this.$refs.chart_ref); |
|
this.option = { |
|
//环形图中间文字 |
|
title: { |
|
subtext: "标准煤", |
|
textStyle: { |
|
color: "#ffffff", |
|
}, |
|
subtextStyle: { |
|
color: "#ffffff", |
|
}, |
|
textAlign: "center", |
|
x: "27%", |
|
y: "36%", //距离上边的距离 |
|
}, |
|
tooltip: { |
|
trigger: "item", |
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
|
}, |
|
//图例 |
|
legend: { |
|
orient: "vertical", // 垂直排列 |
|
right: "4%", // 距离右边10% |
|
top: "middle", // 垂直居中 |
|
//图例文字颜色 |
|
textStyle: { |
|
color: "#ffffff", |
|
// fontSize: 18, |
|
}, |
|
}, |
|
series: [ |
|
// 数据圆 |
|
{ |
|
name: "数据详情:", |
|
type: "pie", |
|
radius: ["60%", "72%"], |
|
center: ["28%", "44%"], |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
color: function (params) { |
|
var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; |
|
return colorList[params.dataIndex]; |
|
}, |
|
borderWidth: 5, |
|
borderColor: "#002a56", |
|
}, |
|
z: 10, //设置层级更高,否则会被阴影圆遮住 |
|
}, |
|
// 阴影圆 |
|
{ |
|
type: "pie", |
|
radius: ["50%", "62%"], |
|
center: ["28%", "44%"], |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
silent: true, |
|
labelLine: { |
|
show: false, |
|
}, |
|
//颜色 |
|
itemStyle: { |
|
color: function (colors) { |
|
var colorList = ["#024e7d", "#09596b", "#385f5c", "#02427f"]; |
|
return colorList[colors.dataIndex]; |
|
}, |
|
}, |
|
z: 15, |
|
}, |
|
// 内圈边框 |
|
{ |
|
// 颜色 |
|
color: ["#305376"], |
|
type: "pie", |
|
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
|
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
|
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
|
// 这里开启silent: true, 就达到效果了 |
|
// center与非内圈一致 |
|
radius: ["38%", "39%"], |
|
center: ["28%", "44%"], |
|
label: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 0, |
|
name: "", |
|
itemStyle: {}, |
|
}, |
|
], |
|
}, |
|
// 最里面渐变小圆 |
|
{ |
|
// 颜色 |
|
type: "pie", |
|
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
|
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
|
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
|
// 这里开启silent: true, 就达到效果了 |
|
// center与非内圈一致 |
|
radius: ["0%", "38%"], |
|
center: ["28%", "44%"], |
|
label: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 0, |
|
name: "", |
|
itemStyle: {}, |
|
}, |
|
], |
|
itemStyle: { |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 1, |
|
y2: 1, |
|
colorStops: [ |
|
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
|
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
}, |
|
}, |
|
], |
|
}; |
|
//把配置项给实例对象 |
|
this.chartInstance.setOption(this.option, true); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.charts { |
|
margin-top: 30px; |
|
width: 100%; |
|
height: 200px; |
|
margin-top: 20px; |
|
} |
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
|
@media (min-width: 2000px) { |
|
.charts { |
|
margin-top: 0.3rem !important; |
|
height: 2.4rem !important; |
|
margin-top: 0.2rem !important; |
|
} |
|
} |
|
</style>
|
|
|