large_screen/src/components/newmain/item3/index.vue

<template>
  <div class="main">
    <div class="left">
      <pieChart :value="80" title="矿区总分" size="150px" />
    </div>
    <div class="right">
      <div ref="bar" style="height: 170px; width: 230px"></div>
    </div>
  </div>
</template>

<script>
import pieChart from "@/common/pieChart";
export default {
  components: {
    pieChart,
  },
  data() {
    return {
      myChart: null,
      xData: [],
      yData: [],
    };
  },
  mounted() {
    const option = {
      title: {
        text: "区域得分",
        // 标题内边距 上下边距 左右边距
        padding: [10, 0, 0, 8],
        textStyle: {
          color: "white",
          fontSize: 16,
        },
      },
      tooltip: {
        // show: false,
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        formatter: (params) => {
          let round =
            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4693EC;"></span>';
          return round + "得分:" + params[0].data;
        },
      },
      color: ["#FF6666", "#99CC66", "#FFFF66"],
      legend: {
        show: false,
        orient: "horizontal",
        left: "right",
        padding: [25, 20],
        icon: "rect",
        textStyle: {
          color: "#fff",
        },
        data: ["压力超限", "压力正常", "压力过低"],
      },
      grid: {
        top: "22%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          axisLabel: {
            color: "#fff",
            interval: 0,
            fontSize: 9,
          },
          axisLine: {
            show: true,
          },
          axisLine: {
            show: false
          },
          data: ["A区", "B区", "C区", "D区"],
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            color: "#fff",
            // fontSize: 11,
          },
          axisLine: {
            show: false
          },
          min: 0,
          max: 100,
          nameTextStyle: {
            color: "white",
            padding: [0, 0, 0, -30],
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dotted",
              color: "#fff",
            },
          },
        },
      ],
      series: [
        {
          name: "数据",
          type: "bar",
          barWidth: 12,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFE3",
                },
                {
                  offset: 1,
                  color: "#4693EC",
                },
              ]),
            },
          },
          // barWidth: "10",
          barCategoryGap: "5%",
          data: [70, 75, 88, 92],
        },
      ],
    };

    this.myChart = this.$echarts.init(this.$refs.bar);
    // 获取数据

    this.myChart.setOption(option);
  },
};
</script>

<style scoped lang="less">
.main {
  display: flex;
}
</style>