Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts图表系列之画扇面

var data = [{
  value: 50,
  itemStyle: {
    color: '#b37119'
  },
  children: [{
    value: 5,
    itemStyle: {
      color: '#f1c067'
    },
    children: [{
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      },
      children: [{
        name: '1',
        value: 2.5,
        itemStyle: {
          borderWidth: 1,
          color: '#e5e0dc'
        },
        children: [{
          name: '2',
          value: 2.5,
          itemStyle: {
            borderWidth: 1,
            color: '#e5e0dc'
          }
        }, {
          name: '3',
          value: 2.5,
          itemStyle: {
            borderWidth: 1,
            color: '#faf3ed'
          }
        }]
      }, {
        name: '4',
        value: 2.5,
        itemStyle: {
          borderWidth: 1,
          color: '#faf3ed'
        }
      }]
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }]
  }, {
    value: 5,
    itemStyle: {
      color: '#f1c067'
    },
    children: [{
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      },
      children: [{
        name: '5',
        value: 2.5,
        itemStyle: {
          borderWidth: 1,
          color: '#e5e0dc'
        },
        children: [{
          name: '6',
          value: 2.5,
          itemStyle: {
            borderWidth: 1,
            color: '#e5e0dc'
          }
        }, {
          name: '7',
          value: 2.5,
          itemStyle: {
            borderWidth: 1,
            color: '#faf3ed'
          }
        }]
      }, {
        name: '8',
        value: 2.5,
        itemStyle: {
          borderWidth: 1,
          color: '#faf3ed'
        }
      }]
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }]
  }, {
    value: 5,
    itemStyle: {
      opacity: 0
    }
  }, {
    value: 5,
    itemStyle: {
      opacity: 0
    }
  }, {
    value: 5,
    itemStyle: {
      opacity: 0
    }
  }, {
    value: 5,
    itemStyle: {
      opacity: 0
    }
  }, {
    value: 5,
    itemStyle: {
      opacity: 0
    }
  }, {
    value: 5,
    itemStyle: {
      opacity: 0
    }
  }, {
    value: 5,
    itemStyle: {
      color: '#f1c067'
    },
    children: [{
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      },
      children: [{
        name: '9',
        value: 2.5,
        itemStyle: {
          borderWidth: 1,
          color: '#e5e0dc'
        },
        children: [{
          name: '10',
          value: 2.5,
          itemStyle: {
            borderWidth: 1,
            color: '#e5e0dc'
          }
        }, {
          name: '11',
          value: 2.5,
          itemStyle: {
            borderWidth: 1,
            color: '#faf3ed'
          }
        }]
      }, {
        name: '12',
        value: 2.5,
        itemStyle: {
          borderWidth: 1,
          color: '#faf3ed'
        }
      }]
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }]
  }, {
    value: 5,
    itemStyle: {
      color: '#f1c067'
    },
    children: [{
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      },
      children: [{
        name: '13',
        value: 2.5,
        itemStyle: {
          borderWidth: 1,
          color: '#e5e0dc'
        },
        children: [{
          name: '14',
          value: 2.5,
          itemStyle: {
            borderWidth: 1,
            color: '#e5e0dc'
          }
        }, {
          name: '15',
          value: 2.5,
          itemStyle: {
            borderWidth: 1,
            color: '#faf3ed'
          }
        }]
      }, {
        name: '16',
        value: 2.5,
        itemStyle: {
          borderWidth: 1,
          color: '#faf3ed'
        }
      }]
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }, {
      value: 1,
      itemStyle: {
        borderWidth: 3,
        color: '#f1c067'
      }
    }]
  }]
}];

option = {
  backgroundColor: "#030c2b",
  series: {
    silent: true,
    type: 'sunburst',
    data: data,
    radius: [0, '10%'],
    center: ['50%', '75%'],
    sort: null,
    emphasis: {
      focus: 'ancestor'
    },
    label: {
      rotate: 'tangential',
      fontSize: 20,
      color: '#000',
      fontFamily: 'serif',
      fontStyle: 'oblique'
    },
    levels: [{}, {
      r0: 5,
      r: '5%'
    }, {
      r0: '5%',
      r: '20%',
    }, {
      r0: '20%',
      r: '40%',
    }, {
      r0: '40%',
      r: '70%'
    }, {
      r0: '70%',
      r: '100%'
    }]
  }
}

点击运行 》

点击展开全文

相关文章

  1. 百度Echarts饼图系列之透明效果
  2. 百度echarts饼图之多彩花瓣定制图形
  3. 百度Echarts饼图中如何实现定时切换(附代码)