123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <template>
- <div ref="histTrendChart" style="width: 100%; height: 100%"></div>
- </template>
- <script>
- import * as echarts from "echarts";
- import api from "@/api/Overview/index";
- import { ElMessage } from "element-plus";
- export default {
- props: {
- msg: Object,
- filterSec_value: Object,
- hisDefaultTime: Object,
- },
- data() {
- return {
- yName:''
- };
- },
- mounted() {
- this.$nextTick(() => {
- this.electricIco();
- });
- },
- beforeUnmount() {
- window.removeEventListener("resize", this.chart);
- },
- watch: {
- "$store.state.siteId"() {
- this.electricIco();
- },
- hisDefaultTime() {
- this.electricIco();
- },
- msg() {
- this.electricIco();
- },
- filterSec_value() {
- this.electricIco();
- },
- },
- methods: {
- electricIco() {
- this.$store.commit("TimeAll_function", [this.hisDefaultTime]);
- var time = this.$store.state.Time_Data;
- console.log('time[0]')
- console.log(time[0])
- console.log(time[1])
- api
- .electricIco({
- siteId: this.$store.state.siteId,
- date: time[0],
- })
- .then((requset) => {
- if (requset.status === "SUCCESS") {
- this.initChart(requset.data);
- } else {
- ElMessage.success({
- message: requset.msg,
- type: "success",
- });
- }
- });
- },
- //次数分布折线图
- initChart(data) {
- var chart = echarts.init(this.$refs.histTrendChart);
- var option;
- var dataAll = [];
- data.map((val) => {
- if (this.msg == 0) {
- this.yName="A";
- if (val.name == "IA" || val.name == "IB" || val.name == "IC") {
- return dataAll.push({
- name: val.name + "(A)",
- type: "line",
- smooth: false,
- data: val.list,
- symbolSize: 6,
- });
- }
- } else {
- this.yName="kV";
- if (val.name == "UA" || val.name == "UB" || val.name == "UC") {
- return dataAll.push({
- name: val.name + "(kV)",
- type: "line",
- smooth: false,
- data: val.list,
- symbolSize: 6,
- });
- }
- }
- });
- option = {
- color: ["#FEB70D", "#50F335", "#0DC8FE"],
- tooltip: {
- trigger: "axis",
- },
- // 图列组件
- legend: {
- itemHeight: 10, //改变圆圈大小
- itemWidth: 26, //改变圆圈大小
- itemGap: 30,
- textStyle: {
- color: "#fff",
- },
- left: "30%",
- bottom: "0",
- },
- grid: {
- left: "0%",
- right: "0%",
- bottom: "15%",
- top: "20%",
- containLabel: true,
- },
- xAxis: {
- type: "category",
- boundaryGap: true,
- data: data[0].listDate.map((val) => {
- return val.split(":")[0] + ":" + val.split(":")[1];
- }),
- axisTick: {
- show: false, //去除刻度线
- },
- axisLabel: {
- color: "#fff", // 文本颜色
- },
- axisLine: {
- show: false, // 去除轴线
- },
- },
- yAxis: {
- name: this.yName,
- nameTextStyle: {
- color: "#fff",
- fontSize: 10,
- },
- 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: dataAll,
- };
- chart.setOption(option, true);
- window.addEventListener("resize", () => {
- chart.resize();
- });
- this.chart = chart;
- },
- },
- };
- </script>
|