<template>
  <div class="water-benefit">
    <div class="left">
      <div class="benefit-panel">
        <div class="title">
          <div class="txt">生产效益</div>
          <el-select
            v-model="selectValue"
            placeholder="请选择"
            :popper-append-to-body="false"
            class="big-panel-select"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="panel-main">
          <div class="box">
            <span>总用水量</span>
            <p><span>1000</span>万m³</p>
          </div>
          <div class="box">
            <span>供水</span>
            <p><span>120</span>万m³</p>
          </div>
          <div class="box">
            <span>灌溉</span>
            <p><span>100</span>万m³</p>
          </div>
          <div class="box">
            <span>生态</span>
            <p><span>249</span>万m³</p>
          </div>
          <div class="box">
            <span>发电</span>
            <p><span>400</span>万m³</p>
          </div>
          <div class="chart-box">
            <div id="chart1"></div>
            <div class="flag">
              <span>同比</span>
              <div class="icon"></div>
              <p><span>5.0</span>%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="content-box">
        <div class="benefit-panel">
          <div class="title">
            <div class="txt">发电</div>
            <div class="is-big" @click="openChart('发电')"></div>
          </div>
          <div class="panel-main">
            <div class="fr-box">
              <div class="box">
                <span>1 号机组 / 4000 kw</span>
                <p>
                  <animate-number
                    class="animate-number"
                    from="0"
                    to="200"
                    duration="1000"
                    easing="easeOutQuad"
                    :formatter="(num) => num.toFixed(0)"
                  />
                  万m³
                </p>
              </div>
              <div class="box">
                <span>2 号机组 / 4000 kw</span>
                <p>
                  <animate-number
                    class="animate-number"
                    from="0"
                    to="200"
                    duration="1000"
                    easing="easeOutQuad"
                    :formatter="(num) => num.toFixed(0)"
                  />
                  万m³
                </p>
              </div>
              <div class="box">
                <span>3 号机组 / 10000 kw</span>
                <p>
                  <animate-number
                    class="animate-number"
                    from="0"
                    to="132"
                    duration="1000"
                    easing="easeOutQuad"
                    :formatter="(num) => num.toFixed(0)"
                  />
                  万m³
                </p>
              </div>
              <div class="box1">
                <p><span>5.0</span>%</p>
                <div class="s-box">
                  同比
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <div id="content-chart1"></div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="benefit-panel">
          <div class="title">
            <div class="txt">供水</div>
            <div class="is-big" @click="openChart('供水')"></div>
          </div>
          <div class="panel-main">
            <div class="fr-box">
              <div class="box">
                <span>水库供水量</span>
                <p>
                  <animate-number
                    class="animate-number"
                    from="0"
                    to="200"
                    duration="1000"
                    easing="easeOutQuad"
                    :formatter="(num) => num.toFixed(0)"
                  />
                  万m³
                </p>
              </div>
              <div class="box">
                <span>水厂取水量</span>
                <p>
                  <animate-number
                    class="animate-number"
                    from="0"
                    to="200"
                    duration="1000"
                    easing="easeOutQuad"
                    :formatter="(num) => num.toFixed(0)"
                  />
                  万m³
                </p>
              </div>
              <div class="box1">
                <p><span>5.0</span>%</p>
                <div class="s-box">
                  同比
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <div id="content-chart2"></div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="benefit-panel">
          <div class="title">
            <div class="txt">灌溉</div>
            <div class="is-big" @click="openChart('灌溉')"></div>
          </div>
          <div class="panel-main">
            <div class="fr-box">
              <div class="box">
                <span>灌溉水量</span>
                <p>
                  <animate-number
                    class="animate-number"
                    from="0"
                    to="200"
                    duration="1000"
                    easing="easeOutQuad"
                    :formatter="(num) => num.toFixed(0)"
                  />
                  万m³
                </p>
              </div>
              <div class="box1">
                <p><span>5.0</span>%</p>
                <div class="s-box">
                  同比
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <div id="content-chart3"></div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="benefit-panel">
          <div class="title">
            <div class="txt">生态</div>
            <div class="is-big" @click="openChart('生态')"></div>
          </div>
          <div class="panel-main">
            <div class="fr-box">
              <div class="box">
                <span>生态水量</span>
                <p>
                  <animate-number
                    class="animate-number"
                    from="0"
                    to="200"
                    duration="1000"
                    easing="easeOutQuad"
                    :formatter="(num) => num.toFixed(0)"
                  />
                  万m³
                </p>
              </div>
              <div class="box1">
                <p><span>5.0</span>%</p>
                <div class="s-box">
                  同比
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <div id="content-chart4"></div>
          </div>
        </div>
      </div>
    </div>
    <BigChart
      :show="chartShow1"
      @close-dialog="closeChart1"
      :title="chartTitle"
      class="dialog1"
    >
      <div class="fr-box">
        <div class="box">
          <span>1 号机组 / 4000 kw</span>
          <p>
            <animate-number
              class="animate-number"
              from="0"
              to="200"
              duration="1000"
              easing="easeOutQuad"
              :formatter="(num) => num.toFixed(0)"
            />
            万m³
          </p>
        </div>
        <div class="box">
          <span>2 号机组 / 4000 kw</span>
          <p>
            <animate-number
              class="animate-number"
              from="0"
              to="200"
              duration="1000"
              easing="easeOutQuad"
              :formatter="(num) => num.toFixed(0)"
            />
            万m³
          </p>
        </div>
        <div class="box">
          <span>3 号机组 / 10000 kw</span>
          <p>
            <animate-number
              class="animate-number"
              from="0"
              to="132"
              duration="1000"
              easing="easeOutQuad"
              :formatter="(num) => num.toFixed(0)"
            />
            万m³
          </p>
        </div>
        <div class="box1">
          <p><span>5.0</span>%</p>
          <div class="s-box">
            同比
            <div class="icon"></div>
          </div>
        </div>
      </div>
      <div class="big-chart"></div>
    </BigChart>
    <BigChart
      :show="chartShow2"
      @close-dialog="closeChart1"
      :title="chartTitle"
      class="dialog2"
    >
      <div class="fr-box">
        <div class="box">
          <span>水库供水量</span>
          <p>
            <animate-number
              class="animate-number"
              from="0"
              to="200"
              duration="1000"
              easing="easeOutQuad"
              :formatter="(num) => num.toFixed(0)"
            />
            万m³
          </p>
        </div>
        <div class="box">
          <span>水厂取水量</span>
          <p>
            <animate-number
              class="animate-number"
              from="0"
              to="200"
              duration="1000"
              easing="easeOutQuad"
              :formatter="(num) => num.toFixed(0)"
            />
            万m³
          </p>
        </div>
        <div class="box1">
          <p><span>5.0</span>%</p>
          <div class="s-box">
            同比
            <div class="icon"></div>
          </div>
        </div>
      </div>
      <div class="big-chart"></div>
    </BigChart>
    <BigChart
      :show="chartShow3"
      @close-dialog="closeChart1"
      :title="chartTitle"
      class="dialog3"
    >
      <div class="fr-box">
        <div class="box">
          <span>灌溉水量</span>
          <p>
            <animate-number
              class="animate-number"
              from="0"
              to="200"
              duration="1000"
              easing="easeOutQuad"
              :formatter="(num) => num.toFixed(0)"
            />
            万m³
          </p>
        </div>
        <div class="box1">
          <p><span>5.0</span>%</p>
          <div class="s-box">
            同比
            <div class="icon"></div>
          </div>
        </div>
      </div>
      <div class="big-chart"></div>
    </BigChart>
    <BigChart
      :show="chartShow4"
      @close-dialog="closeChart1"
      :title="chartTitle"
      class="dialog4"
    >
      <div class="fr-box">
        <div class="box">
          <span>生态水量</span>
          <p>
            <animate-number
              class="animate-number"
              from="0"
              to="200"
              duration="1000"
              easing="easeOutQuad"
              :formatter="(num) => num.toFixed(0)"
            />
            万m³
          </p>
        </div>
        <div class="box1">
          <p><span>5.0</span>%</p>
          <div class="s-box">
            同比
            <div class="icon"></div>
          </div>
        </div>
      </div>
      <div class="big-chart"></div>
    </BigChart>
  </div>
</template>

<script>
export default {
  name: 'WaterBenefit',
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.initChart)
  },
  destroyed () {
    window.removeEventListener('resize', this.initChart)
  },
  data () {
    return {
      // 弹层1
      reset: true,
      chartShow1: false,
      chartShow2: false,
      chartShow3: false,
      chartShow4: false,
      chartTitle: '图表',
      //
      selectValue: '1',
      options: [{
        value: '1',
        label: '近一年'
      }, {
        value: '2',
        label: '近两年'
      }, {
        value: '3',
        label: '近三年'
      }]
    }
  },
  methods: {
    openChart (title) {
      this.chartTitle = title
      if (title === '发电') {
        this.chartShow1 = true
        this.$nextTick(() => this.initContentChart1Copy())
      } else if (title === '供水') {
        this.chartShow2 = true
        this.$nextTick(() => this.initContentChart2Copy())
      } else if (title === '灌溉') {
        this.chartShow3 = true
        this.$nextTick(() => this.initContentChart3Copy())
      } else if (title === '生态') {
        this.chartShow4 = true
        this.$nextTick(() => this.initContentChart4Copy())
      }
    },
    closeChart1 (flag) {
      this.chartShow1 = flag
      this.chartShow2 = flag
      this.chartShow3 = flag
      this.chartShow4 = flag
    },
    initChart () {
      this.initChat1()
      this.initContentChart1()
      this.initContentChart2()
      this.initContentChart3()
      this.initContentChart4()
    },
    initChat1 () {
      const myChart = this.echarts.init(document.getElementById('chart1'))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16

          },
          itemWidth: 40,
          itemHeight: 20
        },
        series: [
          {
            type: 'pie',
            name: '用水量分析',
            center: ['50%', '60%'],
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {d}%',
              fontSize: 16
            },
            labelLine: {
              show: true,
              showAbove: true,
              length: 30,
              length2: 25,
              lineStyle: {
                width: 2
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            tooltip: {
              valueFormatter: (value) => value + '%'
            },
            data: [
              { value: '13', name: '供水' },
              { value: '42', name: '生态' },
              { value: '25', name: '灌溉' },
              { value: '20', name: '发电' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initContentChart1 () {
      const myChart = this.echarts.init(document.getElementById('content-chart1'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 30,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#03CDFF'
            }, {
              offset: 1, color: '#008AFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0,
            formatter: value => value + '月' // 文本格式化
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          interval: 10,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          }
        },
        series: [
          {
            name: '发电',
            barWidth: 15,
            data: [31, 58, 20, 78, 39, 20, 62, 42, 31, 50, 31, 41],
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + '（万kwh）'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initContentChart1Copy () {
      const myChart = this.echarts.init(document.querySelector('.big-chart'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 30,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#03CDFF'
            }, {
              offset: 1, color: '#008AFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0,
            formatter: value => value + '月' // 文本格式化
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          interval: 10,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          }
        },
        series: [
          {
            name: '发电',
            barWidth: 15,
            data: [31, 58, 20, 78, 39, 20, 62, 42, 31, 50, 31, 41],
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + '（万kwh）'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initContentChart2 () {
      const myChart = this.echarts.init(document.getElementById('content-chart2'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 30,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#03CDFF'
            }, {
              offset: 1, color: '#008AFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0,
            formatter: value => value + '月' // 文本格式化
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          interval: 10,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          }
        },
        series: [
          {
            name: '发电',
            barWidth: 15,
            data: [31, 58, 20, 78, 39, 20, 62, 42, 31, 50, 31, 41],
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + '（万kwh）'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initContentChart2Copy () {
      const myChart = this.echarts.init(document.querySelector('.big-chart'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 30,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#03CDFF'
            }, {
              offset: 1, color: '#008AFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0,
            formatter: value => value + '月' // 文本格式化
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          interval: 10,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          }
        },
        series: [
          {
            name: '发电',
            barWidth: 15,
            data: [31, 58, 20, 78, 39, 20, 62, 42, 31, 50, 31, 41],
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + '（万kwh）'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initContentChart3 () {
      const myChart = this.echarts.init(document.getElementById('content-chart3'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 30,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#03CDFF'
            }, {
              offset: 1, color: '#008AFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0,
            formatter: value => value + '月' // 文本格式化
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          interval: 10,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          }
        },
        series: [
          {
            name: '发电',
            barWidth: 15,
            data: [31, 58, 20, 78, 39, 20, 62, 42, 31, 50, 31, 41],
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + '（万kwh）'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initContentChart3Copy () {
      const myChart = this.echarts.init(document.querySelector('.big-chart'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 30,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#03CDFF'
            }, {
              offset: 1, color: '#008AFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0,
            formatter: value => value + '月' // 文本格式化
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          interval: 10,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          }
        },
        series: [
          {
            name: '发电',
            barWidth: 15,
            data: [31, 58, 20, 78, 39, 20, 62, 42, 31, 50, 31, 41],
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + '（万kwh）'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initContentChart4 () {
      const myChart = this.echarts.init(document.getElementById('content-chart4'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 30,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#03CDFF'
            }, {
              offset: 1, color: '#008AFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0,
            formatter: value => value + '月' // 文本格式化
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          interval: 10,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          }
        },
        series: [
          {
            name: '发电',
            barWidth: 15,
            data: [31, 58, 20, 78, 39, 20, 62, 42, 31, 50, 31, 41],
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + '（万kwh）'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initContentChart4Copy () {
      const myChart = this.echarts.init(document.querySelector('.big-chart'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 30,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#03CDFF'
            }, {
              offset: 1, color: '#008AFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0,
            formatter: value => value + '月' // 文本格式化
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          interval: 10,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          }
        },
        series: [
          {
            name: '发电',
            barWidth: 15,
            data: [31, 58, 20, 78, 39, 20, 62, 42, 31, 50, 31, 41],
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + '（万kwh）'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.benefit-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px 10px 10px;
  .title {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    padding-left: 20px;
    color: #e8eff6;
    font-size: 18px;
    background: url("~@/assets/images/operate/title_bg.png") no-repeat center
      bottom / 100% 100%;
    .txt {
      display: flex;
      align-items: center;
    }
  }
  .panel-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
  }
}
.water-benefit {
  display: flex;
  position: relative;
  width: 1920px;
  height: 866px;
  padding: 0 10px 0;
  .left {
    width: 626px;
    margin-right: 10px;
    background-color: #0a2c5b;
    .box {
      display: flex;
      align-items: center;
      padding-left: 80px;
      width: 586px;
      height: 50px;
      color: #fff;
      font-size: 14px;
      background: url("~@/assets/images/operate/icon4.png") no-repeat top center /
        100% 100%;
      margin-bottom: 3px;
      span {
        margin-right: 110px;
      }
      p {
        span {
          color: #60fff6;
          font-size: 20px;
          margin-right: 5px;
        }
      }
    }
    .box:first-child {
      margin-top: 20px;
    }
    .box:nth-child(2),
    .box:nth-child(3),
    .box:nth-child(4),
    .box:nth-child(5) {
      padding-left: 95px;
      span {
        margin-right: 125px;
      }
      p span {
        margin-right: 5px;
      }
    }
    .chart-box {
      position: relative;
      width: 586px;
      height: 504px;
      margin-top: 20px;
      background-color: rgba(96, 255, 246, 0.1);
      #chart1 {
        width: 100%;
        height: 100%;
      }
      .flag {
        display: flex;
        align-items: center;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 150px;
        height: 40px;
        padding-left: 22px;
        background-color: rgba(96, 255, 246, 0.2);
        span {
          margin-right: 20px;
          color: #fff;
          font-size: 14px;
        }
        .icon {
          width: 12px;
          height: 18px;
          margin-right: 7px;
          background: url("~@/assets/images/operate/top.png") no-repeat top
            center / 130% 100%;
        }
        p {
          color: #fff;
          font-size: 12px;
          span {
            margin-right: 10px;
            color: #fff391;
            font-size: 20px;
          }
        }
      }
    }
  }
  .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    flex: 1;
    .content-box {
      width: 627px;
      height: 428px;
      background-color: #0a2c5b;
    }
    .content-box:nth-child(1) {
      .fr-box {
        display: flex;
        width: 100%;
        margin-top: 10px;
        justify-content: space-between;
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;
          height: 70px;
          margin-right: 5px;
          background: url("~@/assets/images/operate/icon1.png") no-repeat top
            center / 100% 100%;
          span {
            margin: 8px 0 20px;
            color: #fff;
            font-size: 14px;
          }
          p {
            color: #fff;
            font-size: 12px;
            span {
              margin-right: 5px;
              color: #ffba00;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }
        .box1 {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
          background-color: #246c8a;
          p {
            margin-right: 5px;
            color: #fff;
            span {
              margin-right: 5px;
              color: #fff391;
              font-size: 33px;
            }
          }
          .s-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 20px;
            margin-top: 12px;
            border-radius: 3px;
            background-color: rgba(3, 35, 79, 0.5);
            color: #fff;
            font-size: 14px;
            .icon {
              width: 8px;
              height: 13px;
              margin-left: 5px;
              background: url("~@/assets/images/operate/top.png") no-repeat top
                center / 130% 100%;
            }
          }
        }
      }
      #content-chart1 {
        width: 100%;
        flex: 1;
        margin-top: 10px;
      }
    }
    .content-box:nth-child(2) {
      .fr-box {
        display: flex;
        width: 100%;
        margin-top: 10px;
        justify-content: space-between;
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;
          height: 70px;
          margin-right: 10px;
          background: url("~@/assets/images/operate/icon1.png") no-repeat top
            center / 100% 100%;
          span {
            margin: 8px 0 20px;
            color: #fff;
            font-size: 14px;
          }
          p {
            color: #fff;
            font-size: 12px;
            span {
              margin-right: 5px;
              color: #ffba00;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }
        .box1 {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
          background-color: #246c8a;
          p {
            margin-right: 5px;
            color: #fff;
            span {
              margin-right: 5px;
              color: #fff391;
              font-size: 33px;
            }
          }
          .s-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 20px;
            margin-top: 12px;
            border-radius: 3px;
            background-color: rgba(3, 35, 79, 0.5);
            color: #fff;
            font-size: 14px;
            .icon {
              width: 8px;
              height: 13px;
              margin-left: 5px;
              background: url("~@/assets/images/operate/top.png") no-repeat top
                center / 130% 100%;
            }
          }
        }
      }
      #content-chart2 {
        width: 100%;
        flex: 1;
        margin-top: 10px;
      }
    }
    .content-box:nth-child(3) {
      .fr-box {
        display: flex;
        width: 100%;
        margin-top: 10px;
        justify-content: space-between;
        .box {
          display: flex;
          align-items: center;
          height: 50px;
          flex: 1;
          margin-right: 10px;
          background: url("~@/assets/images/operate/content34.png") no-repeat
            top center / 100% 100%;
          padding-left: 40px;
          color: #fff;
          span {
            margin-right: 57px;
            font-size: 14px;
          }
          p {
            font-size: 12px;
            span {
              margin-right: 10px;
              color: #ffba00;
              font-size: 20px;
            }
          }
        }
        .box1 {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
          background-color: #246c8a;
          p {
            margin-right: 35px;
            color: #fff;
            span {
              margin-right: 5px;
              color: #fff391;
              font-size: 33px;
            }
          }
          .s-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 20px;
            margin-top: 12px;
            border-radius: 3px;
            background-color: rgba(3, 35, 79, 0.5);
            color: #fff;
            font-size: 14px;
            .icon {
              width: 8px;
              height: 13px;
              margin-left: 5px;
              background: url("~@/assets/images/operate/top.png") no-repeat top
                center / 130% 100%;
            }
          }
        }
      }
      #content-chart3 {
        width: 100%;
        flex: 1;
        margin-top: 10px;
      }
    }
    .content-box:nth-child(4) {
      .fr-box {
        display: flex;
        width: 100%;
        margin-top: 10px;
        justify-content: space-between;
        .box {
          display: flex;
          align-items: center;
          height: 50px;
          flex: 1;
          margin-right: 10px;
          background: url("~@/assets/images/operate/content34.png") no-repeat
            top center / 100% 100%;
          padding-left: 40px;
          color: #fff;
          span {
            margin-right: 57px;
            font-size: 14px;
          }
          p {
            font-size: 12px;
            span {
              margin-right: 10px;
              color: #ffba00;
              font-size: 20px;
            }
          }
        }
        .box1 {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
          background-color: #246c8a;
          p {
            margin-right: 35px;
            color: #fff;
            span {
              margin-right: 5px;
              color: #fff391;
              font-size: 33px;
            }
          }
          .s-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 20px;
            margin-top: 12px;
            border-radius: 3px;
            background-color: rgba(3, 35, 79, 0.5);
            color: #fff;
            font-size: 14px;
            .icon {
              width: 8px;
              height: 13px;
              margin-left: 5px;
              background: url("~@/assets/images/operate/top.png") no-repeat top
                center / 130% 100%;
            }
          }
        }
      }
      #content-chart4 {
        width: 100%;
        flex: 1;
        margin-top: 10px;
      }
    }
  }
}
.dialog1,
.dialog2 {
  .fr-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
    .box {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      height: 90px;
      margin-right: 20px;
      background: url("~@/assets/images/operate/icon1.png") no-repeat top center /
        100% 100%;
      span {
        margin: 12px 0 30px;
        color: #fff;
        font-size: 14px;
      }
      p {
        color: #fff;
        font-size: 12px;
        span {
          margin-right: 5px;
          color: #ffba00;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }
    .box1 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      background-color: #246c8a;
      p {
        margin-right: 20px;
        color: #fff;
        span {
          margin-right: 5px;
          color: #fff391;
          font-size: 33px;
        }
      }
      .s-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 20px;
        margin-top: 12px;
        border-radius: 3px;
        background-color: rgba(3, 35, 79, 0.5);
        color: #fff;
        font-size: 14px;
        .icon {
          width: 8px;
          height: 13px;
          margin-left: 5px;
          background: url("~@/assets/images/operate/top.png") no-repeat top
            center / 130% 100%;
        }
      }
    }
  }
  .big-chart {
    width: 100%;
    flex: 1;
    margin-top: 10px;
  }
}
.dialog3,
.dialog4 {
  .fr-box {
    display: flex;
    width: 100%;
    margin-top: 10px;
    justify-content: space-between;
    .box {
      display: flex;
      align-items: center;
      height: 50px;
      flex: 1;
      margin-right: 10px;
      background: url("~@/assets/images/operate/content34.png") no-repeat top
        center / 100% 100%;
      color: #fff;
      span {
        margin-left: 95px;
        margin-right: 50px;
        font-size: 14px;
      }
      p {
        font-size: 12px;
        span {
          margin-right: 10px;
          color: #ffba00;
          font-size: 20px;
        }
      }
    }
    .box1 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      background-color: #246c8a;
      p {
        margin-right: 35px;
        color: #fff;
        span {
          margin-right: 5px;
          color: #fff391;
          font-size: 33px;
        }
      }
      .s-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 20px;
        margin-top: 12px;
        border-radius: 3px;
        background-color: rgba(3, 35, 79, 0.5);
        color: #fff;
        font-size: 14px;
        .icon {
          width: 8px;
          height: 13px;
          margin-left: 5px;
          background: url("~@/assets/images/operate/top.png") no-repeat top
            center / 130% 100%;
        }
      }
    }
  }
  .big-chart {
    width: 100%;
    flex: 1;
    margin-top: 10px;
  }
}
</style>
