向 Sunburst plot apache echarts 添加箭头

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

我正在制作一个如下所示的旭日图:

我想知道如何添加箭头符号,对于每个带有文本的

Breaking
节点,我正在寻找此图中类似的东西:

这是我目前的图表代码:

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'svg',
  useDirtyRect: false
});
var app = {};

var option;

var data = [
  {
    name: '2019',
    children: [
      {
        name: 'June',
        children: [
          {
            name: '1',
            children: [
              {
                name: 'API changes',
                value: 7,
                children: [
                  {
                    name: 'Breaking',
                    value: 0
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'September',
        children: [
          {
            name: '10',
            children: [
              {
                name: 'API changes',
                value: 12,
                children: [
                  {
                    name: 'Breaking',
                    value: 0
                  }
                ]
              }
            ]
          },
          {
            name: '14',
            children: [
              {
                name: 'API changes',
                value: 15,
                children: [
                  {
                    name: 'Breaking',
                    value: 0
                  }
                ]
              }
            ]
          },
          {
            name: '22',
            children: [
              {
                name: 'API changes',
                value: 13,
                children: [
                  {
                    name: 'Breaking',
                    value: 1
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'October',
        children: [
          {
            name: '3',
            children: [
              {
                name: 'API changes',
                value: 18,
                children: [
                  {
                    name: 'Breaking',
                    value: 0
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
{
  name: '2020',
  children: [
    {
      name: 'March',
      children: [
        {
          name: '26',
          value: 0
        },
        {
          name: 'API changes',
          value: 9,
          children: [
            {
              name: 'Breaking',
              value: 1
            }
          ]
        }
      ]
    },
    {
      name: 'September',
      children: [
        {
          name: '17',
          value: 0
        },
        {
          name: 'API changes',
          value: 5,
          children: [
            {
              name: 'Breaking',
              value: 0
            }
          ]
        }
      ]
    }
  ]
},
  {
    name: '2021',
    children: [
      {
        name: 'Jan',
        children: [
          {
            name: '1',
            children: [
              {
                name: 'API changes',
                value: 0,
                children: [
                  {
                    name: 'Breaking',
                    value: 0
                  }
                ]
              }
            ]
          },
          {
            name: '22',
            children: [
              {
                name: 'API changes',
                value: 43,
                children: [
                  {
                    name: 'Breaking',
                    value: 25
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'July',
        children: [
          {
            name: '11',
            children: [
              {
                name: 'API changes',
                value: 25,
                children: [
                  {
                    name: 'Breaking',
                    value: 4
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'October',
        children: [
          {
            name: '3',
            children: [
              {
                name: 'API changes',
                value: 7,
                children: [
                  {
                    name: 'Breaking',
                    value: 0
                  }
                ]
              }
            ]
          },
          {
            name: '9',
            children: [
              {
                name: 'API changes',
                value: 7,
                children: [
                  {
                    name: 'Breaking',
                    value: 0
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
];

option = {
  title: {
    text: 'id 227296',
    left: 'center',
    textStyle: {
      fontWeight: 'normal'
    }
  },
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 48,
    inRange: {
      color: ['#2F93C8', '#AEC48F', '#FFDB5C', '#F98862']
    }
  },
  series: {
    type: 'sunburst',
    data: data,
    radius: [0, '90%'],
    label: {
      rotate: 'radial'
    },
    itemStyle: {
      color: function (params) {
        var level = params.treeDepth;
        var colorList = [
          '#C1232B',
          '#B5C334',
          '#FCCE10',
          '#E87C25',
          '#27727B',
          '#FE8463',
          '#9BCA63',
          '#FAD860',
          '#F3A43B',
          '#60C0DD',
          '#D7504B',
          '#C6E579',
          '#F4E001',
          '#F0805A',
          '#26C0C0'
        ];
        return colorList[level % colorList.length];
      }
    }
  }
};

我对 echarts 有点陌生,任何帮助将不胜感激。

javascript echarts apache-echarts
© www.soinside.com 2019 - 2024. All rights reserved.