- <template>
- <!-- 排口 -->
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script setup>
- import { guid } from "@/utils/ruoyi";
- import { nextTick } from "vue";
- const id = guid();
- const myChart = shallowRef("");
- import * as echarts from "echarts";
- import { nowSize } from '@/utils/util.js';
- import moment from 'moment';
-
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //x轴数据
- XAxis: {
- type: Array,
- default: () => [],
- },
- //y轴数据
- YAxis: {
- type: Array,
- default: () => [],
- },
- //名字
- DataName: {
- type: String,
- },
- //类型
- typeName: {
- type: String,
- default: "",
- },
- yAxisarr: {
- type: Array,
- default: () => [],
- },
- });
-
- watch(
- () => props.refresh,
- (value) => {
- console.log("???????");
- //先销毁实例
- myChart.value && myChart.value.dispose();
- init();
- },
- {
- deep: true,
- }
- );
- function init() {
- let colorarr = [
- "#99FF55",
- "#b14de5",
- "#FFC155",
- "#409eff",
- "#ff7f50",
- "#ff69b4",
- "#87ceeb",
- "#4682b4",
- "#98fb98",
- ];
- let rightnumber = props.yAxisarr.length * "4.5" + "%";
- let newarr = [];
- let marklinedata = [];
- let maxArr = [];
- let minArr = [];
- let finyasx = [
- {
- show: false,
- inverse: true, //控制x轴在上方
- name: props.typeName,
- type: "value",
- axisLabel: {
- show: true,
- color: "#409eff",
-
- },
- axisLine: {
- lineStyle: {
- color: "#409eff",
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: "rgba(61,91,98,0.8)",
- },
- },
- // min: 0,
- },
- ];
-
- let finxse = [
- // {
- // name: props.typeName,
- // type: 'bar',
- // barWidth: 12,
- // itemStyle: {
- // borderRadius: [0, 0, 6, 6],
- // color: function () {
- // return new echarts.graphic.LinearGradient(
- // 0,
- // 1,
- // 0,
- // 0,
- // [
- // {
- // offset: 0.1,
- // color: '#409eff', // 0% 处的颜色
- // },
- // {
- // offset: 0.9,
- // color: '#013068', // 100% 处的颜色
- // },
- // ],
- // false
- // );
- // },
- // },
- // // showBackground: true,
- // backgroundStyle: {
- // color: 'transparent',
- // borderWidth: 1,
- // borderColor: 'rgba(148, 250, 65, 0.2)',
- // },
- // data: props.YAxis,
- // },
- ];
-
- console.log("获取的Y轴的数据", props.yAxisarr);
-
- // 处理多个y轴遍历展示
- if (props.yAxisarr) {
- props.yAxisarr.map((item, index) => {
- let arr = [];
- let markLineArr = [];
- item.cordonLineList.map((p) => {
- markLineArr.push(Number(p.lineValue));
- arr.push({
- silent: false, //鼠标悬停事件 true没有,false有
- lineStyle: {
- //警戒线的样式 ,虚实 颜色
- type: "dashed",
- color: p.lineColor,
- },
- name: p.lineName,
- yAxis: Number(p.lineValue),
-
- label: {
- formatter: `${p.lineValue}-${p.lineName}`,
- color: p.lineColor,
- },
- });
- });
-
- item["maxValue"] = Math.max.apply(null, [...item.datas, ...markLineArr]);
- item["minValue"] = Math.min.apply(null, [...item.datas, ...markLineArr]);
-
- marklinedata.push(arr);
- });
-
- console.log("marklinedata", marklinedata);
- props.yAxisarr.map((item, index) => {
- let obj = {
- name: item.dataName,
- type: "value",
- axisLabel: {
- show: true,
- color: colorarr[index],
- formatter: function (value) {
- return value.toFixed(2); // 保留两位小数
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: colorarr[index],
- },
- },
-
- splitLine: {
- show: false,
- lineStyle: {
- color: "rgba(61,91,98,0.8)",
- },
- },
- min: Math.floor(item.minValue * 0.95),
- max: item.maxValue,
- };
-
- if (index == 0) {
- obj.position = "left";
- } else if (index == 1) {
- obj.position = "right";
- } else {
- obj.position = "right";
- obj.offset = (index - 1.1) * 70;
- // obj.show = false;
- }
-
- finyasx.push(obj);
-
- finxse.push({
- smooth: true, //变为曲线 默认false折线
- name: item.dataName + item.unit,
- type: "line",
- yAxisIndex: index + 1,
- data: item.datas,
- markLine: {
- symbol: "none", //去掉警戒线最后面的箭头
- label: {
- position: "middle", //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
- },
- data: marklinedata[index],
- },
- });
- });
- }
-
- myChart.value = echarts.init(document.getElementById(id));
- let option = {
- color: colorarr,
- legend: {
- show: true,
- orient: "horizontal", //horizontal横向 vertical 纵向
- type: "scroll",
- x: "center", //居右显示
- align: "left", //图例控制在左边
- // icon: 'circle',
- // itemWidth: 15,
- itemHeight: 15,
- itemHeight: 15,
- textStyle: {
- color: "auto",
- rich: {
- another: {
- fontSize: 14,
- },
- },
- fontSize: 12,
- },
- },
- tooltip: {
- trigger: "axis",
- backgroundColor: '#004284',
- borderColor: '#0B9BFF',
- borderRadius: 6, // 设置圆角大小
- feature: {
- mark: { show: true },
- dataView: { show: true, readOnly: false },
- magicType: { show: true, type: ["line", "bar"] },
- restore: { show: true },
- saveAsImage: { show: true },
- },
- formatter: function (params) {
- let res = params[0].name + '<br/>';
- params.forEach(function (item) {
- // 对每个数据项的数值进行格式化,保留两位小数
- let text= `<div class="flex flex-justcontent-spacebetween">
- <span>${item.marker}${item.seriesName}</span>
- <span>${(item.value == null ? '-' : Number(item.value).toFixed(2))}</span>
- </div>`
- res +=text ;
- });
- return res;
- },
- textStyle: {
- // 字体颜色
- color: 'white',
- // 字体大小
- fontSize: nowSize(14, 1920),
-
- },
- axisPointer: {
- type: "cross",
- textStyle: {
- color: "#fff",
- },
- },
- },
- grid: {
- top: "33%",
- left: 5,
- right: rightnumber,
- // right: '5%',
- bottom: "10%",
- containLabel: true,
- },
- xAxis: [
- {
- type: "category",
- data: props.XAxis,
- axisLabel: {
- color: 'rgba(255,255,255,1)',
- fontSize: nowSize(12, 1920),
- fontFamily: 'AlibabaPuHuiTi',
- formatter: function (value) {
- return moment(value).format('HH:MM');
- },
- },
- axisPointer: {
- type: "shadow",
- },
-
- axisLine: {
- lineStyle: {
- // color: '#3398DB',
- },
- },
- },
- ],
- yAxis: finyasx,
- dataZoom: [
- {
- show: true,
- // show: false,
- height: 4,
- bottom: 18,
- start: 0,
- end: 100,
- handleSize: "100%",
- fillerColor: "#94FA41",
- borderColor: "transparent",
- backgroundColor: "rgba(148, 250, 65, 0.2)",
- handleStyle: {
- color: "#94FA41",
- },
- moveHandleSize: 0,
- textStyle: {
- color: "#fff",
- },
- },
- {
- type: "inside",
- show: true,
- height: 15,
- start: 1,
- end: 35,
- },
- ],
- series: finxse,
- };
-
- option && myChart.value.setOption(option);
- }
-
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- onMounted(() => {
- nextTick(() => {
- init();
- window.addEventListener("resize", resizeTheChart);
- });
- });
- </script>