tqv-data-operation-screen/src/pages/tqcDataVHome/component/rightBottomView.jsx

/*
 * @Author: dayan_hjm 碳排放
 * @Date: 2023-10-23 09:32:12 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2023-10-23 11:12:30
 */


import React, { useState, useEffect, Component } from "react";
import styles from "../style.less";
import { useHistory, useLocation, withRouter } from "react-router-dom";
import mod from '../mod';

@withRouter

class RightBottomView extends Component {
  // 构造函数，组件的实例创建时，最先执行
  constructor(props, context) {
    super(props, context);
    this.store = mod;
    this.state = {
    };
  }

  componentDidMount() {
    this.setData();
    this.setData2();
  }

  setData() {
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts8'));
      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
      var option = {

        grid: {
          left: '5%',
          top: '15%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          show: false,
        }],
        yAxis: [{
          axisTick: 'none',
          axisLine: 'none',
          axisLabel: {
            padding:[0,25,0,0],
            textStyle: {
              color: '#69FFDE',
              fontSize: '16',
              fontWeight: 700,
              fontFamily: 'DingTalkJinBuTi',
            }
          },
          data: ['2020', '2021', '2022']

        },
        {
          name: '单位：件',
          nameGap: '50',
          nameTextStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '16',
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },
          data: [],
        }],
        legend: {
          data: '碳排放强度',
          // right: 'center',
          // top: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: [88, 73, 34],
          label: {
            normal: {
              show: true,
              position: 'insideBottomLeft',
              formatter: function (param) {
                return param.value;
              },
              textStyle: {
                color: 'rgba(255,255,255,1)',
                fontSize: '15',
                padding:[5,0,0,5]
              }
            }
          },
          barWidth: 23,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
                { offset: 0.7, color: '#ffd01d94' },
                { offset: 1, color: '#ffd01d94' },
              ]),
              barBorderRadius: 15,
              borderColor: "rgba(255, 206, 0, 1)",
              borderWidth: 1

            },
          },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          yAxisIndex: 1,
          barGap: '-100%',
          data: [99.5, 99.5, 99.5],
          barWidth: 23,
          itemStyle: {
            normal: {
              color: '#ffffff24',
              barBorderRadius: 15,

            }
          },
          z: 1
        }]
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }, 200)
  }

  setData2() {
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts9'));
      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
      var option = {

        grid: {
          left: '0%',
          top: '15%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          show: false,
          inverse: true,
        }],
        yAxis: [{
          axisTick: 'none',
          axisLine: 'none',
          offset: '15',
          axisLine: {
            onZero: false
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,.6)',
              fontSize: '0',
            }
          },
          data: ['字段1', '字段2', '字段3']

        },
        {
          name: '单位：件',
          nameGap: '50',
          nameTextStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '16',
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },
          data: [],
        }],
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: [25, 55, 88],
          label: {
            normal: {
              show: true,
              position: 'insideRight',
              formatter: function (param) {
                return param.value;
              },
              textStyle: {
                color: 'rgba(255,255,255,1)',
                fontSize: '15',
                padding:[5,5,0,0]
              }
            }
          },
          barWidth: 23,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 1, color: '#69FFDE' },
                { offset: 0.75, color: '#69FFDE' },
                { offset: 0, color: 'rgb(83 211 183 / 15%)' },
              ]),
              barBorderRadius: 15,
              borderColor: "#69FFDE",
              borderWidth: 1
            }
          },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          yAxisIndex: 1,
          barGap: '-100%',
          data: [99.5, 99.5, 99.5],
          barWidth: 23,
          itemStyle: {
            normal: {
              color: '#ffffff24',
              barBorderRadius: 15,
            }
          },
          z: 1
        }]
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    }, 200)
  }

  render() {

    return (
      <div className={["eacharView cbRightBottomView"]}>
        <span className="right_b_tip1">碳排放强度</span>
        <div id="echarts9"></div>
        {/* <div className="fonts">

        </div> */}
        <span className="right_b_tip2">碳排放总量/万吨</span>
        <div id="echarts8"></div>
      </div>
    )
  }
}
export default RightBottomView;