使用 dataset 属性而不是 series.data Apache Echarts 自定义系列中特定项目的项目样式

问题描述 投票:0回答:1

我有一个半圆环图。当我转动贴花时,下半部分变得可见。我可以隐藏下半部分的颜色,因为颜色起作用,并且我获得了项目详细信息。但贴花颜色只是一个字符串,相同的颜色将应用于所有贴花。但我想将下半部分的贴花颜色设置为“无”,并将其他饼图部分的默认颜色设置为“无”。

This I want to achieve using dataset property

const options = {
  dataset: [
    {
      source: [
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 1048, name: 'Search Engine'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'},
        {
          // make an record to fill the bottom 50%
          value: 1048 + 735 + 580 + 484 + 300,
          name: ''
        }
      ]
    }
  ],
  aria: {
        enabled: true,
        decal: {
        show: enabled
        }
  }
  series: [
    {
      name: 'Access From',
      type: 'pie',
      emphasis: {
        label: {
          overflow: 'break'
        }
      },
      radius: ['40%', '70%'],

      center: ['50%', '70%'],

      // adjust the start angle
      startAngle: 180,
      itemStyle: {
        color: (param) => {
          if (param.name === '') {
            return 'none';
          }
          if (param.dataIndex > 8) {
            const randomColor = Math.floor(Math.random() * 16777215).toString(
              16
            );
            return '#' + randomColor;
          } else {
            return halfDoughnutChartColors[param.dataIndex];
          }
        },
        borderRadius: 0,
        borderColor: '#000',
        borderWidth: 0
      },

      label: {
        overflow: 'truncate',
        formatter: (param) => {
          // correct the percentage
          return !!param.name ? `${param.name}: (${param.percent * 2}%)` : '';
        }
      },
      encode: {
        itemName: 'name',
        value: 'value',
        tooltip: 'name'
      }
    }
  ]
}
angular echarts apache-echarts ngx-echarts
1个回答
0
投票

您可以尝试复制默认的贴花调色板,并将您想要不可见的贴花调色板的

symbolSize
设置为 0。这是一个快速(不完整)示例,可以为您提供一个想法。

© www.soinside.com 2019 - 2024. All rights reserved.