<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>