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

原创

于 2024-01-03 16:35:14 发布 · 1.3k 阅读

收录于

当前文章被以下社区和专栏收录：

文章介绍了如何在Vue应用中使用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: '已完成',