Echarts可视化教程

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

利用百度ECharts做一个思维导图

var myChart = echarts.init(document.getElementById('main'));
option = {
  backgroundColor: '#030c2b',
  series: [
    {
      name: '树图',
      type: 'tree',
      orient: 'horizontal',  // vertical horizontal
      rootLocation: { x: 100, y: 230 }, // 根节点位置  {x: 100, y: 'center'}
      nodePadding: 30,
      layerPadding: 200,
      hoverable: false,
      roam: true,
      symbolSize: 18,
      itemStyle: {
        normal: {
          color: '#fff',
          label: {
            show: true,
            position: 'right',
            formatter: "{b}",
            textStyle: {
              color: '#fff',
              fontSize: 18
            }
          },
          lineStyle: {
            color: '#d54cd0',
            type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'

          }
        },
        emphasis: {
          color: '#fff',
          label: {
            show: false
          },
          borderWidth: 0
        }
      },

      data: [
	  { "name": "阿里巴巴", "children": [
            {
              "name": "淘宝", "children": [{ "name": "店铺1" }, { "name": "店铺2" }, { "name": "店铺3" }]
            },
			{
              "name": "天猫", "children": [{ "name": "店铺1"}, { "name": "店铺2" }]
            }
          ]
      }]
    }
  ]
};
myChart.setOption(option);
点击展开全文

相关文章

  1. 百度Echarts思维导图系列之数据层级分析
  2. 百度Echarts实现大事件左右分布效果图
  3. 百度Echarts公交线路实时进度
  4. 百度Echarts公司架构关系图
  5. 百度Echarts实现一个金字塔立体效果(漏斗图)