ggfwjsc/src/view/echarts_education/pie.vue

<template>
  <div
    ref="chart"
    style="width: 50%; height: calc(100% - 46px); min-height: 205px"
  ></div>
</template>

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

const chart = ref(); // 创建DOM引用

let option = {
  tooltip: {
    trigger: "axis",
    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1}<br />{a2}:{c2} ",
  },
  legend: {
    top: "8%",
    right: "11%",
    textStyle: {
      fontSize: 12,
      color: "#ccc",
    },
  },
  grid: {
    left: "1%",
    right: "10%",
    bottom: "0%",
    containLabel: true,
  },
  calculable: true,
  xAxis: [
    {
      type: "category",
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        show: false, // 设置轴刻度不显示
      },
      data: ["小学", "初中", "高中"],
    },
    {
      axisTick: false,
      type: "category",
      data: ["小学", "初中", "高中"],
      axisLabel: {
        show: false,
      },
    },
  ],

  yAxis: [
    {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(226, 226, 226, 0.3)",
          width: 1,
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "#ccc",
        },
      },
    },
    {
      type: "value",
      min: 0,
      max: 100,
      splitLine: {
        show: false,
        lineStyle: {
          type: "solid",
          color: "rgb(221, 242, 255,0.1)",
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          type: "dotted",
        },
      },
      axisLabel: {
        show: false,
        fontSize: 14,
        fontFamily: "MicrosoftYaHei",
        color: "#DEF1FF",
        lineHeight: 19,
      },
    },
  ],
  series: [
    {
      name: "城市",
      type: "bar",
      data: [2.0, 4.9, 7.0],
      barWidth: "18%",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(142, 187, 255, 1)",
          },
          {
            offset: 1,
            color: "rgba(142, 187, 255, 0.20)",
          },
        ]),
      },
    },
    {
      name: "县镇",
      type: "bar",
      data: [2.6, 5.9, 9.0],
      barWidth: "18%",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(23, 136, 255, 1)",
          },
          {
            offset: 1,
            color: "rgba(23, 136, 255, 0.20)",
          },
        ]),
      },
    },
    {
      name: "农村",
      type: "bar",
      data: [2.6, 5.9, 9.0],
      barWidth: "18%",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(23, 237, 255, 1)",
          },
          {
            offset: 1,
            color: "rgba(23, 237, 255, 0.20)",
          },
        ]),
      },
    },
    {
      type: "bar",
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle: {
        color: "rgba(221, 242, 255, 0.1)",
      },
      data: ["2019", "2020", "2021"].map(() => 100),
      barWidth: 50,
    },
  ],
};

// 使用生命钩子
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>