Echarts可视化教程

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

利用百度ECharts做一个思维导图(可展开收缩)

option = {
  backgroundColor: '#030c2b',
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove',
    backgroundColor : '#dfdfdf',
    textStyle: {
      color : 'black'
    }
  },
  series: [{
    type: "tree",
    symbolSize: 75,
    symbol: 'roundRect',
    
    edgeShape: 'polyline',
    edgeForkPosition: '50%',
    initialTreeDepth: 2,

    orient: 'vertical',

    itemStyle: {
      color: 'black',
      borderColor: 'black',
    },

    expandAndCollapse: true,
    animationDuration: 550,
    animationDurationUpdate: 750,
    
    lineStyle: {
      color: '#7b7b7b',
      width: 3
    },

    label: {
        show: true,
        position: 'inside',
        textStyle: {
          fontSize: 15,
          color: '#fff',
        },
    },

    leaves: {
      label: {
        position: 'inside',
        color: '#fff'
      },
      itemStyle: {
        color: '#dfdfdf',
        borderColor: '#dfdfdf',
      }
    },

    data: [{
    name: "根节点",
    url: '',
    // 根节点样式设置
    itemStyle: {
      color: '#b039ff',
      borderColor: '#b039ff',
    },
    children: [
      {
      name: "子节点1",
      children: [{
      name: "孙节点1"
      }, {
      name: "孙节点2"
      }, {
      name: "孙节点3"
      }]
    }, {
      name: "子节点2",
      children: [{
      name: "孙节点4"
      }, {
      name: "孙节点5"
      }, {
      name: "孙节点6"
      }]
    }]
    }],

  }]
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

点击运行 》

点击展开全文

相关文章

  1. 百度Echarts思维导图系列之数据层级分析
  2. 利用百度ECharts做一个思维导图2
  3. 利用百度ECharts做一个思维导图

热门workflows工作流