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>