echats

用echarts实现类似iWatch环形图表

2022-07-13  本文已影响0人  Frank_Fang
图表截图

https://echarts.apache.org/examples/zh/editor.html?c=bar-polar-stack&code=PYBwLglsB2AEC8sDeAoWsCG0DmAbApgIIAeEAzgFzJrqwC2GxVAjAAysA0N6ZIuEYADIRo-KrABmGXGXxdamUmWGiqUmfhoBfebABOGACYQArmRLkqqBWACeIMbADkAYwxh82YHttPd6Q3cMKgBtJycAXX9FchVHdVltXRBgXAw9K259I1NKWDCAFlYAUj9nAA4SyKSaWT0IfDyQrOsFWDsHKicAI3S_LICg0LZWKIHYF2BvY2h3fABlWzIPOi6UtL1-tthljBcAay6AJlYj5i22ydxvLoBifAenLJ0W8Y7HHr7owbBg_JGxttJtMRHNFst8KtnOsvuNdgdjqcjhcFFcbs57o9ntFWjZ7B9eptvrBAr9QuUAKyAy5TPQzMFLFZrVKw7azOgfE5nFG0eGHZxc87EvTAEzQQwAYQwICoYD0Jk0CheClxtHeXUJPJ-fxCAHYqcTgXTQR5wUzoSyieN2ZykVqdr8EQK7cLReKpTL2vLFbQtDQIigtABuIA

option = {
  angleAxis: {
    max: 100,
    splitLine:  false,
    axisLine: false
  },
  radiusAxis: {
    type: 'category',
    data: [''],
    axisLine: false
  },
  polar: {
    radius: ['40%', '80%']
  },
  series: [
    {
      type: 'bar',
      data: [100],
      coordinateSystem: 'polar',
      stack: '2021',
      color: '#eee'
    },
    {
      type: 'bar',
      data: [100],
      coordinateSystem: 'polar',
      stack: '2022',
      color: '#eee'
    },
    {
      type: 'bar',
      data: [85],
      coordinateSystem: 'polar',
      name: '2021',
      stack: '2021',
      roundCap: true
    },
    {
      type: 'bar',
      data: [75],
      coordinateSystem: 'polar',
      name: '2022',
      stack: '2022',
      roundCap: true
    }
  ]
};
上一篇下一篇

猜你喜欢

热点阅读