echart绘制关系图、拓扑图

最新推荐文章于 2025-09-22 00:00:00 发布

原创

最新推荐文章于 2025-09-22 00:00:00 发布 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts关系图 #vue

博主因画流程图需求，在ECharts官网看到简单关系图案例，指出原案例按坐标定位节点在开发中不易实现，改进用force布局实现功能。还提及Vue引入ECharts方法，以及links指向依据。最后认为用D3画流程图更合适。

今天有个画流程图的需求，在echarts官网上看到了一个简单关系图的案例，链接如下：
https://echarts.apache.org/examples/zh/editor.html?c=graph-simple
这个是个简单的例子，节点是根据坐标来的，在现实的开发中不太容易实现，毕竟找坐标是很麻烦的，根据改进可以用force布局，实现了功能，贴下代码：

    initCharts(chartList, linkList) {
      let self = this
      let myChart = this.echarts.init(this.$refs.echarts)
      console.log(this.$refs.chart) // 绘制图表
      let option = {
        title: {
           text: 'echarts-title',
         },

        tooltip: {
          show: true,
          backgroundColor: '#FFF',
          borderColor: '#C3CBD6',
          borderWidth: 1,
          axisPointer: { lineStyle: { color: '#C3CBD6' } },
          padding: [0, 10],
          /*设置x轴左右固定，上下跟随。*/
          position: function (point, params, dom, rect, size) {
            return [0, point[1]]
          },
          formatter: function (params, ticket, callback) {
            return (
              '<span style="color: #657180; display:inline-block; margin-left: 8px; word-wrap: bre

最低0.47元/天解锁文章