ggfwjsc/src/view/echarts_hygiene/eP2.vue

<template>
  <div
    ref="chart"
    style="width: 100%; height: 350px"
  ></div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";

const chart = ref(null); // 创建DOM引用
const data1 = [
  "龙游县人民医院",
  "龙游县中医院",
  "龙游县横山镇中心卫生院",
  "龙游县溪水镇中心卫生院",
  "龙游县龙游街道社区卫生服务中心",
  "龙游县塔石镇中心卫生院",
  "龙游县罗家县中心卫生院",
  "龙游县社阳乡卫生院",
  "龙游妇幼保健院",
  "龙游妇幼保健院",
  "龙游妇幼保健院",
  "龙游妇幼保健院",
  "龙游妇幼保健院",
];
const data2 = [
  "200",
  "200",
  "120",
  "200",
  "420",
  "100",
  "100",
  "100",
  "120",
  "333",
];

let option = {
  grid: {
    left: "0%",
    right: "10%",
    bottom: "1%",
    top: "6%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis", //axis , item
  },
  // backgroundColor: '#002D54',
  xAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        color: "rgba(77, 128, 254, 0.2)",
        type: "line",
      },
    },
    axisTick: {
      show: true,
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      //  改变x轴字体颜色和大小
      show: false,
      textStyle: {
        color: "#00c0fa",
        fontSize: 16,
      },
    },
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ccc",
          fontSize: "11",
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: data1,
    },
  ],
  series: [
    {
      name: "道路指数",
      type: "bar",
      zlevel: 1,
      label: {
        show: true,
        position: "right", // 位置
        color: "#ccc",
        fontSize: 12,
        distance: 10, // 距离
        // formatter: '{c}%' // 这里是数据展示的时候显示的数据
      }, // 柱子上方的数值
      itemStyle: {
        normal: {
          borderWidth: 1,
        //   borderColor: "rgba(0, 183, 255, 1)",
          borderRadius: [0, 0, 50, 0], //圆角边框
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "rgba(0, 183, 255, 0)" },
            { offset: 1, color: "rgba(0, 183, 255, 1)" },
          ]),
        },
      },
      barWidth: 10,
      data: data2,
    },
  ],
};

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  // var myChart = echarts.init(document.getElementById('main'));
  // Vue3中： 需要引入
  var myChart = echarts.init(chart.value);

  // init(); // vue3.2没有this
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  myChart.on("scroll", function (event) {
    // 根据滚动位置动态计算bargap
    var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
    myChart.setOption({
      yAxis: {
        axisLabel: {
          bargap: bargap,
        },
      },
    });
  });

  // 单图表响应式: 跟随浏览器大小改变
  //   window.addEventListener("resize", () => {
  //     myChart.resize();
  //   });
});
</script>

<style scoped></style>