|
@@ -0,0 +1,171 @@
|
|
|
+<template>
|
|
|
+ <div ref="lineChart" style="width: 100%; height: 100%"></div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ ftrendIcoCount: Array,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ftrendIco() {
|
|
|
+ return this.ftrendIcoCount;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChart();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeUnmount() {
|
|
|
+ window.removeEventListener("resize", this.chart);
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ ftrendIco() {
|
|
|
+ this.initChart();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //次数分布折线图
|
|
|
+ initChart() {
|
|
|
+ var _this = this;
|
|
|
+ var chart = echarts.init(this.$refs.lineChart);
|
|
|
+ var option;
|
|
|
+
|
|
|
+ var timeLine = new Array();
|
|
|
+ timeLine = this.ftrendIcoCount[0].listDate;
|
|
|
+ var time = this.$store.state.Time_Data;
|
|
|
+ this.$store.commit("getAll", [
|
|
|
+ time[0].split(" ")[0],
|
|
|
+ time[1].split(" ")[0],
|
|
|
+ ]); //将time变量中的开始时间和结束时间传给getAll方法
|
|
|
+ var timeall = this.$store.state.timearr; //将getAll已便利好的时间区间数组存入变量timeall
|
|
|
+
|
|
|
+ if (this.ftrendIcoCount[0].listDate.length) {
|
|
|
+ timeLine = this.ftrendIcoCount[0].listDate;
|
|
|
+ } else {
|
|
|
+ timeLine = [
|
|
|
+ parseInt(timeall[0].split("-")[1]) +
|
|
|
+ "-" +
|
|
|
+ parseInt(timeall[0].split("-")[2]),
|
|
|
+ ];
|
|
|
+ timeLine.map(() => {
|
|
|
+ _this.ftrendIcoCount[0].list.push(0);
|
|
|
+ _this.ftrendIcoCount[1].list.push(0);
|
|
|
+ return;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ option = {
|
|
|
+ color: ["#00F4FD", "#2FA4EE"],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ // 图列组件
|
|
|
+ legend: {
|
|
|
+ itemHeight: 8, //改变圆圈大小
|
|
|
+ itemWidth: 26, //改变圆圈大小
|
|
|
+ itemGap: 30,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+
|
|
|
+ // left: "10%",
|
|
|
+ bottom: -5,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "0%",
|
|
|
+ right: "0%",
|
|
|
+ bottom: "12%",
|
|
|
+ top: "20%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: true,
|
|
|
+ data: timeLine,
|
|
|
+ axisTick: {
|
|
|
+ show: false, //去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff", // 文本颜色
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false, // 去除轴线
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisTick: {
|
|
|
+ show: false, //去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff", // 文本颜色
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false, // 去除轴线
|
|
|
+ },
|
|
|
+ splitNumber: 5,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255,255,255,0.1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // name: "故障数量",
|
|
|
+ name: this.ftrendIcoCount[0].name,
|
|
|
+ type: "line",
|
|
|
+ smooth: false, // 曲线是否平滑显示
|
|
|
+ data: this.ftrendIcoCount[0].list,
|
|
|
+ // data: [
|
|
|
+ // 24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120, 230, 210,
|
|
|
+ // 230, 120, 230, 210, 120, 120, 230, 210, 230, 120, 230, 210, 120,
|
|
|
+ // 24, 40, 101, 134, 90, 230,
|
|
|
+ // ],
|
|
|
+ symbolSize: 6, //拐点圆的大小
|
|
|
+ // symbol: "circle",
|
|
|
+ // lineStyle: {
|
|
|
+ // color: "#00F4FD",
|
|
|
+ // width: 1,
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // borderWidth: 1,
|
|
|
+ // borderColor: "#00F4FD",
|
|
|
+ // color: "#000",
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: this.ftrendIcoCount[1].name,
|
|
|
+ type: "line",
|
|
|
+ smooth: false, // 曲线是否平滑显示
|
|
|
+ data: this.ftrendIcoCount[1].list,
|
|
|
+ // data: [
|
|
|
+ // 30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
|
|
|
+ // 240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
|
|
|
+ // 130, 30, 50, 110, 144, 110, 240, 228, 240,
|
|
|
+ // ],
|
|
|
+ // symbol: "circle",
|
|
|
+ symbolSize: 6,
|
|
|
+
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ chart.setOption(option, true);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ chart.resize();
|
|
|
+ });
|
|
|
+ this.chart = chart;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|