<template>
<div style="margin-bottom: 0.5rem">
<div
v-if="chartData && chartData.length > 0"
style="height: 1.98rem"
:id="chartId"
v-on-echart-resize
></div>
<div
style="height: 1.98rem"
v-if="!chartData || !(chartData.length > 0)"
class="temp-data"
>
<img src="../assets/img/kong1.png" alt="" />
<div> 暂无此维度数据 </div>
</div>
</div>
</template>
<script>
const sortNum = new Date().getTime();
export default {
props: {
name: "",
chartData: {type: Array,},
xData: {type: Array,},
},
data() {
return {
myChart: null,
colorList: ["#3DFFCA", "#0EB5FF", "#FBBF00", "#FF6926", "#707070"],
};
},
computed: {chartId: function () {return this.name + new Date().getTime();},
},
/**
* 深度监听 图表生成之后 传定时刷新数据进来 因为数据不能动静传值，所以子组件应用深度监听来监控数据变动
*/
watch: {
chartData: {
deep: true,
handler(newVal, oldVal) {if (this.myChart) {this.myChart.dispose(); // 数据变换 先销毁
this.drawLine();} else {this.drawLine();
}
},
},
},
mounted() {this.drawLine();
},
beforeDestroy() {if (this.myChart) {this.myChart.dispose();
this.myChart = null;
}
},
methods: {drawLine() {
let _this = this;
let dataZoomLength = 100;
if (!this.xData.length || this.xData.length > 8) {dataZoomLength = 10;}
// 构建数据
let serOpt = [];
for (let i = 0; i < this.chartData.length; i++) {let target = this.chartData[i];
let item = {
name: target.name,
type: target.type,
data: target.data,
itemStyle: {
normal: {color: this.colorList[i],
barBorderRadius: [2, 2, 2, 2],
label: {
show: false, // 开启显示
position: "top", // 在上方显示
textStyle: {
// 数值款式
color: "#FBBF00",
fontSize: 8,
},
},
},
},
showBackground: true,
barWidth: 13,
backgroundStyle: {color: "rgba(0,0,0,0.3)",
},
};
serOpt.push(item);
}
// 构建图表
let option = {
tooltip: {
// 鼠标是否能够进入悬浮框
// 触发形式 mousemove, click, none, mousemove|click
triggerOn: `mousemove|click`,
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发无效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框地位的参考坐标系是：以外层 div 的左上角那一点为原点，x 轴向右，y 轴向下
// 提示框地位
var x = 0; // x 坐标地位
var y = 0; // y 坐标地位
// 以后鼠标地位
var pointX = point[0];
var pointY = point[1];
// 外层 div 大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0] / 3;
var boxHeight = size.contentSize[1] / 3;
// boxWidth > pointX 阐明鼠标右边放不下提示框
if (boxWidth > pointX) {x = 5;} else {
// 右边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 阐明鼠标上边放不下提示框
if (boxHeight > pointY) {y = 5;} else {
// 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
},
legend: {// data: ["目标值", "理论值"],
top: "-1%",
left: "5%",
itemWidth: 6,
itemHeight: 6,
textStyle: {
color: "#78D4CE", // 更改坐标轴文字色彩
fontSize: 10, // 更改坐标轴文字大小
},
},
grid: {
left: "3%",
top: "20%",
right: "5%",
bottom: "0%",
containLabel: true,
},
xAxis: {
type: "category",
data: this.xData,
axisLine: {
lineStyle: {color: "#0E635E", // 更改坐标轴色彩 #0E635E #052626},
},
axisLabel: {
interval: 0,
rotate: 30, // 歪斜
textStyle: {
color: "#78D4CE", // 更改坐标轴文字色彩
fontSize: 10, // 更改坐标轴文字大小
},
},
},
dataZoom: [
{
type: "inside", // 图表下方的伸缩条
show: true, // 是否显示
realtime: true, // 拖动时，是否实时更新系列的视图
start: 0, // 伸缩条开始地位（1-100），能够随时更改
end: dataZoomLength, // 伸缩条完结地位（1-100），能够随时更改
},
],
yAxis: [
{
// name: "",
type: "value",
// min: 0,
// max: 0.14,
nameGap: 35,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
type: "dotted",
color: "#0E635E",
},
},
axisLine: {
lineStyle: {color: "rgba(6, 50, 49, 0.5)", // 更改坐标轴色彩 #052626
},
},
axisLabel: {
textStyle: {
color: "#78D4CE", // 更改坐标轴文字色彩
fontSize: 10, // 更改坐标轴文字大小
},
},
},
],
series: serOpt,
};
// 基于筹备好的 dom，初始化 echarts 实例
if (this.chartId && document.getElementById(this.chartId)) {
// 动静存在 找不到问题。临时应用判断
this.myChart = this.$echarts.init(document.getElementById(this.chartId)
);
// 绘制图表
this.myChart.setOption(option);
}
window.addEventListener("resize", function () {if (_this.myChart && _this.myChart.resize()) {_this.myChart.resize();
}
});
},
},
};
</script>
<style>
</style>