LiaoningChanpinHuaxiang/src/views/bigpage/bigcomponents/informationBox.vue

<template>
  <div class="box">
    <div class="top-box">
      <div class="topbox-item">
        <div class="topBOxitem">
          <div class="topBOxitem-top"><span>12</span> <span>次</span></div>
          <div class="topBOxitem-bottom">国家检测次数</div>
        </div>
      </div>
      <div class="topbox-item">
        <div class="topBOxitem">
          <el-tooltip
            class="item"
            effect="dark"
            content="1221111121212121"
            placement="top-start"
          >
            <div class="topBOxitem-top">
              <span>1221111121212121</span> <span>次</span>
            </div>
          </el-tooltip>

          <div class="topBOxitem-bottom">省级抽检次数</div>
        </div>
      </div>
      <div class="topbox-item">
        <div class="topBOxitem">
          <div class="topBOxitem-top"><span>12%</span></div>

          <div class="topBOxitem-bottom">抽检合格率</div>
        </div>
      </div>
    </div>
    <div class="bottom-content">
      <div class="left-echart" ref="left-echart"></div>
      <div class="right-echart" ref="right-echart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "informationBox",
  components: {},
  data() {
    return {
      topList: [
        {
          order: "12",
          jcaddress: "国家检测次数",
        },
        {
          order: "31",
          jcaddress: "省级检测次数",
        },
        {
          order: "14",
          jcaddress: "抽检合格率",
        },
      ],

      option1: {},
      // echarts
      myChart1: {},
      option2: {},
      // echarts
      myChart2: {},
      //==============

    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      let chartDom = this.$refs["left-echart"];
      this.myChart1 = echarts.init(chartDom);
      this.initEcharts();

      let chartDom2 = this.$refs["right-echart"];
      this.myChart2 = echarts.init(chartDom2);
      this.initEcharts2();
    });
  },
  methods: {
    initEcharts() {
      this.option1 = {
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b}: {c} ({d}%)", // 鼠标悬浮在各分区时的提示内容
          formatter: function (params) {
            return (
              '<div style="line-height: 1;">' +
              params.marker +
              params.name +
              ": " +
              params.value +
              " (" +
              params.percent +
              "%)</div>"
            );
          },
          extraCssText:
            "padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff;", // 设置提示框的样式
        },
        legend: {
          bottom: 0,
          left: "center",
          data: ["生产抽样环节", "流通环节抽样"],
          textStyle: {
            color: "auto",
            fontSize: 14,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "40%"], // 调整 y 值为 '40%'，使饼图向上位移
            labelLine: {
              normal: {
                length: 15, // 指示线宽度
                position: "outer", // 将标签线放在扇区外部转折点
                lineStyle: function (params) {
                  // 根据数据项的颜色动态设置文字颜色
                  return {
                    color: params.color,
                    fontSize: 14,
                  };
                },
              },
            },
            label: {
              normal: {
                // 各分区的提示内容
                // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
                formatter: function (params) {
                  return params.percent + "%";
                },
                textStyle: {
                  color: "auto",
                  fontSize: 14,
                },
              },
            },
            data: [
              // 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
              // 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
              {
                value: 39,
                name: "生产抽样环节",
                percent: "39",
                itemStyle: { color: "#007EFF" },
              },
              {
                value: 21,
                name: "流通环节抽样",
                percent: "21",
                itemStyle: { color: "#2CD8EC" },
              },
            ],
          },
        ],
      };

      this.myChart1.setOption(this.option1);
    },
    initEcharts2() {
      this.option2 = {
        backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
        tooltip: {},
        grid: {
          top: "8%",
          left: "10%",
          right: "10%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,

            axisLine: {
              show: false, // 隐藏 x 轴线
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#B7D4F5",
                fontSize: 12,
                margin: 0,
              },
            },
            axisTick: {
              show: false,
            },
            data: ["辽宁", "黑龙江", "北京", "上海", "深圳", "苏州"],
          },
        ],
        yAxis: [
          {
            show: true,
            type: "value",
            name: "123",
            splitLine: {
              show: true, // 显示背后的横线
              lineStyle: {
                color: "#233e64",
                type: "dashed", // 可以设置为实线或虚线
              },
            },
            axisLine: {
              show: false, // 隐藏 y 轴线
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#6a9cd5",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(33,181,225,1)", // 起始颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0,0.1)", // 结束颜色
                    },
                  ],
                },
                // label: {
                //     show: true,
                //     position: 'top'
                // }
              },
            },
            data: [12, 15, 17, 20, 25, 26],
          },
        ],
      };
      this.myChart2.setOption(this.option2);
    },
  },
  computed: {},
};
</script>
<style scoped lang='scss'>
.box {
}

.top-box {
  margin: 10px 0;
  height: 85px;
  width: 100%F;
  display: flex;
  justify-content: space-around;

  .topbox-item {
    width: 240px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-right: 30px;

    &:nth-of-type(1) {
      background: url("../../../assets/images/daping/jiance1.png");
      background-size: contain;
      background-repeat: no-repeat;

      .topBOxitem-top {
        :nth-of-type(1) {
          background: linear-gradient(0deg, #bf6e35 0%, #ffffff 100%);
        }
      }
    }

    &:nth-of-type(2) {
      background: url("../../../assets/images/daping/jiance2.png");
      background-size: contain;
      background-repeat: no-repeat;

      .topBOxitem-top {
        :nth-of-type(1) {
          background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
        }
      }
    }

    &:nth-of-type(3) {
      background: url("../../../assets/images/daping/jiance3.png");
      background-size: contain;
      background-repeat: no-repeat;

      .topBOxitem-top {
        :nth-of-type(1) {
          background: linear-gradient(0deg, #ffffff 0%, #37bea6 100%);
        }
      }
    }

    .topBOxitem {
      margin-top: -40px;

      .topBOxitem-top {
        display: flex;
        align-items: center;

        :nth-of-type(1) {
          display: block;
          max-width: 90px;
          white-space: nowrap;
          /* 不换行 */
          overflow: hidden;
          /* 溢出内容隐藏 */
          text-overflow: ellipsis;
          /* 显示省略号 */
          font-size: 34px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin: 0;
        }

        :nth-of-type(2) {
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
          opacity: 0.5;
        }
      }

      .topBOxitem-bottom {
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}

.bottom-content {
  height: 210px;
  display: flex;

  .left-echart {
    flex: 0.7;
  }

  .right-echart {
    flex: 1.3;
  }
}
</style>