Vue統計グラフへの円グラフとレーダーチャート機能の実装

<!-- 引入ECharts插件 -->
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>

<template>
  <div id="pieChart" style="width: 400px; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    // 初始化饼图实例
    const pieChart = echarts.init(document.getElementById('pieChart'));

    // 饼图数据
    const data = [
      { name: '数据1', value: 50 },
      { name: '数据2', value: 30 },
      { name: '数据3', value: 20 },
    ];

    // 饼图配置项
    const options = {
      title: {
        text: '饼图示例',
        x: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      series: [
        {
          name: '饼图数据',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    // 渲染饼图
    pieChart.setOption(options);
  },
};
</script>

<template>
  <div id="radarChart" style="width: 400px; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    // 初始化雷达图实例
    const radarChart = echarts.init(document.getElementById('radarChart'));

    // 雷达图数据
    const data = [
      { value: [90, 80, 70, 60, 50], name: '数据1' },
      { value: [80, 70, 60, 50, 40], name: '数据2' },
      { value: [70, 60, 50, 40, 30], name: '数据3' },
    ];

    // 雷达图配置项
    const options = {
      title: {
        text: '雷达图示例',
        x: 'center',
      },
      tooltip: {},
      radar: {
        indicator: [
          { name: '维度1', max: 100 },
          { name: '维度2', max: 100 },
          { name: '维度3', max: 100 },
          { name: '维度4', max: 100 },
          { name: '维度5', max: 100 },
        ],
      },
      series: [
        {
          name: '雷达图数据',
          type: 'radar',
          data: data,
        },
      ],
    };

    // 渲染雷达图
    radarChart.setOption(options);
  },
};
</script>