vue earcharts饼图调节大小和位置

在 Vue 中使用 ECharts 构建饼图时，调整图表的大小和位置通常涉及以下几个步骤：

1. **引入依赖**：
首先需要安装 ECharts 的 Vue 组件库，可以使用 `vue-echarts` 或者直接从 ECharts 官方提供的 Vue 模块。

npm install vue-echarts echarts --save

2. **在组件中使用 ECharts**：
在 Vue 文件中，导入 ECharts，并通过 `v-charts` 组件绑定数据并设置配置选项，包括饼图尺寸和位置。

<template>
  <div id="chart-container" style="width: 500px; height: 400px;"></div>
</template>

<script>
import { ECharts } from 'vue-echarts'

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      chartData: ... // 饼图的数据配置
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const myChart = this.$echarts.init(document.getElementById('chart-container'))
      myChart.setOption({
        tooltip: {},
        series: [{
          type: 'pie', // 饼图类型
          radius: '55%', // 设置半径，调整大小
          center: ['50%', '60%'], // 设置中心位置
          data: this.chartData,
        }]
      })
    },
  }
}
</script>

在上面的示例中，`radius` 属性用于控制饼图的直径百分比，`center` 则设置饼图中心点的坐标。你可以根据实际需求调整这两个值。