262 lines
8.1 KiB
Vue
262 lines
8.1 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-06-21 09:05:14
|
||
* @LastEditTime: 2024-07-09 16:15:04
|
||
* @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: 60,
|
||
right: 0,
|
||
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)
|
||
let arr = []
|
||
var res = ``;
|
||
// for (var i = 0, l = params.length; i < l; i++) {
|
||
// console.log()
|
||
if (params[0].axisValue === 'FTO投入' || params[0].axisValue === '芯片产量' || params[0].axisValue === '标准组件产量' || params[0].axisValue === '芯片总功率' || params[0].axisValue === '标准组件总功率') {
|
||
res +=
|
||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[0].color}'></span>` +
|
||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[0].axisValueLabel}</span>` +
|
||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[0].name === "综合良率"
|
||
? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%"
|
||
: params[0].name === "转化效率"
|
||
? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0.0) + "%"
|
||
: params[0].axisValueLabel.search('总功率') != -1
|
||
? (params[0].value ? parseFloat(params[0].value.toFixed(2)) : 0) + "MW"
|
||
: (params[0].value ? params[0].value : 0) + "片"
|
||
}</span>`;
|
||
// }
|
||
}
|
||
if (params[1].axisValue === '综合良率' || params[1].axisValue === '转化效率') {
|
||
res +=
|
||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[1].color}'></span>` +
|
||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[1].axisValueLabel}</span>` +
|
||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[1].name === "综合良率"
|
||
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
|
||
: params[1].name === "转化效率"
|
||
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
|
||
: params[1].axisValueLabel.search('总功率') != -1
|
||
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0) + "MW"
|
||
: (params[1].value ? params[1].value : 0) + "片"
|
||
}</span>`;
|
||
}
|
||
return res;
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [],
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
// dataZoom: [//滚动条
|
||
// {
|
||
// // 设置滚动条的隐藏与显示
|
||
// show: true,
|
||
// // 设置滚动条类型
|
||
// type: "slider",
|
||
// // 设置背景颜色
|
||
// backgroundColor: "#F7F7F7",
|
||
// // 设置选中范围的填充颜色
|
||
// fillerColor: "#EBEBEB",
|
||
// // 设置边框颜色
|
||
// borderColor: "#F7F7F7",
|
||
// // 是否显示detail，即拖拽时候显示详细数值信息
|
||
// showDetail: false,
|
||
// // 数据窗口范围的起始数值
|
||
// startValue: 0,
|
||
// // 数据窗口范围的结束数值（一页显示多少条数据）
|
||
// endValue: 5,
|
||
// // empty：当前数据窗口外的数据，被设置为空。
|
||
// // 即不会影响其他轴的数据范围
|
||
// filterMode: "empty",
|
||
// // 设置滚动条宽度，相对于盒子宽度
|
||
// width: "100%",
|
||
// // 设置滚动条高度
|
||
// 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() {
|
||
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;
|
||
top: 0px;
|
||
// 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>
|