123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <template>
- <div ref="realTimeChart" 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: {},
- data() {
- return {
- chart: null,
- };
- },
- mounted() {
- this.eptrendIco();
- },
- beforeUnmount() {
- window.removeEventListener("resize", this.chart);
- },
- watch: {
- "$store.state.siteId"() {
- this.eptrendIco();
- },
- },
- methods: {
- eptrendIco() {
- api
- .eptrendIco({
- siteId: this.$store.state.siteId,
- })
- .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.realTimeChart);
- var option;
- var dataAll = [];
- data.map((val) => {
- dataAll.push({
- name: val.name,
- type: "line",
- smooth: false,
- data: val.list,
- symbolSize: 6,
- });
- });
- option = {
- color: ["#F66167", "#31E9FF"],
- tooltip: {
- trigger: "axis",
- },
- // 图列组件
- legend: {
- itemHeight: 8, //改变圆圈大小
- 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: "MW",
- 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>
|