echarts绘制流程图

最新推荐文章于 2024-05-10 21:11:18 发布
最新推荐文章于 2024-05-10 21:11:18 发布
阅读量3.7k 收藏 15
点赞数 1
分类专栏： echarts 文章标签： javascript echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YLiu77/article/details/109448775
版权

先上效果图：

js代码：

// 图标坐标，预先调好每个点的坐标
  var nodes = [{
    x: 100,
    y: 950,
    nodeName: '',
    svgPath: './Images/tank.png',
    symbolSize: 80,
    position: 'inside'
  }, {
    x: 300,
    y: 950,
    nodeName: '',
    svgPath: './Images/tank.png',
    symbolSize: 80,
    position: 'inside'
  }, {
    x: 500,
    y: 950,
    nodeName: '',
    svgPath: './Images/tank.png',
    symbolSize: 80,
    position: 'inside'
  }, {
    x: 100,
    y: 700,
    nodeName: '',
    svgPath: './Images/tank.png',
    symbolSize: 80,
    position: 'inside'
  }, {
    x: 250,
    y: 700,
    nodeName: '',
    svgPath: './Images/tank.png',
    symbolSize: 80,
    position: 'inside'
  }, {
    x: 400,
    y: 700,
    nodeName: '',
    svgPath: './Images/tank.png',
    symbolSize: 80,
    position: 'inside'
  }, {
    x: 550,
    y: 700,
    nodeName: '',
    svgPath: './Images/tank.png',
    symbolSize: 80,
    position: 'inside'
  }, {
    x: 145,
    y: 220,
    nodeName: 'GV5006',
    svgPath: './Images/tap-left.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 157,
    y: 220,
    nodeName: 'GV5003',
    svgPath: './Images/tap-left.png',
    symbolSize: [20, 20],
    position: 'bottom'
  }, {
    x: 185,
    y: 220,
    nodeName: 'GV5005',
    svgPath: './Images/tap-left.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 197,
    y: 220,
    nodeName: 'GV5002',
    svgPath: './Images/tap-left.png',
    symbolSize: [20, 20],
    position: 'bottom'
  }, {
    x: 245,
    y: 220,
    nodeName: 'GV5004',
    svgPath: './Images/tap-left.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 295,
    y: 220,
    nodeName: 'GV5001',
    svgPath: './Images/tap-left.png',
    symbolSize: [20, 20],
    position: 'bottom'
  }, {
    x: 150,
    y: 985,
    nodeName: 'GV1012',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 130,
    y: 955,
    nodeName: 'GV1011',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'bottom'
  }, {
    x: 350,
    y: 985,
    nodeName: 'GV1032',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 330,
    y: 955,
    nodeName: 'GV1031',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'bottom'
  }, {
    x: 550,
    y: 985,
    nodeName: 'GV1042',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 530,
    y: 955,
    nodeName: 'GV1041',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'bottom'
  }, {
    x: 150,
    y: 735,
    nodeName: 'GV1022',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 130,
    y: 705,
    nodeName: 'GV1021',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'bottom'
  }, {
    x: 790,
    y: 955,
    nodeName: 'GV5502',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 875,
    nodeName: 'GV5501',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 795,
    nodeName: 'GV5403',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 775,
    nodeName: 'GV5402',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'bottom'
  }, {
    x: 790,
    y: 695,
    nodeName: 'GV5401',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 595,
    nodeName: 'GV5302',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 515,
    nodeName: 'GV5301',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 415,
    nodeName: 'GV5202',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 335,
    nodeName: 'GV5201',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 235,
    nodeName: 'GV5102',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  }, {
    x: 790,
    y: 155,
    nodeName: 'GV5101',
    svgPath: './Images/tap.png',
    symbolSize: [20, 20],
    position: 'top'
  },
  {
    x: 180,
    y: 120,
    nodeName: 'P-201',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 280,
    y: 120,
    nodeName: 'P-202',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 970,
    nodeName: 'P-110',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 890,
    nodeName: 'P-109',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 790,
    nodeName: 'P-108',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 710,
    nodeName: 'P-107',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 610,
    nodeName: 'P-106',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 530,
    nodeName: 'P-105',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 430,
    nodeName: 'P-104',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 350,
    nodeName: 'P-103',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 250,
    nodeName: 'P-102',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  }, {
    x: 850,
    y: 170,
    nodeName: 'P-101',
    svgPath: './Images/pump-normal.svg',
    symbolSize: [20, 40],
    position: 'right'
  },{
    x: 910,
    y: 970,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 890,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 790,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 710,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 610,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 530,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 430,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 350,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 250,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 910,
    y: 170,
    nodeName: '',
    svgPath: './Images/truck.png',
    symbolSize: [40, 50],
    position: 'right'
  }, {
    x: 143,
    y: 920,
    nodeName: '0V1013',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 163,
    y: 920,
    nodeName: '0V1011',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'top'
  }, {
    x: 183,
    y: 920,
    nodeName: '0V1012',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 203,
    y: 920,
    nodeName: '0V1014',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 343,
    y: 920,
    nodeName: '0V1033',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 363,
    y: 920,
    nodeName: '0V1031',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'top'
  }, {
    x: 383,
    y: 920,
    nodeName: '0V1032',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 403,
    y: 920,
    nodeName: '0V1034',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 563,
    y: 920,
    nodeName: '0V1041',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 583,
    y: 920,
    nodeName: '0V1042',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 163,
    y: 670,
    nodeName: '0V1021',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 183,
    y: 670,
    nodeName: '0V1022',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'top'
  }, {
    x: 290,
    y: 733,
    nodeName: 'E/HV2012',
    svgPath: './Images/jiaqi/famen3.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 290,
    y: 703,
    nodeName: 'E/HV2011',
    svgPath: './Images/jiaqi/famen3.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 313,
    y: 670,
    nodeName: '0V2011',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 333,
    y: 670,
    nodeName: '0V2012',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'top'
  }, {
    x: 440,
    y: 733,
    nodeName: 'E/HV2022',
    svgPath: './Images/jiaqi/famen3.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 440,
    y: 703,
    nodeName: 'E/HV2021',
    svgPath: './Images/jiaqi/famen3.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 463,
    y: 670,
    nodeName: '0V2021',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 483,
    y: 670,
    nodeName: '0V2022',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'top'
  }, {
    x: 590,
    y: 733,
    nodeName: 'E/HV2032',
    svgPath: './Images/jiaqi/famen3.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 590,
    y: 703,
    nodeName: 'E/HV2031',
    svgPath: './Images/jiaqi/famen3.png',
    symbolSize: [16, 16],
    position: 'right'
  }, {
    x: 613,
    y: 670,
    nodeName: '0V2031',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'bottom'
  }, {
    x: 633,
    y: 670,
    nodeName: '0V2032',
    svgPath: './Images/jiaqi/famen2.png',
    symbolSize: [16, 16],
    position: 'right'
  }
  ]
  // 描线，根据一组的点来描线
  var charts = {
    nodes: [],
    linesData: [
      // T-101
      {
        coords: [
          [100, 980],
          [200, 980],
          [200, 880]
        ]
      },
      {
        coords: [
          [180, 980],
          [180, 820]
        ]
      },
      {
        coords: [
          [160, 840],
          [160, 950],
          [100, 950]
        ]
      },
      {
        coords: [
          [140, 860],
          [140, 950]
        ]
      },
      // T-103
      {
        coords: [
          [300, 980],
          [400, 980],
          [400, 880]
        ]
      },
      {
        coords: [
          [380, 980],
          [380, 820]
        ]
      },
      {
        coords: [
          [360, 840],
          [360, 950],
          [300, 950]
        ]
      },
      {
        coords: [
          [340, 860],
          [340, 950]
        ]
      },
      // T-104
      {
        coords: [
          [500, 980],
          [580, 980],
          [580, 820]
        ]
      },
      {
        coords: [
          [560, 840],
          [560, 950],
          [500, 950]
        ]
      },
      // T-102
      {
        coords: [
          [100, 730],
          [180, 730],
          [180, 630]
        ]
      },
      {
        coords: [
          [160, 610],
          [160, 700],
          [100, 700]
        ]
      },
      // T-201
      {
        coords: [
          [250, 730],
          [330, 730],
          [330, 570]
        ]
      },
      {
        coords: [
          [310, 590],
          [310, 700],
          [250, 700]
        ]
      },
      // T-202
      {
        coords: [
          [400, 730],
          [480, 730],
          [480, 570]
        ]
      },
      {
        coords: [
          [460, 590],
          [460, 700],
          [400, 700]
        ]
      },
      // T-203
      {
        coords: [
          [550, 730],
          [630, 730],
          [630, 570]
        ]
      },
      {
        coords: [
          [610, 590],
          [610, 700],
          [550, 700]
        ]
      },
      // line1
      {
        coords: [
          [20, 880],
          [720, 880],
          [720, 350],
          [360, 350],
          [360, 100]
        ]
      },
      // line2
      {
        coords: [
          [350, 100],
          [350, 370],
          [710, 370],
          [710, 860],
          [20, 860]
        ]
      },
      // line3
      {
        coords: [
          [100, 390],
          [700, 390],
          [700, 840],
          [160, 840]
        ]
      },
      // line4
      {
        coords: [
          [20, 820],
          [690, 820],
          [690, 410],
          [100, 410]
        ]
      },
      {
        coords: [
          [150, 410],
          [150, 330],
          [770, 330],
          [770, 1000]
        ]
      },
      {
        coords: [
          [770, 330],
          [770, 50]
        ]
      },
      // line5
      {
        coords: [
          [100, 630],
          [680, 630],
          [680, 430],
          [100, 430]
        ]
      },
      {
        coords: [
          [160, 430],
          [160, 310],
          [760, 310],
          [760, 1000]
        ]
      },
      {
        coords: [
          [760, 310],
          [760, 50]
        ]
      },
      {
        coords: [
          [150, 330],
          [150, 100],
          [200, 100],
          [200, 390]
        ]
      },
      {
        coords: [
          [160, 310],
          [160, 200],
          [150, 200]
        ]
      },
      {
        coords: [
          [200, 200],
          [190, 200],
          [190, 450]
        ]
      },
      // line6
      {
        coords: [
          [100, 450],
          [670, 450],
          [670, 610],
          [140, 610]
        ]
      },
      // line7
      {
        coords: [
          [100, 470],
          [660, 470],
          [660, 590],
          [290, 590]
        ]
      },
      // line8
      {
        coords: [
          [230, 570],
          [650, 570],
          [650, 490],
          [100, 490]
        ]
      },
      {
        coords: [
          [250, 490],
          [250, 290],
          [750, 290],
          [750, 1000]
        ]
      },
      {
        coords: [
          [750, 290],
          [750, 50]
        ]
      },
      {
        coords: [
          [250, 290],
          [250, 100],
          [300, 100],
          [300, 470],
        ]
      },
      // 站场来油
      {
        coords: [
          [0, 100],
          [0, 840],
          [160, 840]
        ]
      },
      {
        coords: [
          [10, 100],
          [10, 610],
          [160, 610]
        ]
      },
      {
        coords: [
          [20, 100],
          [20, 590],
          [310, 590]
        ]
      },
      // 汽油凝液管
      {
        coords: [
          [740, 1000],
          [740, 270],
          [460, 270],
          [460, 100]
        ]
      },
      {
        coords: [
          [740, 50],
          [740, 270]
        ]
      },
      // 柴油凝液管
      {
        coords: [
          [730, 1000],
          [730, 250],
          [560, 250],
          [560, 100]
        ]
      },
      {
        coords: [
          [730, 50],
          [730, 250]
        ]
      },
      // 鹤管
      {
        coords: [
          [750, 950],
          [900, 950]
        ]
      },
      {
        coords: [
          [750, 870],
          [900, 870]
        ]
      },
      {
        coords: [
          [760, 790],
          [810, 790],
          [810, 770]
        ]
      },
      {
        coords: [
          [750, 770],
          [900, 770]
        ]
      },
      {
        coords: [
          [750, 690],
          [900, 690]
        ]
      },
      {
        coords: [
          [760, 590],
          [900, 590]
        ]
      },
      {
        coords: [
          [760, 510],
          [900, 510]
        ]
      },
      {
        coords: [
          [770, 410],
          [900, 410]
        ]
      },
      {
        coords: [
          [770, 330],
          [900, 330]
        ]
      },
      {
        coords: [
          [770, 230],
          [900, 230]
        ]
      },
      {
        coords: [
          [770, 150],
          [900, 150]
        ]
      },
    ]
  }
  // 把描点加入charts数组里面
  for (var j = 0; j < nodes.length; j++) {
    const {
      x,
      y,
      nodeName,
      svgPath,
      symbolSize,
      position
    } = nodes[j];
    var node = {
      nodeName,
      value: [x, y],
      symbolSize: symbolSize || 50,
      symbol: 'image://' + svgPath,
      itemStyle: {
        color: '#b2b2b2',
      },
      label: {
        position: position
      }
    }
    charts.nodes.push(node)
  }

  // 加载图表
  loadChart();

  function loadChart() {
    console.log(charts.nodes);
    option = {
      backgroundColor: "transparent",
      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: 'left',
          color: '#79B6FF',
          fontSize: 10,
          formatter: function (item) {
            return item.data.nodeName
          }
        },
        data: charts.nodes,
        silent: true
      }, {
        type: 'lines',  // 描线
        polyline: true,
        coordinateSystem: 'cartesian2d',
        lineStyle: {
          type: 'solid',
          width: 2,
          color: '#2950F1',
          curveness: 0.8
        },
        effect: {
          show: true,
          trailLength: 0.6,
          symbol: 'arrow',  // 箭头动画效果
          color: '#ffffff',
          period: 8,
          symbolSize: 4,
          constantSpeed: 50,  // 固定速度
        },
        data: charts.linesData
      }]
    };
    //使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //响应式图表
    window.onresize = myChart.resize;
  }

 

YLiu77
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
使用echarts创建流程图
mermanangel的博客
05-26 1万+
使用echarts创建流程图使用echarts创建流程图 使用echarts创建流程图 为了建立流程图，需要使用echarts的关系图组件，即type类型为‘graph’。 首先创建一个div，为echarts准备一个具备大小的Dom <div id="main" style="width: 900px;height:1500px;padding-left: 250px;"></div> <script type="text/javascript"> // 基
china.js，ECharts绘制地图
11-12
《ECharts绘制地图：以china.js为例》 在信息技术领域，数据可视化是至关重要的工具，它可以帮助我们理解和解析复杂的数据信息。ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、...
echarts 流程图
yangchuangxyz的博客
04-22 6084
先附图： 代码如下： let myCharts = echarts.init(document.getElementById("techCharts")); let charts = { nodes: [ // 节点 {name: '流程1',value: [0, 500]}, {name: '流程2',value: [150, 500]}, {name: '流程3',value: [300...
用echarts绘制流程图
liuli0927的博客
07-20 3522
当这两个流程图进行切换展示时，一定要使用v-show。
ECharts地理坐标系属性介绍
最新发布
2401_84150206的博客
05-10 855
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
echart流程图-工序及状态
yefeng1308的博客
09-17 1780
参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。后面上传一个DEMO.
ECharts关系图、流程图、导向图(详细示例——满满的注释)
陈新科的博客
12-22 9929
具体代码如下： init() { var myChart = this.$echarts.init(document.getElementById("main")); var option = { title: { // text: "流程", }, series: [ { type: "graph", //关系图 layout:...
河南省echarts地图资源
12-30
ECharts提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、散点图等，同时也支持地图图表，使得数据可视化的应用场景更加广泛。在本案例中，"河南省echarts地图资源"是一个专门针对河南省地图数据的ECharts...
Echarts重庆地图
03-23
ECharts 使用这种格式的数据来绘制出地图的形状和边界。JSON 数据通常由一系列行政区划的名称和对应的经纬度坐标组成，如 "name": "重庆市", "left": ..., "top": ..., 等。这些坐标数据被 ECharts 解析并渲染成可...
下载Echarts地图资源包
07-20
首先，我们要理解ECharts地图的使用流程。在ECharts中，使用地图主要涉及以下步骤： 1. 引入ECharts库：在HTML文件中，你需要引入ECharts的主JS文件（如`echarts.min.js`）以及对应的地图文件（如`china.js`或`...
Echarts水管图标
10-16
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，以及各种复杂交互和自定义选项。在本案例中，我们聚焦于"水管图标"，这是一种特殊的设计，用于模拟水流动态的可视...
canvas绘制的流程图
01-03
canvas绘制的流程图 未实现交互 可用于熟悉html5中的canvas
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动
weixin_44006009的博客
03-22 318
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动。
数据可视化高级技术Echarts(桑基图&入门)
m0_63181360的博客
04-15 2776
概述图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。桑基图最明显的特征就是，始末端的分支宽度总和相等，即所有主支宽度的总和应与所有分出去的分支宽度的总和相等，保持能量的平衡。：桑基图可以显示不同节点之间的流量量级，通过箭头的宽度来表示。：桑基图可以使用颜色来编码不同的节点或流动路径，以帮助用户更好地理解和区分不同的实体或类别。选择合适的布局方式，使得节点和箭头的排列有一定的逻辑性。：桑基图可以显示多个节点之间的复杂路径，通过连接不同的节点和箭头来表示。
vue echarts动态效果流水线流程图
weixin_44006009的博客
03-15 1066
vue echarts流程图流水线效果功能。
使用JSPlumb&ECharts绘制流程图（以参加会议为例）
qr457535344的博客
01-14 1798
1. JSPlumb 1). 效果图 2). 需要引入的JS文件： ① jquery-1.11.3.js，添加到和html文件同级目录下的JSFiles文件中，保证<script src="./JSFiles/jquery-1.11.3.js"></script>能够正常引用； ② jquery-ui.js，添加位置同上； ③ jquery.jsplumb.j...
【echarts】用地图模块做动态流程图2.0（根据后台数据自动均匀排布，且实时更新节点状态）
arminc的博客
08-09 6394
1.效果 2.说明 这个升级版几乎就是我们公司用的这个功能了，设计到的功能就是可以根据后台数据重新进行位置排布，且实时刷新节点的数据。用ec写出这个效果不难，参考demo1 这个主要是设计到如何根据数据进行重新排布，实时刷数据，这些都是ec插件没有的，需要我们去苦逼手写的。 3.代码： 3.1要知道的： 其实在敲代码前，就应该意识到和后台要的数据是什么样的，要知道我们是用地图模块实现...
如何使用echart的Graph图实现一个流程控制图
热门推荐
一步一个脚印
07-20 1万+
前言：最近接到一个新需求，需要写一个新模块，这个模块主要是用于查看当前每个生产计划的完成情况，然后所有的生产计划都列在了表格里，而流程控制图用于直观展示选中的生产计划的完成进度1、首先看一下这个生产计划的流程控制图大概的样子2、我们分析一下后端给出的数据接口（这是根据事先约定好的数据） data属性对应后台返回的数据，是一个数组，数组里面的元素对应流程控制图的每一个节点，id字段表示当前节点的id
ECharts使用步骤（五部曲）
qq_43494149的博客
07-08 2817
简介： 一个适应javascript实现的开源可视化库（js插件）。可以流畅的运行在PC端和移动端上，兼容当前大部分浏览器（ie8及以上），底层依赖矢量图形库ZRender，提供直观、交互丰富、可高度自定义化的数据可视化图表。 使用步骤（五部曲）： 1、下载并引入echarts.js文件 2、准备一个具备大小（确定宽高）div容器用来装图表 3、初始化echarts实例对象 ： echarts.init(dom容器) 4、指定配置项和数据（option） 5、将配置项设置给echarts实例对象

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值