newcpms/ui/src/views/monitor/elec/echart/bottom/bottomRightChart2.vue

<template>
  <div @click="openSteamUsed">
    <div id="bottomRightChart2" style="width:100%;height:2.6rem;">
    </div>
    <el-dialog class="my-info-dialog" :visible.sync="openChart" title="瞬时值" @open="open" width="1600px" destroy-on-close append-to-body>
      <div id="bottomRightChart2Dialog" style="width:100%;height:600px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
import echarts from "@/api/cpms/echarts.min";

export default {
  data() {
    return {
      chart:null,
      openChart: false,
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    openSteamUsed(){
      this.openChart = true
    },
    open(){
      this.$nextTick(() => {
        this.drawDialog()
      })
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('bottomRightChart2'))
      // let lineData = [
      //   820, 932, 901, 934, 1290, 1330, 1320
      // ];
      let option={
        legend:{
          orient:'horizontal',
          x: 'left',
          y: 'top',
        },
        grid: {
          top: '16%',   // 等价于 y: '16%'
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#ffffff'
            }
          },
          axisLabel: {
            rotate: 0, // 旋转角度
            interval: 1  //设置X轴数据间隔几个显示一个，为0表示都显示
          },
          boundaryGap: false,
          type: 'category',
          data: [
            '00:00-03:00',
            '03:00-06:00',
            '06:00-09:00',
            '09:00-12:00',
            '12:00-15:00',
            '15:00-18:00',
            '18:00-21:00',
            '21:00-00:00'
          ]
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#ffffff'
            }
          },
        },
        series: [
          {
            data: [500, 680, 733, 470, 1290, 980, 1320,1580],
            type: 'line',
            smooth: 0.5,
            symbolSize: 10,
            areaStyle:{
              color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                offset:0,
                color:'#92bda6',
              },{
                offset: 1,
                color: '#2480bb'
              }
              ])
              },
            itemStyle: {
              normal: {
                lineStyle:{
                  width:1,
                  type:'solid'
                },
                borderColor:'red',
                color: "#92bda6"
              }
            },
          },

          // {
          //   name: 'HP',
          //   type: "bar",
          //   barGap: "-100%",
          //   stack: 'Ad',
          //   barWidth: 10,
          //   itemStyle: {
          //     normal: {
          //       barBorderRadius: 5,
          //       color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         { offset: 0, color: "#956FD4" },
          //         { offset: 1, color: "#3EACE5" }
          //       ])
          //     }
          //   },
          //   z: -12,
          //   data: lineData
          // },
        ]
      }
      this.chart.setOption(option);
    },
    drawDialog() {
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = this.echarts.init(document.getElementById('bottomRightChart2Dialog'))
      // let lineData = [
      //   820, 932, 901, 934, 1290, 1330, 1320
      // ];
      let option={
        legend:{
          orient:'horizontal',
          x: 'left',
          y: 'top',
        },
        grid: {
          top: '16%',   // 等价于 y: '16%'
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            lineStyle: {
            }
          },
          type: 'category',
          data: [
            '00:00-03:00',
            '03:00-06:00',
            '06:00-09:00',
            '09:00-12:00',
            '12:00-15:00',
            '15:00-18:00',
            '18:00-21:00',
            '21:00-00:00'
          ]
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
            }
          },
        },
        series: [
          {
            data: [500, 680, 733, 470, 1290, 980, 1320,1580],
            type: 'line',
            smooth: 0.5,
            symbolSize: 10,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle:{
              color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                offset:0,
                color:'#92bda6',
              },{
                offset: 1,
                color: '#2480bb'
              }
              ])
            },
            itemStyle: {
              normal: {
                lineStyle:{
                  width:1,
                  type:'solid'
                },
                borderColor:'red',
                color: "#92bda6"
              }
            },
          },
        ]
      }
      this.chart1.setOption(option);
    }
  },
}
</script>

<style scoped>

</style>