echarts旭日图

 旭日图

这是echarts 5.4.0 版本的。注意：如果一些样式不生效，可能是版本太低了。

   <div style="width:50%;height:400px">
          <div id="testImg" style="width:100%;height: 100%"></div>
        </div>

option = {
  title: {
    text: '甲苯',
    textStyle: { fontSize: 20, align: 'center' },
    left: 'center',
    bottom: 0
  },
  series: {
    type: 'sunburst',
    data: [
      {
        name: '1d',
        itemStyle: { color: '#d46c6b' },
        children: [
          {
            name: '溶剂型木器涂料（含腻子）',
            value: 0.24,
            itemStyle: { color: '#d46c6b' },
            label: {},
            labelLine: { show: true },
            nodeClick: false
          },
          {
            name: '溶剂型木器涂料（含腻子）',
            value: 0.24,
            itemStyle: { color: '#d46c6b' },
            label: {},
            labelLine: { show: true },
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.61,
            itemStyle: { color: '#d46c6b' },
            label: {},
            labelLine: { show: true },
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.15,
            itemStyle: { color: '#d46c6b' },
            label: {},
            labelLine: { show: true },
            nodeClick: false
          }
        ]
      },
      {
        name: '2d',
        itemStyle: { color: '#e08654' },
        children: [
          {
            name: '溶剂型木器涂料（含腻子）',
            value: 0.21,
            itemStyle: { color: '#e08654' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.48,
            itemStyle: { color: '#e08654' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.21,
            itemStyle: { color: '#e08654' },
            label: {},
            nodeClick: false
          }
        ]
      },
      {
        name: '3d',
        itemStyle: { color: '#e4b468' },
        children: [
          {
            name: '溶剂型木器涂料（含腻子）',
            value: 0.21,
            itemStyle: { color: '#e4b468' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.45,
            itemStyle: { color: '#e4b468' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.26,
            itemStyle: { color: '#e4b468' },
            label: {},
            nodeClick: false
          }
        ]
      },
      {
        name: '7d',
        itemStyle: { color: '#a189e7' },
        children: [
          {
            name: '溶剂型木器涂料（含腻子）',
            value: 0.21,
            itemStyle: { color: '#a189e7' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.54,
            itemStyle: { color: '#a189e7' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.12,
            itemStyle: { color: '#a189e7' },
            label: {},
            nodeClick: false
          }
        ]
      },
      {
        name: '10d',
        itemStyle: { color: '#5989cb' },
        children: [
          {
            name: '溶剂型木器涂料（含腻子）',
            value: 0.21,
            itemStyle: { color: '#5989cb' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.56,
            itemStyle: { color: '#5989cb' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.08,
            itemStyle: { color: '#5989cb' },
            label: {},
            nodeClick: false
          }
        ]
      },
      {
        name: '14d',
        itemStyle: { color: '#46b4c3' },
        children: [
          {
            name: '溶剂型木器涂料（含腻子）',
            value: 0.21,
            itemStyle: { color: '#46b4c3' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.54,
            itemStyle: { color: '#46b4c3' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.12,
            itemStyle: { color: '#46b4c3' },
            label: {},
            nodeClick: false
          }
        ]
      },
      {
        name: '21d',
        itemStyle: { color: '#6fb38a' },
        children: [
          {
            name: '溶剂型木器涂料（含腻子）',
            value: null,
            itemStyle: { color: '#6fb38a' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.72,
            itemStyle: { color: '#6fb38a' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.09,
            itemStyle: { color: '#6fb38a' },
            label: {},
            nodeClick: false
          }
        ]
      },
      {
        name: '28d',
        itemStyle: { color: '#b7ca6e' },
        children: [
          {
            name: '溶剂型木器涂料（含腻子）',
            value: 0.21,
            itemStyle: { color: '#b7ca6e' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.57,
            itemStyle: { color: '#b7ca6e' },
            label: {},
            nodeClick: false
          },
          {
            name: '人造板',
            value: 0.07,
            itemStyle: { color: '#b7ca6e' },
            label: {},
            nodeClick: false
          }
        ]
      }
    ],
    radius: [0, '50%'],
    emphasis: { focus: 'ancestor' },
    levels: [
      { itemStyle: { color: '#fff' } },    //由内而外第一级别样式
      {
        r0: '15%',
        r: '35%',
        itemStyle: { borderWidth: 1.5 },
        label: { align: 'center', fontSize: 14, rotate: '0', silent: true,color:"#fff" }
      },
      {                         //由内而外第二级别样式
        r0: '35%',
        r: '50%',
        label: {
          fontSize: 12,
          color: '#333',
          position: 'outside',   //标签显示外围
          distance: 40,    //标签和图距离
          rotate: 0     //标签旋转角度
        },

        labelLine: {
          show: true     //引导线
        }, 

        itemStyle: { borderWidth: 1.5 }    //扇形边框
      }
    ]
  }
};
let myChart = echarts.init(document.getElementById('testImg'));
        myChart.setOption(option);