最近使用echarts做关系图可视化，官方文档配置搜索不太好用，费了老鼻子劲看配置。

官网入门示例

遇到的问题及处理方案：

地图 dispatchAction 使用 showTip tooltip无法显示

替换为低版本 3.8.0 已知bug,详情参考 issues

Tree自定义线条颜色&宽度

两种方案：

  • 找到引用的tree模块直接修改

  • js则修改 updateNode 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/ 使用中data[i]添加参数
myLinkStyle: [
 { 
  targetName: v.name,
  color,
  width
 }
]
// 修改部分 取myLinkStyle渲染
if (node.parentNode && node.parentNode !== virtualRoot) {
        var edge = symbolEl.__edge;
        if (!edge) {
          var tt = seriesScope.lineStyle;
          console.log('--node,node.parentNode.dataIndex,data._rawData._array--',data)
          var tempObj = data._rawData._data[node.parentNode.dataIndex]
          console.log(node.name,tempObj)
          if(tempObj.myLinkStyle && tempObj.myLinkStyle.length > 0) {
            var tempI = 0
            var nextStatus = tempObj.myLinkStyle.some(function(v,i) {
              tempI = i
              return v.targetName === node.name
            })
            if(nextStatus) {
              console.log(tempObj)
              tt.stroke = tempObj.myLinkStyle[tempI].color;
              tt.lineWidth = tempObj.myLinkStyle[tempI].width;
            }
          }
            edge = symbolEl.__edge = new BezierCurve({
                shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
                style: defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
            });
        }

        updateProps(edge, {
            shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
            style: {opacity: 1}
        }, seriesModel);

        group.add(edge);
    }

参考：
基于echarts 3.8.4 ，tree图，设置节点与节点之间连线的颜色，可以独立每条线分开设置

地图放大缩小时显示/隐藏 标注

监听onscroll无果,找到了API georoam事件,事件返回的zoom值不太准确
建议手动 getOption获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// zoom 
let zoom = myChart.getOption().geo[0].zoom
// 滚动
myChart.on('georoam', params => {})
// 控制标注显示
myChart.setOption({
  series: [{
    label: {
      normal: {
        show: zoom > 2
      }
    }
  }]
})

tooltip无法显示

经历了N分钟的配置项文档遨游以后,找到原因: 挂载dom不能为canvas

图表缓存？数据未清空

手动清空数据不如试试 myEchart.clear()

图表大小问题

更改挂载节点的宽高,然后 myEchart.resize()

自定义各种样式

大兄弟,formatter了解一下

事件

1
2
3
4
5
6
let myChart2 = this.$echarts.init(document.getElementById('test2'))
/* 点击事件 */
myChart2.on('click', params => {})
myChart2.on('dblclick', params => { })
/* Canvas自适应宽度 */
window.onresize = () => { myChart2.resize() }