自定义绘图Echarts饼图问题

// 为保证正常绘图，代码格式与所选格式需保持一致;
// 请输入JS代码或前往官网复制示例代码;
// 复制完代码后，请先将代码中的数据列替换为绑定的数据列，绑定的数据列从上至下依次为column1、column2......，option部分请添加options.data以引用绑定列，chart绘制的DOM id会自动替换为变量$container

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '产品种类',
      type: 'pie',
      radius: ['40%', '70%',
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: options.column2  --此处应该怎么绑定数据列
      /*
      data:[
      {value:100,name:"张三"},
      {value:200,name:"李四"},
      {value:300,name:"王五"}

      */
    }
  
};


以上代码data那该怎么配置数据列，我现在这样写只配置了度量列，没有维度信息。

需要对绑定的数据进行映射，如把对应的column变成需要的key值

1. let chartData = options.data.map(i => ({
   
2. name: i.column1,
   
3. value: i.column2
   
4. }));

复制代码

您好，这边正在帮您处理中，麻烦您稍微等下，解决后给您答复。

let chartData = options.data.map(i => ({
  name:i.column1,
  value: i.column2
}));
option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '产品种类',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: chartData
      /*
      data:[
      {value:100,name:"张三"},
      {value:200,name:"李四"},
      {value:300,name:"王五"}
      */
    }]
};

需要对绑定的数据进行映射，如把对应的column变成需要的key值

1. let chartData = options.data.map(i => ({
   
2. name: i.column1,
   
3. value: i.column2
   
4. }));

复制代码

odinge 发表于 2022-5-23 12:50
需要对绑定的数据进行映射，如把对应的column变成需要的key值

好了，谢谢