sgxt_web/src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue

<template>
  <div id="circlecz" class="circlecz" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch, defineProps } from "vue";

onMounted(() => {
  lineChartFn();
});
function lineChartFn() {
  var chartDom = document.getElementById("circlecz");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    legend: {
      type: "plain",
      show: true,
      right: 0,
      textStyle: { color: "#ddd" },
      data: [
        { name: "总数" },
        { name: "已处置" }
      ]
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      top: "25%",
      right: "10%",
      left: "10%",
      bottom: "22%"
    },
    xAxis: [
      {
        type: "category",
        data: ['巴宜区','工布江达县','波密县','朗县','墨脱县','察隅县','米林县'],
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)"
          }
        },
        axisLabel: {
          margin: 10,
          color: "#e2e9ff",
          textStyle: {
            fontSize: 14
          }
        }
      }
    ],
    yAxis: [
      {
        // name: '单位：万元',
        axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff"
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(255,255,255,1)"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)"
          }
        }
      }
    ],
    series: [
      {
        name: "总数",
        type: "bar",
        data: [10,20,30,40,50,60,70],
        barWidth: "10px",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0,0,0,1,[
              {
                  offset: 0,
                  color: "rgba(0,244,255,1)" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,77,167,1)" // 100% 处的颜色
                }
              ],
              false
            ),
          }
        },
        markPoint: {
          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
          symbolSize: [10, 4], // 设置扁圆的宽和高
          itemStyle: {
            color: '#087df9' // 圆盘颜色
          },
          data: [10,20,30,40,50,60,70].map((obj, index) => ({
            xAxis: index, // 对应柱子的横坐标
            yAxis: obj + 0 // 柱子的值加上一些偏移量
          }))
        },
      },
      {
        name: "已处置",
        type: "bar",
        data: [10,20,30,40,50,60,70],
        barWidth: "10px",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0,0,0,1,
              [
                {
                  offset: 0,
                  color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
                }
              ],
              false
            ),
          }
        },
        markPoint: {
          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
          symbolSize: [10, 4], // 设置扁圆的宽和高
          itemStyle: {
            color: '#00FFFF' // 圆盘颜色
          },
          data: [10,20,30,40,50,60,70].map((obj, index) => ({
            xAxis: index, // 对应柱子的横坐标
            yAxis: obj + 0 // 柱子的值加上一些偏移量
          }))
        },
      },
    ]
  };

  option && myChart.setOption(option);
  window.onresize = function () {
    myChart.resize();
  };
  document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
}
onMounted(() => {
  lineChartFn();
});
</script>

<style lang="scss" scoped>
.circlecz {
  height: 100%;
  background: rgba(0,29,75,0.6);
  border-radius: 0 0 4px 4px;
}
</style>