247 lines
6.9 KiB
Vue
247 lines
6.9 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-06-20 16:13:36
|
||
* @LastEditTime: 2024-06-26 14:48:49
|
||
* @LastEditors: zhp
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div>
|
||
<!-- 暂无数据 -->
|
||
<div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
|
||
v-show="this.chartMsg.series.length === 0"></div>
|
||
<!-- 图例 -->
|
||
<div v-show="this.chartMsg.series.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: -60,
|
||
right: 0,
|
||
bottom: 31,
|
||
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.data)
|
||
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/>" +
|
||
`<span style='display:inline-block;margin-right:4px;border-radius:10px;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].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%"
|
||
: params[i].seriesName === "转化效率"
|
||
? (params[i].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%"
|
||
: params[i].seriesName.search('总功率') != -1
|
||
? (params[i].data.titleValue ? params[i].data.titleValue : 0) + "MW"
|
||
: (params[i].data.titleValue ? params[i].data.titleValue : 0) + "片"
|
||
}</span>`;
|
||
}
|
||
return res;
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [],
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
dataZoom: [//滚动条
|
||
{
|
||
// 设置滚动条的隐藏与显示
|
||
show: true,
|
||
// 设置滚动条类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "rgb(19, 63, 100)",
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "rgb(16, 171, 198)",
|
||
// 设置边框颜色
|
||
borderColor: "rgb(19, 63, 100)",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 5,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 设置滚动条宽度，相对于盒子宽度
|
||
width: "50%",
|
||
// 设置滚动条高度
|
||
height: 8,
|
||
// 设置滚动条显示位置
|
||
left: "center",
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 控制手柄的尺寸
|
||
handleSize: 0,
|
||
// dataZoom-slider组件离容器下侧的距离
|
||
bottom: 3,
|
||
},
|
||
{
|
||
// 没有下面这块的话，只能拖动滚动条，
|
||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||
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);
|
||
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">
|
||
.legendData {
|
||
text-align: right;
|
||
position: relative;
|
||
// right: 30;
|
||
// top: 10px;
|
||
.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>
|