永洪社区

标题: 自定义绘图Echarts饼图问题 [打印本页]

作者: 小小白丶 时间: 2022-5-23 11:27
标题: 自定义绘图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那该怎么配置数据列，我现在这样写只配置了度量列，没有维度信息。

作者: odinge 时间: 2022-5-23 11:27
需要对绑定的数据进行映射，如把对应的column变成需要的key值

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

复制代码

作者: 永洪tech-cc 时间: 2022-5-23 11:53
您好，这边正在帮您处理中，麻烦您稍微等下，解决后给您答复。

作者: odinge 时间: 2022-5-23 12:39
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:"王五"}
   */
}]
};

作者: odinge 时间: 2022-5-23 12:41
本帖最后由 odinge 于 2022-5-23 12:46 编辑

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

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

复制代码

作者: 小小白丶 时间: 2022-5-23 13:31

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

好了，谢谢

欢迎光临永洪社区 (https://club.yonghongtech.com/)