在ECharts绘制饼图及环形图

Question

img(https://img-mid.csdnimg.cn/release/static/image/mid/ask/8ac2caf65a144cca856cc223a940fcd2.jpeg "#left")img

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

当然可以！我们可以通过ECharts库来创建一个简单的饼图和环形图示例。首先，你需要安装ECharts库，如果你还没有安装的话，可以使用npm或yarn进行安装。

npm install echarts --save

或者

yarn add echarts

接下来，我们将创建一个简单的饼图和环形图，并将数据填充到图表中。

饼图示例：

// 引入echarts库
import * as echarts from 'echarts';

// 初始化图表
let myChart = echarts.init(document.getElementById('myChart'));

// 设置图表配置项和数据
let option = {
  title: {
    text: '饼状图'
  },
  tooltip: {},
  legend: {
    data: ['A', 'B', 'C']
  },
  series: [
    {
      name: 'Series 1',
      type: 'pie',
      radius: '70%',
      center: ['50%', '60%'],
      data: [
        { value: 50, name: 'A' },
        { value: 30, name: 'B' },
        { value: 20, name: 'C' }
      ]
    }
  ]
};

// 绘制图表
myChart.setOption(option);

环形图示例：

// 引入echarts库
import * as echarts from 'echarts';

// 初始化图表
let myChart = echarts.init(document.getElementById('myChart'));

// 设置图表配置项和数据
let option = {
  title: {
    text: '环形图'
  },
  tooltip: {},
  animationDuration: 1000,
  animationEasing: 'elasticOut',
  animationDelay: 0,
  series: [
    {
      name: 'Series 1',
      type: 'arc',
      radius: '50%',
      startAngle: -Math.PI / 2,
      endAngle: Math.PI / 2,
      center: [0, 0],
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'inner'
          },
          areaColor: (params) => `rgba(255, 255, 255, ${params.data.value})`
        }
      },
      data: [
        { value: 50, name: 'A' },
        { value: 30, name: 'B' },
        { value: 20, name: 'C' }
      ]
    }
  ]
};

// 绘制图表
myChart.setOption(option);

以上代码会创建一个包含饼图和环形图的图表，其中饼图显示的是数值占比，而环形图则展示了各部分相对于整体的比例。可以根据具体需求调整数据和样式。