大屏显示echarts

最新推荐文章于 2025-03-18 07:30:00 发布

喔烨鸭

最新推荐文章于 2025-03-18 07:30:00 发布

阅读量379

点赞数

分类专栏：学习前端专栏文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45432996/article/details/125563133

版权

学习前端专栏专栏收录该内容

4 篇文章

订阅专栏

加点写的，原创内容，如果帮到你请收藏文章！（详细样式请翻阅官网文档）
在这里插入图片描述
vue

<template>
  <div class="max-content">
    <div class="max-contenttop">
      <div class="item">
        <div class="item-serach">
          <a-form :form="form" layout="inline">
            <a-form-item label="日期区间">
              <a-range-picker v-decorator="['range-picker']" :default-value="[moment('2022/01/01', dateFormat), moment('2022/01/05', dateFormat)]"
      :format="dateFormat"/> 
            </a-form-item>
            <a-form-item label="EQP TYPE">
              <a-select
                mode="multiple"
                :allowClear="true"
                :maxTagCount="1"
                v-decorator="['section']"
                style="width: 120px"
              >
                <a-select-option
                  v-for="(i, optionIndex) in sectionList"
                  :key="optionIndex"
                  :value="i"
                >
                  {{ i }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 16 }">
              <a-button
                type="primary"
                class="searchBtn"
                style="min-width: 75px"
                @click="handleSearch"
              >
                Query
              </a-button>
            </a-form-item>
          </a-form>
        </div>
        <div class="item-info">
          <div
            ref="firstchart"
            style="
              width: 100%;
              height: 440px;
            "
          ></div>
        </div>
      </div>
      <div class="item">
        <div class="item-serach">
          <a-form layout="inline" :form="formright">
            <a-form-item label="日期区间">
              <a-range-picker v-decorator="['range-picker']" />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 24 }">
              <a-button
                type="primary"
                class="searchBtn"
                style="min-width: 75px"
                @click="handleSearch"
              >
                Query
              </a-button>
              <a-button
                type="primary"
                class="searchBtn"
                style="min-width: 75px; margin-left: 10px"
                @click="handleReset"
              >
                Reset
              </a-button>
              <a-button type="primary"
                class="searchBtn"
                style="min-width: 75px; margin-left: 10px">Refresh</a-button>
              <a-button type="primary"
                class="searchBtn"
                style="min-width: 75px; margin-left: 10px">Handover</a-button>
            </a-form-item>
          </a-form>
        </div>
        <div class="item-info">
          <div
            ref="secondChart"
            style="
              width: 100%;
              height: 440px;
            "
          ></div>
        </div>
      </div>
    </div>
    <div class="max-contentbottom">
      <div class="item">
        <div class="item-serach">
          <a-form :form="form" layout="inline">
            <a-form-item label="日期区间">
              <a-range-picker suffix-icon="calendar" @change="onChangeTime" />
              <!-- <a-select
                mode="multiple"
                :allowClear="true"
                :maxTagCount="1"
                v-decorator="['section']"
                style="width: 200px"
              >
                <a-select-option
                  v-for="(i, optionIndex) in sectionList"
                  :key="optionIndex"
                  :value="i"
                >
                  {{ i }}
                </a-select-option>
              </a-select> -->
            </a-form-item>

            <a-form-item :wrapper-col="{ span: 24 }">
              <a-button
                type="primary"
                class="searchBtn"
                style="min-width: 75px"
                @click="handleSearch"
              >
                Query
              </a-button>
              <a-button
                type="primary"
                class="searchBtn"
                style="min-width: 75px; margin-left: 10px"
                @click="handleReset"
              >
                Reset
              </a-button>
            </a-form-item>
          </a-form>
        </div>
        <div class="item-info">
          <div
            ref="thirdChart"
            style="
              width: 100%;
              height: 440px;
            "
          ></div>
        </div>
      </div>
      <div class="item">
        <div class="other-item">
          <a-row>
            <a-col :span="24"
              ><div class="fourth-view-item redbox">SPC</div></a-col
            >
          </a-row>
          <a-row>
            <a-col :span="12"
              ><div class="fourth-view-item yellowbox">Uptime</div></a-col
            >
            <a-col :span="12"
              ><div class="fourth-view-item yellowbox">Uptime</div></a-col
            >
          </a-row>
          <div class="fourth-view-flex">
            <div
              class="fourth-view-item purplebox"
              v-for="(item, index) in dataView"
              :key="index"
            >
              <span>{{ item.name }}</span>
            </div>
          </div>
          <div class="fourth-view-flex">
            <div
              class="fourth-view-item bluebox"
              v-for="(item, index) in dataArr"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import {
  firstChart,
  secondChart,
  thirdChart,
  dataArr,
  dataView,
} from "@/views/system/ceshi/datajson.js";
import { EleResize } from "@/views/system/ceshi/resize.js";
import moment from 'moment';
export default {
  name: "HomePage",
  data() {
    return {
      moment,
      dateFormat: 'YYYY/MM/DD',
      firstChartObj: firstChart,
      secondChartObj: secondChart,
      thirdChartObj: thirdChart,
      dataArr,
      dataView,
      form: this.$form.createForm(this, { name: "coordinated" }),
      formright: this.$form.createForm(this, { name: "rigthfrom" }),
      sectionList: [],
    };
  },
  computed: {
    
  },
  created() {},
  mounted() {
    console.log(this.chamberShowHeight, "******");
    let firstchartBox = this.$refs.firstchart;
    let chartOption = echarts.init(firstchartBox);
    chartOption.clear();
    chartOption.setOption(this.firstChartObj);
    let listener = function () {
      chartOption.resize();
    };
    EleResize.on(this.$refs.firstchart, listener);
    //secondChart
    let secondChartBox = this.$refs.secondChart;
    let chartsecondOption = echarts.init(secondChartBox);
    chartsecondOption.clear();
    chartsecondOption.setOption(this.secondChartObj);
    let listenersecond = function () {
      chartsecondOption.resize();
    };
    EleResize.on(this.$refs.secondChart, listenersecond);

    //thirdChart
    let thirdChartBox = this.$refs.thirdChart;
    let chartthirdOption = echarts.init(thirdChartBox);
    chartthirdOption.clear();
    chartthirdOption.setOption(this.thirdChartObj);
    let listenerthird = function () {
      chartthirdOption.resize();
    };
    EleResize.on(this.$refs.thirdChart, listenerthird);
  },
  methods: {
    handleSearch() {},
    handleReset() {},
    onChangeTime(date, dateString) {
      console.log(date, dateString);
    },
  },
};
</script>
<style lang="scss" scoped>
.item-info {
  padding: 0 10px 10px 10px;

  //   background-color: #242424;
  //   display: inline-block;
}
.fourth-view-item {
  display: flex;
    justify-content: center;  // 水平居中
    align-items: center;  // 垂直居中
  height: 60px;
  text-align: center;
  // background-color: rgba(157, 63, 54, 0);
  border-radius: 10px;
  // background: linear-gradient(315deg, #f0f0f0, #cacaca);
  // box-shadow:  -5px -5px 9px #acacac,5px 5px 9px #ffffff;
}
.redbox {
  width: 99%;
  height: 60px;
  margin: 0.5% 0;
  // background: linear-gradient(315deg, #e73030, #680c0c);
  // box-shadow:  -5px -5px 9px #2e1010,5px 5px 9px #050505;
  background-color: #680c0c;
}
.yellowbox {
  width: 99%;
  // line-height: ;
  // height: 60px;
  margin: 0.5% 0;
  // background: linear-gradient(315deg, #fdb824, #d8a416);
  // box-shadow:  -5px -5px 9px #a89a1e,5px 5px 9px #918201;
  background-color: #be8c01;
}
.purplebox {
  width: 12%;
  margin: 0.5% 0;
  // background: linear-gradient(315deg, #892eff, #591fdf);
  background-color: #47036e;
}
.bluebox {
  // width: 60px;
  // height: 60px;
  width: 12%;
  margin: 0.5% 0;
  // background: linear-gradient(315deg, #011099, #1870f5);
  background-color: #011099;
}
.fourth-view-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

//样式
.max-content {
  min-height: 888px;
  display: grid;
  background-color: #242424;
  .max-contenttop {
   width: 100%;
   overflow: hidden;
    // display: flex;
    // flex: 1;
    // height: 100%;
    // flex-direction: row;
    // flex-shrink: 0;
    .item {
      float: left;
      width: 50%;
      height: 100%;
      background-color: #242424;
      // &:hover{
      // box-shadow: 3px 5px 15px rgba(147, 235, 248, 0.35);
      // transform: scale(1.03);
      // transition: all 0.1s ease-out;
      // }
    }

  }
  .max-contentbottom {
     width: 100%;
   overflow: hidden;
    // display: flex;
    // flex: 1;
    // height: 100%;
    // flex-direction: row;
    // flex-shrink: 0;
    .item {
      float: left;
      width: 50%;
      height: 100%;
      background-color: #242424;
    }
  }
}
.item-serach {
  height: 50px;
  color: aliceblue;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
::v-deep .ant-form-item-label > label {
  color: #fff;
}
::v-deep .ant-input{
  background-color: #0000;
  color: #fff;
}
::v-deep .ant-select-selection{
  background-color: #0000;
}
.other-item{
  color: #fff;
  word-wrap: break-word;
}

</style>

数据

export const firstChart = {
    color: [
        '#ffbf53', '#04b1c2', '#f07474', '#c55784', '#9a5fb3',
        '#cf62d7', '#5e78ea', '#51b3f0', '#69d4dc', '#49b788',
        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
    ],
    backgroundColor: "#242640",
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        top: '15%',
        align: "left", //方框在左
        textStyle: {
            color: "#fff"
        }
    },
    grid: {
        left: '3%',
        right: '20%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
            'Mil',
            'Checoa',
            'Macoa',
            'Teas',
            'Orace',
            'Lemice'
        ],            
        axisLine: {//x轴线的颜色以及宽度
            show: true,
            lineStyle: {
                color: "#455B77",
                // width: 0,
                // type: "solid"
            }
        },
        axisLabel: {
            interval: 0,
            textStyle: {
                color: '#c0e6f9'
            }
        },
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: '#455B77' //y轴颜色
            }
        },
        axisLabel: {
            interval: 0,
            textStyle: {
                color: '#c0e6f9'
            }
        },
        splitLine:{
            //设置条纹显示 柱状图默认yAxis(true)
            show:true,
            //设置lineStyle即可写入样式即可
            lineStyle:{
              color:'#36374b',
            }
        },
    },
    series: [
        {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320, 20, 60, 30, 245, 12, 275, 56, 289]//,41,52,63]
        },
        {
            name: 'MailAd',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210, 60, 1130, 145, 1112, 275, 1156, 1189, 1141]
        },
        {
            name: 'AffiAd',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310, 1130, 145, 212, 1175, 256, 1189, 341, 52]
        },
        {
            name: 'VideoAd',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [150, 212, 201, 154, 190, 330, 410, 345, 112, 375, 156, 1189, 1341, 1152, 1563]
        },
        {
            name: 'Engine',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320, 1145, 212, 750, 560, 1189, 1441,1552, 1630]
        },
        {
            name: 'rose 1',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320, 1545, 1099, 1750, 1166, 1289, 1410, 1520, 1630]
        },
        {
            name: 'rose2',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320, 1450, 1199, 1750, 1660, 1389, 1341, 1052, 1630]
        },
        {
            name: 'rose3',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [820, 832, 901, 934, 1200, 1330, 120, 1145, 990, 375, 1166, 1189, 1410, 1252, 1630]
        },
        {
            name: 'rose4',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [890, 33, 901, 934, 1200, 1330, 3120, 245, 1199, 1275, 1660, 1489, 1410, 1352, 1630]
        },
        {
            name: 'rose5',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [890, 33, 901, 934, 1200, 1330, 2120, 1145, 990, 277, 1066, 239, 1341, 2352, 2163]
        },
        {
            name: 'rose6',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [190, 393, 901, 934, 1200, 1330, 1200, 1145, 2099, 477, 1166, 1390, 141, 152, 1630]
        },
        {
            name: 'rose7',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [190, 393, 901, 934, 1200, 1330, 120, 1245, 1199, 1177, 2266, 319, 141, 152, 630]
        },
        {
            name: 'rose8',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [190, 393, 701, 934, 1200, 1330, 1120, 1145, 2299, 1177, 1166, 1239, 410, 1152, 466]
        }
    ]
}
export const secondChart = {
    color: [
        '#ffbf53', '#04b1c2', '#f07474', '#c55784', '#9a5fb3',
        '#cf62d7', '#5e78ea', '#51b3f0', '#69d4dc', '#49b788',
        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
    ],
    backgroundColor: "#242640",
    title: {
        // text: 'Referer of a Website',
        subtext: 'REWORK',
        left: 'left',
        subtextStyle: {
            fontSize: 14,
            color: "#f1f1f1"
          }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        top: '15%',
        align: "left", //方框在左
        textStyle: {
            color: "#fff"
        }
    },
    
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['45%', '65%'],
            center: ['35%', '50%'],
            data: [
                { value: 735, name: 'production-Mix Run' },
                { value: 580, name: 'Other-PIE/MPD/PE/Other' },
                { value: 484, name: 'Wis Fail' },
                { value: 300, name: 'Other' },
                { value: 967, name: 'Tool Hang' },
                { value: 301, name: 'FDC-PIE' },
                { value: 207, name: 'Reject Wafer' },
                { value: 111, name: 'Mask issue' },
                { value: 635, name: 'EQP-MDT(Track Down)' },
                { value: 866, name: 'EQP-MDS(Scanner Down)' },
                { value: 733, name: 'FDC-Track' },
                { value: 796, name: 'Focus spot' }

            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
export const thirdChart = {
    color: [
        '#ffbf53', '#04b1c2', '#f07474', '#c55784', '#9a5fb3',
        '#cf62d7', '#5e78ea', '#51b3f0', '#69d4dc', '#49b788',
        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
    ],
    backgroundColor: "#242640",
    title: {
        //text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'left',
        subtextStyle: {
            fontSize: 14,
            color: "#f1f1f1"
          }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        top: '15%',
        align: "left", //方框在左
        textStyle: {
            color: "#fff"
        }
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['35%', '50%'],
            data: [
                { value: 1048, name: 'LITHO_PE_Search Engine' },
                { value: 735, name: 'LITHO_PE_Direct' },
                { value: 580, name: 'LITHO_PE_Email' },
                { value: 484, name: 'LITHO_PE_Union Ads' },
                { value: 300, name: 'LITHO_PE_Video Ads' },
                { value: 240, name: 'LITHO_PE_rose 1' },
                { value: 238, name: 'LITHO_PE_rose 2' },
                { value: 232, name: 'LITHO_PE_rose 3' },
                { value: 230, name: 'LITHO_PE_rose 4' },
                { value: 228, name: 'LITHO_PE_rose 5' },
                { value: 226, name: 'LITHO_PE_rose 6' },
                { value: 222, name: 'LITHO_PE_rose 7' },
                { value: 218, name: 'LITHO_PE_rose 8' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}

export const dataArr = [
    {
        name: "Tool installation daily report", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "Tool installation daily report", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "Tool installation daily report", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
]

export const dataView = [
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
    {
        name: "PM", path: ""
    },
    {
        name: "SPC", path: ""
    },
]