ggfwjsc/src/view/echarts_hygiene/eP3.vue

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

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

const chart = ref(); // 创建DOM引用
const data1 = [
  "龙游县人民医院",
  "龙游县中医院",
  "龙游县横山镇中心卫生院",
  "龙游县溪水镇中心卫生院",
  "龙游县龙游街道社区卫生服务中心",
  "龙游县塔石镇中心卫生院",
  "龙游县罗家县中心卫生院",
];
let option = {
  tooltip: {
    trigger: "axis",
    // formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
  },

  grid: {
    top: "10%",
    left: "1%",
    right: "10%",
    bottom: "0%",
    containLabel: true,
  },
  calculable: true,
  xAxis: [
    {
      type: "category",
      axisLabel: {
        formatter: function (params) {
          var str = ""; // 最终拼接成的字符串
          var paramsLen = params.length; // 获取每项文字的个数
          var len = 5; // 每行能显示的字的个数（根据实际情况自己设置）
          var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
          if (paramsLen > len) {
            //大于设定的len就换行，不大于就不变化
            for (var i = 0; i < rowNumber; i++) {
              var temp = ""; // 表示每一次截取的字符串
              var start = i * len; // 开始截取的位置
              var end = start + len; // 结束截取的位置
              if (i == rowNumber - 1) {
                // 最后一次不换行
                temp = params.substring(start, paramsLen);
              } else {
                // 每一次拼接字符串并换行
                temp = params.substring(start, end) + "\n";
              }
              str += temp; // 最终拼成的字符串
            }
          } else {
            // 给新的字符串赋值
            str = params;
          }
          return str; //返回字符串
        },
        textStyle: {
          color: "#ffffff",
        },
        rotate: 30,
      },
      data: data1,
    },
  ],

  yAxis: [
    {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(226, 226, 226, 0.3)",
          width: 1,
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "#ffffff",
        },
      },
    },
  ],
  series: [
    {
      name: "职工医疗保险发放人次",
      type: "bar",
      data: [2.0, 4.9, 7.0, 23.2, 25.6,7,8],
      barWidth: 20,
      itemStyle: {
        normal: {
          color: function (params) {
            let colorList = [
              ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
              ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
              ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
            ];
            if (params.dataIndex == 0) {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, //y->y2
                [
                  {
                    offset: 0,
                    color: "rgba(23, 237, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(23, 237, 255, 0.20)",
                  },
                ],
                false
              );
            } else if (params.dataIndex % 3 == 0) {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, //y->y2
                [
                  {
                    offset: 0,
                    color: "rgba(23, 237, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(23, 237, 255, 0.20)",
                  },
                ],
                false
              );
            } else if (params.dataIndex % 2 == 0) {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, //y->y2
                [
                  {
                    offset: 0,
                    color: "rgba(255, 243, 119, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 242, 142, 0.20)",
                  },
                ],
                false
              );
            } else {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, //y->y2
                [
                  {
                    offset: 0,
                    color: "rgba(142, 187, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(142, 187, 255, 0.20)",
                  },
                ],
                false
              );
            }
          },
        },
      },
    },
  ],
};

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

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

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

<style scoped>
</style>