【echarts 图表叠加自定义背景图片】

效果图:

代码:

<template>
  <div class="chart-container">
    <!-- 叠加的背景图片 -->
    <div class="background-image"></div>
    <div class="background-image1"></div>
    <div class="background-image2"></div>
    <div class="background-image3"></div>

    <!-- echarts 图表 -->
    <div class="echarts-chart" ref="myEchartsTop"></div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
const router = useRouter();
const myEchartsTop = ref<HTMLInputElement | null>(null);
let chartTop: echarts.ECharts;

const loadData = async val => {
  let params = {};
  if (val) {
    params = { search_EQ_C_id: val };
  } else {
  }
  initChart();
};

const statuSumData = ref([
  { value: 60, name: '已完成', itemStyle: { color: '#36e386' } },
  { value: 25, name: '未完成', itemStyle: { color: '#fbd153' } },
  { value: 15, name: '超时', itemStyle: { color: '#e53153' } }
]);

const initChart = () => {
  if (!myEchartsTop.value) {
    return;
  }
  chartTop = echarts.init(myEchartsTop.value);
  const option: echarts.EChartsOption = {
    title: [
      {
        text: `巡更总数 ${statuSumData.value.reduce((acc, cur) => acc + cur.value, 0)}`,
        //subtext: '设备总数',
        left: '14%', // 将 x 改成 left
        top: 'center', // 将 y 改成 top
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: '#fff'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      top: 'middle',
      right: '5%',
      orient: 'vertical',
      itemGap: 50, // 设置图例项之间的间隔为20像素
      icon: 'circle',
      textStyle: {
        color: '#fff', // 设置图例文字颜色为白色
        fontSize: '23px'
      },
      formatter: function (name) {
        const seriesData = statuSumData.value;
        const total = seriesData.reduce((acc, cur) => acc + cur.value, 0);
        const dataIndex = seriesData.findIndex(item => item.name === name);
        const value = seriesData[dataIndex].value;
        // 添加条件判断，避免除法错误
        const percentage = total !== 0 ? ((value / total) * 100).toFixed(0) : 0;
        return `${name}:       ${percentage}%`;
      }
    },
    series: [
      {
        name: '设备类型',
        type: 'pie',
        center: ['23%', '50%'], // 设置图表位置
        radius: ['52%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: statuSumData.value
      }
    ]
  };
  chartTop.setOption(option);
  window.onresize = function () {
    chartTop.resize();
  };
};

defineExpose({
  loadData
});

onMounted(async () => {
  await loadData();
});
</script>
<style lang="less" scoped>
.chart-container {
  position: relative;
}

.background-image {
  position: absolute;
  top: 9.5%;
  left: 3%;
  width: 81%;
  height: 81%;
  background: url('@/assets/images/lowerCamelCase.png') no-repeat 0 0 / 50% 100%; /* 替换为你的背景图片路径 */
  opacity: 1; /* 根据需要调整透明度 */
}

.background-image1 {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 100%;
  height: 24%;
  background: url('@/assets/images/lowerCamelCase2.png') no-repeat 0 0 / 50% 100%; /* 替换为你的背景图片路径 */
  opacity: 0.7; /* 根据需要调整透明度 */
}

.background-image2 {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 100%;
  height: 24%;
  background: url('@/assets/images/lowerCamelCase2.png') no-repeat 0 0 / 50% 100%; /* 替换为你的背景图片路径 */
  opacity: 0.7; /* 根据需要调整透明度 */
}

.background-image3 {
  position: absolute;
  top: 68%;
  left: 50%;
  width: 100%;
  height: 24%;
  background: url('@/assets/images/lowerCamelCase2.png') no-repeat 0 0 / 50% 100%; /* 替换为你的背景图片路径 */
  opacity: 0.8; /* 根据需要调整透明度 */
}

.echarts-chart {
  width: 100%;
  height: 250px; /* 调整为适当的高度 */
}
</style>