echarts关系图改造+color自定义

原莱_

已于 2022-01-21 11:07:32 修改

阅读量2.1k

点赞数 1

分类专栏： vue 文章标签： ECharts 节点颜色图形图例数据驱动颜色映射

于 2021-11-11 11:29:54 首次发布

本文链接：https://blog.csdn.net/qq_40934617/article/details/121264522

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

echats节点设置不同颜色

this.$nextTick(()=>{
  var chartDom = document.getElementById('echartshow');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        type: 'graph',
        layout: 'none',
        symbolSize: [60,25],//节点宽高
        symbolOffset:[10,0],//（箭头偏移）发现改为矩形并设置宽高后，遮盖了部分箭头，以此来消除影响
        roam: true,
        label: {
          show: true
        },
        symbol:'rect',//节点形状矩形。其他枚举：circle,rect,roundRect,triangle,diamond,pin,arrow,none
        edgeSymbol: ['circle', 'arrow'],//箭头形状 
        edgeSymbolSize: [2, 6],//箭头两端图尺寸
        edgeLabel: {
          fontSize: 20
        },
        itemStyle: {
          shadowBlur: 9,
          shadowOffsetX: 1.5,
          shadowOffsetY: 3,
          shadowColor: '#555',
          normal:{//不同节点显示不同颜色
            color: function(params) {
              return params.data.colors    //获取具体的参数
            },
          }
        },
        data: [
          {
            name: 'Node 1',
            x: 300,
            y: 300,
            colors:'#333'
          },
          {
            name: 'Node 2',
            x: 650,
            y: 300,
            colors:'#600'
          },
          {
            name: 'Node 5',
            x: 650,
            y: 400,
            colors:'#897'
          },
          {
            name: 'Node 6',
            x: 650,
            y: 500,
            colors:'#004'
          },
          {
            name: 'Node 7',
            x: 950,
            y: 300,
            colors:'#234'
          },
          {
            name: 'Node 8',
            x: 1200,
            y: 300,
            colors:'#520'
          },
        ],
        links: [
          {
            source: 'Node 1',
            target: 'Node 2',
          },
          {
            source: 'Node 2',
            target: 'Node 7',
          },
          {
            source: 'Node 5',
            target: 'Node 7'
          },
          {
            source: 'Node 6',
            target: 'Node 7'
          },
          {
            source: 'Node 7',
            target: 'Node 8'
          }
        ],
        lineStyle: {//箭头线条透明度、宽度以及弯曲度
          opacity: 0.9,
          width: 2,
          curveness: 0
        }
      }
    ]
  };
  option && myChart.setOption(option);
})