Echarts大屏-------数据图

效果图如下：

步骤分解： 

A、引入

import * as echarts from 'echarts';

import { ECharts } from 'echarts';

B、 Html

<template>
  <div style="padding: 20px">
    <!-- loading加载 -->
    <n-spin v-if="loading" size="large" />
    <!-- echars图  -->
    <div id="getDemoId" style="z-index: 9999"></div>
    <img src="蜘蛛网背景图" alt="" />
    <ul>
      <li>
        <n-tooltip trigger="hover" placement="left">
          <template #trigger>
            <div></div>
          </template>
          <template v-if="data.demo.length > 0">
            <div
              v-for="(item, index) in data.demo"
              :key="index"
              style="display: flex; justify-content: space-between"
            >
              <span>{{ item.demoValue }}:</span>
              <span>第{{ item.demoRank }}名</span>
            </div>
          </template>
          <template v-else> 暂无数据 </template>
        </n-tooltip>
      </li>
    </ul>
  </div>
</template>

C：CSS

<style lang="scss" scoped>
img {
  position: absolute;
  top: 40px;
  left: 245px;
  width: 410px;
}

ul {
  position: absolute;
  top: 21px;
  left: 194px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 530px;
  height: 552px;

  li {
    width: 170px;
    height: 192px;
  }
}
</style>

D、TS

const data = ref({
  demo: {}, //管理能力指标
});
var myChart: ECharts;
var option = {
  color: [config['colorffffff10']],
  radar: {
    indicator: [
      {
        name: '一',
        max: 2,
        textStyle: { fontSize: 20 },
      },
      {
        name: '二',
        max: 2,
      },
      {
        name: '三',
        max: 2,
      },
      {
        name: '四',
        max: 2,
      },
      {
        name: '五',
        max: 2,
      },
      {
        name: '六',
        max: 2,
      },
    ],
    name: {
      padding: [24, 40, 24, 40],
      textStyle: {
        color: config['colorffffff'],
        fontSize: 16,
      },
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    splitArea: {
      show: false,
    },
    label: {
      show: false,
    },
  },

  series: [
    {
      name: '',
      type: 'radar',
      data: [
        {
          value: [600, 600, 1000, 600, 800, 800],
          name: '',
          areaStyle: {
            // 单项区域填充样式
            color: {
              type: 'linear',
              x: 1, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#39CDFD',
                },

                {
                  offset: 1,
                  color: '#0B4DC761',
                },
              ],
            },
          },
          itemStyle: {
            borderColor: '#00DBFF',
            borderWidth: 2,
          },
        },
      ],
    },
  ],
};

const initEchart = () => {
  myChart = echarts.init(document.getElementById('getDemoId'));
  myChart.setOption(option);
};

const loading = ref(false);

调用接口获取数据

const getData = () => {
  loading.value = true;
  XXX({
   根据月份：接口调用
    month: month,
  }).then(({ success, message, object }) => {
    loading.value = false;
    if (success) {
      option.series[0].data[0].value = [
        object.demo,
      ];
      option.radar.indicator.forEach((item) => {
        item.max = object.totalDemoNum;
      });
      initEchart();
    } else {
      error(message);
    }
  });
};

生命周期中数据调用&&图表销毁

onMounted(() => {
  getData();
});

watch(
  () => month,
  () => {
    getData();
  },
  {
    deep: true,
  },
);

onUnmounted(() => {
  myChart.dispose();
});

完成！！

*★,°*:.☆(￣▽￣)/$:*.°★* 。