echarts旭日图大小设置

要设置旭日图的大小，您可以在echarts中使用`grid`属性和`series`属性来调整。下面是一个示例代码片段，可以将旭日图大小设置为600x600像素：

option = {
    grid: {
        width: 600,
        height: 600,
        left: 'center',
        top: 'middle'
    },
    series: [{
        type: 'sunburst',
        radius: [0, '90%'],
        data: []
    }]
};

在这个例子中，`grid`属性中的`width`和`height`属性设置了旭日图的宽度和高度，并把图表放置在画布的中心位置。`series`属性中的`radius`属性设置了旭日图的半径，其中`[0, '90%']`表示内半径为0，外半径为整个图表宽度的90%。您可以根据需要修改这些值来调整旭日图的大小。

相关问题

echarts旭日图禁止点击根节点

### 回答1：
要禁止点击echarts旭日图的根节点，可以设置`silent`属性为`true`，这样用户点击根节点时不会触发任何事件。

示例代码：

option = {
  series: [{
    type: 'sunburst',
    data: [...],
    nodeClick: false, // 禁用节点点击事件
    silent: true, // 禁止点击根节点
    label: {
      ...
    },
    ...
  }]
};

设置`nodeClick`属性为`false`可以禁用所有节点的点击事件。如果只想禁用根节点的点击事件，可以使用`silent`属性。

### 回答2：
在Echarts旭日图中，要禁止点击根节点，可以通过以下几个步骤实现。

首先，在Echarts配置中，找到series节点下的data属性，这个属性是用来设置图表的数据源的。在数据源中，根节点的数据通常位于数组的第一个元素。

其次，可以通过设置根节点的itemStyle属性来禁用点击事件。在itemStyle中，添加一个emphasis属性，然后在emphasis中设置一个空的on属性即可。具体代码如下：

data:[
{
name: '根节点',
itemStyle: {
emphasis: {
on: '' // 禁用点击事件
}
},
children:[
...
]
},
...
]

最后，将修改后的Echarts配置应用到页面上即可实现禁止点击根节点的效果。

需要注意的是，禁止点击根节点后，用户将无法通过点击根节点展开或收起其子节点。如果需要在一定条件下允许点击根节点，可以在点击事件中添加判断条件，只有当符合条件时才允许点击。

除了上述方法，也可以通过设置全局的clickable属性来禁用整个图表的点击事件。具体方式是在Echarts配置的legend属性中添加clickable: false。

以上是禁止点击Echarts旭日图根节点的方法，通过设置根节点的itemStyle属性或全局的clickable属性，可以实现禁用点击事件的效果。

### 回答3：
要禁止echarts旭日图的根节点被点击，可以通过设置echarts的配置参数来实现。首先，在创建旭日图实例时，需要在option的series数组中添加一个data属性，并在该属性中设置根节点的点击事件为null，即可禁止根节点被点击。

具体的操作步骤如下：

1. 创建echarts旭日图实例，并指定其对应的DOM容器。

var myChart = echarts.init(document.getElementById('chart-container'));

2. 定义旭日图的数据结构，包括根节点和其它子节点的信息。

var data = {
  name: "根节点",
  children: [
    {
      name: "子节点1",
      value: 10
    },
    {
      name: "子节点2",
      value: 20
    },
    // 其它子节点
  ]
};

3. 设置echarts的配置参数，包括旭日图的样式和交互设置。

var option = {
  series: [
    {
      type: 'sunburst',
      data: [data],
      // 其它配置参数
    }
  ]
};

4. 在option中设置根节点的点击事件为null，即禁止根节点被点击。

option.series[0].data[0].itemStyle = {
  cursor: 'not-allowed'
};

5. 将配置参数应用到echarts实例中，并渲染出旭日图。

myChart.setOption(option);

echarts旭日图自定义levels

旭日图（Sunburst）是 Echarts 中一种非常强大的图表类型，可以非常直观地展示层次结构数据。在旭日图中，每个数据节点都表示一个环形区域，而每个节点的子节点则表示该节点的一个子区域。

Echarts 旭日图中的每个节点都有一个 `depth` 属性，表示该节点所处在层级的深度。因此，如果想要自定义旭日图中的层级，可以通过设置节点的 `depth` 属性来实现。

例如，我们可以定义三个层级，分别为 `level1`、`level2` 和 `level3`，并分别对应不同的颜色，代码如下：

option = {
    series: [{
        type: 'sunburst',
        data: [
            { value: 5, name: '节点1', depth: 0 },
            { value: 3, name: '节点2', depth: 1 },
            { value: 1, name: '节点3', depth: 1 },
            { value: 2, name: '节点4', depth: 2 },
            { value: 4, name: '节点5', depth: 2 },
            { value: 6, name: '节点6', depth: 2 },
            { value: 3, name: '节点7', depth: 1 },
            { value: 2, name: '节点8', depth: 2 },
            { value: 1, name: '节点9', depth: 2 },
        ],
        levels: [
            { itemStyle: { color: '#FFAE57' }, },
            { itemStyle: { color: '#FF7853' }, },
            { itemStyle: { color: '#EA5151' }, },
        ],
    }]
};

在上面的代码中，我们通过设置 `depth` 属性来定义了三个层级，分别为 `level1`（深度为0）、`level2`（深度为1）和 `level3`（深度为2）。同时，我们也通过 `levels` 属性对每个层级进行了颜色的定义。