Echarts可视化教程

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

百度Echarts思维导图系列之数据层级分析

var data = {'ROE':'25.26%','权益乘数':'1.397','负债比率':'26.64%','流动比率':'344.36%','速动比率':'293.26%','利息保障倍数':'-15.88','资产净利率':'18.08%','销售净利率':'34.72%','毛利率':'74.46%','营业利润率':'48.38%','总资产周转率':'0.521','流动资产比率':'90.78%','非流动资产比率':'34.99%','存货周转率':'1.0','应收账款周转率':'382.9'}
var nodes = [{
  x: 500,
  y: 1000,
  nodeName: 'ROE:  ' +data.ROE,
  svgPath: 'M922.3 447.8c-6 0-11.7-0.7-17.3-1.7l-12.3 56.4c-1.9 57.1-34.6 253.8-34.6 253.8H165.8s-20.6-197.2-25.6-257L129.5 443c-8.8 2.9-18 4.9-27.8 4.9-49.5 0-89.8-40.2-89.8-90 0-49.7 40.2-90 89.8-90 49.6 0 89.7 40.3 89.7 90 0 15.1-4 29.1-10.6 41.7l164.4 61.2 138-223.6c-35.4-12-61.1-45.3-61.1-84.9 0-49.7 40.1-90 89.8-90 49.5 0 89.8 40.2 89.8 90 0 39.6-25.7 72.8-61.2 84.8l138.1 223.6 162.8-64.2c-5.6-11.8-9-24.7-9-38.6 0-49.7 40.3-90 89.8-90s89.7 40.3 89.7 90c0.1 49.7-40 89.9-89.6 89.9zM858.2 859c-35.8 76.4-79.7 102.8-153.9 102.8H319.7c-56.7 0-122.4-26.4-153.9-102.8v-25.6h692.4V859',
  symbolSize: 30,
  }, {
  x: 300,
  y: 800,
  nodeName: '资产净利率:  ' +data.资产净利率,
  svgPath: 'M694.26516 286.98827 512 469.254453 329.732793 286.98827c-8.287757-8.287757-21.724791-8.286734-30.012547 0.001023-8.286734 8.286734-8.286734 21.723767 0 30.011524l161.04486 161.043836-108.634186 0c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l139.000797 0 0 89.12997L363.803773 609.617271c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l127.328967 0 0 131.572618c0 11.718903 9.502421 21.221324 21.221324 21.221324s21.221324-9.502421 21.221324-21.221324L533.575388 652.059919l127.327944 0c11.719926 0 21.221324-9.502421 21.221324-21.221324S672.623257 609.617271 660.903332 609.617271L533.575388 609.617271l0-89.12997 138.999774 0c11.719926 0 21.221324-9.502421 21.221324-21.221324s-9.502421-21.221324-21.221324-21.221324L563.233871 478.044654l161.043836-161.043836c8.287757-8.287757 8.287757-21.724791 0-30.012547C715.987904 278.700513 702.554964 278.700513 694.26516 286.98827zM512 65.290005c-246.316965 0-446.709995 200.39303-446.709995 446.708971 0 246.316965 200.39303 446.709995 446.709995 446.709995s446.709995-200.39303 446.709995-446.709995C958.709995 265.683035 758.316965 65.290005 512 65.290005zM512 916.266323c-222.913952 0-404.267347-181.353394-404.267347-404.267347S289.086048 107.733677 512 107.733677s404.267347 181.352371 404.267347 404.266323S734.912929 916.266323 512 916.266323z',
  symbolSize: 30,
  },
   {
  x: 850,
  y: 800,
  nodeName: '权益乘数:  ' +data.权益乘数,
  svgPath: 'M694.26516 286.98827 512 469.254453 329.732793 286.98827c-8.287757-8.287757-21.724791-8.286734-30.012547 0.001023-8.286734 8.286734-8.286734 21.723767 0 30.011524l161.04486 161.043836-108.634186 0c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l139.000797 0 0 89.12997L363.803773 609.617271c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l127.328967 0 0 131.572618c0 11.718903 9.502421 21.221324 21.221324 21.221324s21.221324-9.502421 21.221324-21.221324L533.575388 652.059919l127.327944 0c11.719926 0 21.221324-9.502421 21.221324-21.221324S672.623257 609.617271 660.903332 609.617271L533.575388 609.617271l0-89.12997 138.999774 0c11.719926 0 21.221324-9.502421 21.221324-21.221324s-9.502421-21.221324-21.221324-21.221324L563.233871 478.044654l161.043836-161.043836c8.287757-8.287757 8.287757-21.724791 0-30.012547C715.987904 278.700513 702.554964 278.700513 694.26516 286.98827zM512 65.290005c-246.316965 0-446.709995 200.39303-446.709995 446.708971 0 246.316965 200.39303 446.709995 446.709995 446.709995s446.709995-200.39303 446.709995-446.709995C958.709995 265.683035 758.316965 65.290005 512 65.290005zM512 916.266323c-222.913952 0-404.267347-181.353394-404.267347-404.267347S289.086048 107.733677 512 107.733677s404.267347 181.352371 404.267347 404.266323S734.912929 916.266323 512 916.266323z',
  symbolSize: 30,
  },
  {
  x: 100,
  y: 600,
  nodeName: '销售净利率:  ' +data.销售净利率,
  svgPath: 'M528.1 118.8L878.8 316v392.3L528.1 905.7 177.3 708.4V316l350.8-197.2m0-56.6l-400 225v450l400 225 400-225v-450l-400-225z,M652.9 367l-36.6-27.2-91.1 119.5-84.8-118.6-37.2 26.7 86.1 120.5h-69v46.6h81.6v43.1h-81.6v46.1h81.6v61H548v-61h88.3v-46.1H548v-43.1h88.3v-46.6h-75.1z',
  symbolSize: 30,
  },
  {
  x: 500,
  y: 600,
  nodeName: '总资产周转率:  ' +data.总资产周转率,
  svgPath: 'M528.1 118.8L878.8 316v392.3L528.1 905.7 177.3 708.4V316l350.8-197.2m0-56.6l-400 225v450l400 225 400-225v-450l-400-225z,M652.9 367l-36.6-27.2-91.1 119.5-84.8-118.6-37.2 26.7 86.1 120.5h-69v46.6h81.6v43.1h-81.6v46.1h81.6v61H548v-61h88.3v-46.1H548v-43.1h88.3v-46.6h-75.1z',
  symbolSize: 30,
  },
  {
  x: 850,
  y: 600,
  nodeName: '负债比率:  ' +data.负债比率,
  svgPath: 'M528.1 118.8L878.8 316v392.3L528.1 905.7 177.3 708.4V316l350.8-197.2m0-56.6l-400 225v450l400 225 400-225v-450l-400-225z,M652.9 367l-36.6-27.2-91.1 119.5-84.8-118.6-37.2 26.7 86.1 120.5h-69v46.6h81.6v43.1h-81.6v46.1h81.6v61H548v-61h88.3v-46.1H548v-43.1h88.3v-46.6h-75.1z',
  symbolSize: 30,
  },
  {
  x: 0,
  y: 400,
  nodeName: '毛利率:  ' +data.毛利率,
  svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
  symbolSize: 30,
  },
  {
  x: 200,
  y: 400,
  nodeName: '营业利润率:  ' +data.营业利润率,
  svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
  symbolSize: 30,
  },
  {
  x: 400,
  y: 400,
  nodeName: '流动资产比率:  ' +data.流动资产比率,
  svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
  symbolSize: 30,
  },
  {
  x: 600,
  y: 400,
  nodeName: '非流动资产比率:  '+'\n' +data.非流动资产比率,
  svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
  symbolSize: 30,
  },
  {
  x: 750,
  y: 400,
  nodeName: '流动比率:  ' +data.流动比率,
  svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
  symbolSize: 30,
  },
  {
  x: 950,
  y: 400,
  nodeName: '速动比率:  ' +data.速动比率,
  svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
  symbolSize: 30,
  },
  {
  x: 300,
  y: 200,
  nodeName: '存货周转率:  ' +data.存货周转率,
  svgPath: 'M736.44032 318.52032c37.6064-52.06016 70.86592-117.44256 37.95968-183.43424a99.36384 99.36384 0 0 0-63.2064-54.04672c-35.67616-9.728-72.55552 1.8176-96.18432 12.50816A145.80224 145.80224 0 0 0 514.048 61.952c-54.272 4.608-78.52544 17.48992-100.864 33.15712-39.6032-10.92096-89.03168-16.57344-127.94368 4.68992a101.376 101.376 0 0 0-49.53088 66.22208C221.184 223.10912 256.47616 276.992 295.03488 324.03968 222.44864 373.76 53.31456 513.75616 67.37408 729.28768l0.12288 1.47456C83.93728 884.57216 158.93504 962.56 290.4064 962.56h467.31776c1.85344-0.08192 194.1504-1.35168 199.6288-246.70208 5.16096-231.80288-160.1024-358.6304-220.91264-397.3376z m21.53984 572.6464H290.4064c-117.85728 0-143.0784-84.42368-152.02816-167.26528-12.0832-192.24576 157.312-315.98592 209.56672-349.35296a55.94112 55.94112 0 0 0 12.5952-83.27168c-33.2288-39.20384-62.976-79.36-55.808-107.56608 3.47648-13.62432 9.6512-18.50368 14.6432-21.23264 17.0496-9.33376 50.3808-7.168 89.1392 5.79072L425.8816 174.08l18.5344-13.5168c21.62688-15.872 32.48128-23.80288 75.6992-27.48928 36.08576-3.072 62.20288 26.5728 62.2592 26.624l20.2496 24.23808 26.43968-17.23392c11.55072-7.52128 43.56096-22.19008 63.488-16.768 5.20704 1.42336 11.98592 4.64384 18.19136 17.08032 14.42816 28.93824 2.14016 65.39264-41.088 121.9072a55.92576 55.92576 0 0 0 16.54784 82.53952c34.23744 19.53792 204.8 127.90272 199.9872 342.79936-3.83488 170.5984-115.53792 176.768-128.20992 176.90624z m-127.83104-276.11136a35.69664 35.69664 0 0 0 0-71.39328h-35.328l35.70688-49.9456a35.63008 35.63008 0 1 0-57.856-41.59488l-54.57408 76.33408L463.5392 456.448a35.6352 35.6352 0 1 0-56.71424 43.17184l33.35168 44.032h-33.57184a35.69664 35.69664 0 0 0 0 71.39328h76.00128v26.85952H406.6048a35.69664 35.69664 0 0 0 0 71.39328h76.00128v52.32128a35.59936 35.59936 0 1 0 71.20384 0v-52.31104h76.3392a35.69664 35.69664 0 0 0 0-71.39328h-76.3392v-26.85952h76.3392z',
  symbolSize: 30,
  },
  {
  x: 500,
  y: 200,
  nodeName: '应收账款周转率:  ' +data.应收账款周转率,
  svgPath: 'M736.44032 318.52032c37.6064-52.06016 70.86592-117.44256 37.95968-183.43424a99.36384 99.36384 0 0 0-63.2064-54.04672c-35.67616-9.728-72.55552 1.8176-96.18432 12.50816A145.80224 145.80224 0 0 0 514.048 61.952c-54.272 4.608-78.52544 17.48992-100.864 33.15712-39.6032-10.92096-89.03168-16.57344-127.94368 4.68992a101.376 101.376 0 0 0-49.53088 66.22208C221.184 223.10912 256.47616 276.992 295.03488 324.03968 222.44864 373.76 53.31456 513.75616 67.37408 729.28768l0.12288 1.47456C83.93728 884.57216 158.93504 962.56 290.4064 962.56h467.31776c1.85344-0.08192 194.1504-1.35168 199.6288-246.70208 5.16096-231.80288-160.1024-358.6304-220.91264-397.3376z m21.53984 572.6464H290.4064c-117.85728 0-143.0784-84.42368-152.02816-167.26528-12.0832-192.24576 157.312-315.98592 209.56672-349.35296a55.94112 55.94112 0 0 0 12.5952-83.27168c-33.2288-39.20384-62.976-79.36-55.808-107.56608 3.47648-13.62432 9.6512-18.50368 14.6432-21.23264 17.0496-9.33376 50.3808-7.168 89.1392 5.79072L425.8816 174.08l18.5344-13.5168c21.62688-15.872 32.48128-23.80288 75.6992-27.48928 36.08576-3.072 62.20288 26.5728 62.2592 26.624l20.2496 24.23808 26.43968-17.23392c11.55072-7.52128 43.56096-22.19008 63.488-16.768 5.20704 1.42336 11.98592 4.64384 18.19136 17.08032 14.42816 28.93824 2.14016 65.39264-41.088 121.9072a55.92576 55.92576 0 0 0 16.54784 82.53952c34.23744 19.53792 204.8 127.90272 199.9872 342.79936-3.83488 170.5984-115.53792 176.768-128.20992 176.90624z m-127.83104-276.11136a35.69664 35.69664 0 0 0 0-71.39328h-35.328l35.70688-49.9456a35.63008 35.63008 0 1 0-57.856-41.59488l-54.57408 76.33408L463.5392 456.448a35.6352 35.6352 0 1 0-56.71424 43.17184l33.35168 44.032h-33.57184a35.69664 35.69664 0 0 0 0 71.39328h76.00128v26.85952H406.6048a35.69664 35.69664 0 0 0 0 71.39328h76.00128v52.32128a35.59936 35.59936 0 1 0 71.20384 0v-52.31104h76.3392a35.69664 35.69664 0 0 0 0-71.39328h-76.3392v-26.85952h76.3392z',
  symbolSize: 30,
  },
]
var charts = {
  nodes: [],
  linesData: [{
    coords: [
    [500, 1000],
    [500, 900],
    ]
  }, {
    coords: [
    [500, 900],
    [300, 900],
    [300, 800]
    ]
  },
  {
    coords: [
    [500, 900],
    [850, 900],
    [850, 800]

    ]
  },
  {
    coords: [
    [300, 800],
    [300, 700],
    ]
  },
  {
    coords: [
    [300, 700],
    [100, 700],
    [100, 600]
    ]
  },
  {
    coords: [
    [300, 700],
    [500, 700],
    [500, 600]
    ]
  },
  {
    coords: [
    [100, 600],
    [100, 500]
    ]
  },
  {
    coords: [
    [100, 500],
    [0, 500],
    [0, 400]
    ]
  },
  {
    coords: [
    [100, 500],
    [200, 500],
    [200, 400]
    ]
  },
  {
    coords: [
    [500, 600],
    [500, 500]
    ]
  },
  {
    coords: [
    [500, 500],
    [400, 500],
    [400, 400]
    ]
  },
  {
    coords: [
    [500, 500],
    [600, 500],
    [600, 400]
    ]
  },
  {
    coords: [
    [400, 400],
    [400, 300]
    ]
  },
  {
    coords: [
    [400, 300],
    [300, 300],
    [300, 200]
    ]
  },
  {
    coords: [
    [400, 300],
    [500, 300],
    [500, 200]
    ]
  },
  {
    coords: [
    [850, 800],
    [850, 600]
    ]
  },
    {
    coords: [
    [850, 600],
    [850, 500]
    ]
  },
  {
    coords: [
    [850, 500],
    [750, 500],
    [750, 400]
    ]
  },
  {
    coords: [
    [850, 500],
    [950, 500],
    [950, 400]
    ]
  }
  ]
}
for (var j = 0; j < nodes.length; j++) {
  const {
  x,
  y,
  nodeName,
  svgPath,
  symbolSize
  } = nodes[j];
  var node = {
  nodeName,
  value: [x, y],
  symbolSize: symbolSize || 50,
  symbol: 'path://' + svgPath,
  itemStyle: {
    color: 'orange',
  }
  }
  charts.nodes.push(node)
}
option = {
  backgroundColor: "#030c2b",
  xAxis: {
  min: 0,
  max: 1000,
  show: false,
  type: 'value'
  },
  yAxis: {
  min: 0,
  max: 1000,
  show: false,
  type: 'value'
  },
  series: [{
  type: 'graph',
  coordinateSystem: 'cartesian2d',
  label: {
    show: true,
    position: 'bottom',
    color: 'orange',
    formatter: function(item) {
    return item.data.nodeName
    }
  },
  data: charts.nodes,
  }, {
  type: 'lines',
  polyline: true,
  coordinateSystem: 'cartesian2d',
  lineStyle: {
    type: 'dashed',
    width: 2,
    color: '#175064',
    curveness: 0.3

  },
  effect: {
    show: true,
    trailLength: 0.1,
    symbol: 'arrow',
    color: 'orange',
    symbolSize: 8
  },
  data: charts.linesData
  }]
};

点击运行 》

点击展开全文

相关文章

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