279 lines
9.6 KiB
Vue
279 lines
9.6 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-07-09 16:06:13
|
||
* @LastEditTime: 2024-07-26 16:57:33
|
||
* @LastEditors: zhp
|
||
* @Description:
|
||
-->
|
||
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-06-19 15:28:34
|
||
* @LastEditTime: 2024-07-08 14:19:57
|
||
* @LastEditors: zhp
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div>
|
||
<!-- 暂无数据 -->
|
||
<div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
|
||
v-show="this.chartMsg.series[0].data.length === 0"></div>
|
||
<!-- 图例 -->
|
||
<div v-show="this.chartMsg.series[0].data.length > 0 ">
|
||
<div class="legendData" v-if="show">
|
||
<span class="itemData" v-for="item in legendList" :key="item.id">
|
||
<span v-if="item.type === 1" class="block" :style="{ backgroundColor: item.color }"></span>
|
||
<span v-if="item.type === 2" class="line" :style="{ backgroundColor: item.color }">
|
||
<span class="line-block" :style="{ backgroundColor: item.color }"></span>
|
||
</span>
|
||
{{ item.name }}</span>
|
||
</div>
|
||
<div :id="chartId" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import { debounce } from "@/utils/debounce";
|
||
export default {
|
||
name: "bmLineBar",
|
||
data() {
|
||
return {
|
||
myChart: "",
|
||
option: {
|
||
color: [],
|
||
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
|
||
grid: {
|
||
left: 30,
|
||
right: 50,
|
||
bottom: 30,
|
||
top: 30,
|
||
containLabel:true,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// type: "cross",
|
||
crossStyle: {
|
||
color: "rgba(237,237,237,0.5)",
|
||
},
|
||
},
|
||
formatter: function (params) {
|
||
console.log('params', params)
|
||
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
|
||
for (var i = 0, l = params.length; i < l; i++) {
|
||
res +=
|
||
"<br/>" +
|
||
`${params[i].seriesType === "line"
|
||
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
|
||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
|
||
}` +
|
||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
|
||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||
: params[i].seriesName === "转化效率"
|
||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||
: params[i].seriesName.search('总功率') != -1
|
||
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
|
||
: params[i].seriesName.search('BIPV') != -1
|
||
? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].value ? params[i].value : 0) + "片"
|
||
}</span>`;
|
||
}
|
||
return res;
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [],
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
dataZoom: [//滚动条
|
||
{
|
||
// 设置滚动条的隐藏与显示
|
||
show: true,
|
||
// 设置滚动条类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "#F7F7F7",
|
||
// handleStyle: {
|
||
// color: '#D6D6D6'
|
||
// },
|
||
handleStyle: {
|
||
borderColor: '#EBEBEB',
|
||
color: '#EBEBEB'
|
||
},
|
||
moveHandleStyle: {
|
||
borderColor: '#EBEBEB',
|
||
color: '#EBEBEB'
|
||
},
|
||
emphasis: {
|
||
handleStyle: {
|
||
borderColor: '#D6D6D6',
|
||
color: '#D6D6D6'
|
||
},
|
||
moveHandleStyle: {
|
||
borderColor: '#D6D6D6',
|
||
color: '#D6D6D6'
|
||
}
|
||
},
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "#F7F7F7",
|
||
// 设置边框颜色
|
||
borderColor: "#F7F7F7",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 5,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 设置滚动条宽度，相对于盒子宽度
|
||
width: "100%",
|
||
// 设置滚动条高度
|
||
height: 3,
|
||
// 设置滚动条显示位置
|
||
left: "center",
|
||
minValueSpan:2,
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 控制手柄的尺寸
|
||
handleSize: 0,
|
||
// dataZoom-slider组件离容器下侧的距离
|
||
bottom: 14,
|
||
},
|
||
{
|
||
// 没有下面这块的话，只能拖动滚动条，
|
||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||
type: "inside",
|
||
// 滚轮是否触发缩放
|
||
zoomOnMouseWheel: false,
|
||
// 鼠标滚轮触发滚动
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
yAxis:undefined,
|
||
series: [],
|
||
},
|
||
};
|
||
},
|
||
props: {
|
||
chartHeight: {
|
||
type: Number,
|
||
default: 300,
|
||
},
|
||
type: {
|
||
type: Number,
|
||
default: 2,
|
||
},
|
||
show: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
legendList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
chartMsg: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
chartId: {
|
||
type: String,
|
||
default: "bmChart",
|
||
},
|
||
chartNum: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
},
|
||
watch: {
|
||
chartHeight: {
|
||
handler(newVal) {
|
||
this.chartHeight = newVal;
|
||
},
|
||
},
|
||
type() {
|
||
this.canvasReset();
|
||
},
|
||
chartNum(val) {
|
||
this.canvasReset();
|
||
},
|
||
chartMsg: {
|
||
handler(newVal) {
|
||
this.canvasReset();
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
this.canvasReset();
|
||
},
|
||
methods: {
|
||
canvasReset() {
|
||
debounce(() => {
|
||
this.getMes();
|
||
}, 500)();
|
||
},
|
||
getMes() {
|
||
console.log('222222', this.chartMsg.series);
|
||
if (this.myChart) {
|
||
this.myChart.dispose();
|
||
}
|
||
var chartDom = document.getElementById(this.chartId);
|
||
this.myChart = echarts.init(chartDom);
|
||
this.option.color = this.chartMsg.color;
|
||
this.option.xAxis.data = this.chartMsg.xData;
|
||
// this.option.yAxis.name = this.chartMsg.yName;
|
||
|
||
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
|
||
this.option.series = this.chartMsg.series;
|
||
this.option.yAxis = this.chartMsg.yAxis;
|
||
|
||
this.myChart.setOption(this.option);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.legendData {
|
||
text-align: right;
|
||
position: relative;
|
||
// right: 30;
|
||
top: 0px;
|
||
.itemData {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
font-size: 14px;
|
||
color: #8c8c8c;
|
||
.block {
|
||
width: 10px;
|
||
height: 10px;
|
||
display: inline-block;
|
||
margin-right: 4px;
|
||
}
|
||
.line {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
display: inline-block;
|
||
margin-right: 4px;
|
||
position: relative;
|
||
.line-block {
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 2px;
|
||
left: -5px;
|
||
top: 4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|