Incubator-echarts: 在graph关系图中,categories->itemStyle->borderWidth等不生效,但是color是生效的。

Created on 19 Mar 2018  ·  3Comments  ·  Source: apache/incubator-echarts

One-line summary [问题简述]

我在使用引力关系图,graph时,遇到一个问题。当我配置categories分组时,设置的itemStyle属性,其中只有color生效了,borderWidth和shadow不生效,这是为什么?

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:4.0.4
  • Browser version [浏览器类型和版本]:chorm最新
  • OS Version [操作系统类型和版本]:windows10

Expected behaviour [期望结果]

ECharts option [ECharts配置项]


option ={
          series: [
            {
              type: "graph",
              layout: "force",// 引力布局
              force: {
                gravity: 0.05,// 引力因子
                repulsion: 1000,// 斥力因子
                edgeLength: [200, 360]// 两点之间的线长范围
              },// 引力参数
              symbol: "circle",// 节点图形
              roam: false,// 是否允许拖拽,缩放
              draggable: false,// 允许节点拖放
              focusNodeAdjacency: false,// hover节点,重点突出
              tooltip: {
                trigger: 'item',
                formatter: function (param) {
                  return '';
                },
              },// 提示框
              hoverAnimation: false,
              label: {
                show: true,
                position: "inside",
                textStyle: {
                  fontSize: 18
                }
              },// 文字标签内容
              lineStyle: {

                opacity: 0.9,
                width: 1,
                curveness: 0,
                color: '#000',
                type: 'dotted'
              },// 线的样式
              edgeLabel: {
                show: true,
                fontFamily: 'Ping Fang',
                fontSize: 12,
                formatter: function (param) {
                  const lan_type = param.data.lan_type === 0 ? '同城' : '全国';
                  // return param.data.city + '+' + lan_type:1;
                  return '北京+城域/10M+广域/100M';
                },
              }, // 线上的文字标签
              data: [
                {
                  draggable: true,
                  name: "AGOTOZ",
                  symbolSize: 120
                },
                {
                  name: "节点1",//  节点名称
                  category: "北京",
                  symbolSize: 60// 标签大小
                },
                {
                  name: "节点2",//  节点名称
                  category: "上海",
                  symbolSize: 90// 标签大小
                }
              ],// 数据渲染
              links: [
                {
                  source: "AGOTOZ",
                  target: "节点1",
                  city: '北京',// 节点所在城市,北京,上海,全国
                  lan_type: 0,// 网络类型,0同城,1全国
                  order_id: 110,// 网络节点ID(由节点和网络组织)
                  bandwidth: '10'
                },
                {
                  target: "AGOTOZ",
                  source: "节点2",
                  city: '北京的',// 节点所在城市,北京,上海,全国
                  lan_type: 0,// 网络类型,0同城,1全国
                  order_id: 110,// 网络节点ID(由节点和网络组织)
                  bandwidth: '10'

                }
              ],// 数据关系
              categories: [
                {
                  name: "北京",
                  itemStyle: {
                      borderWidth: 200,
                      borderColor: '#444',
                      borderType:'solid',
                      shadowColor: 'rgba(0, 0, 0, 0.5)',
                      shadowBlur: 10,
                      color: '#656391',
                      opacity:1
                  }
                },
                {
                  name: "上海",
                  itemStyle: {
                    color: '#38B1EB'
                  }
                },
                {
                  name: "广州",
                  itemStyle: {
                    color: '#E196FF',
                    borderColor: '#E196FF'
                  }
                }
              ]
            }
          ],
          tooltip: {},
          animation: true,// 是否开启动画
          animationEasingUpdate: 'quinticInOut',// 更新时动画效果
          animationDurationUpdate: 1500
        };

Other comments [其他信息]


11111

bug

Most helpful comment

is this a bug?

The series[i]-graph.data[i].category should be the index of certain category in categories.

So the code should be:

data: [
                {
                  draggable: true,
                  name: "AGOTOZ",
                  symbolSize: 120
                },
                {
                  name: "节点1",//  节点名称
                  category: 0,
                  symbolSize: 60// 标签大小
                },
                {
                  name: "节点2",//  节点名称
                  category: 1,
                  symbolSize: 90// 标签大小
                }
],// 数据渲染

Hope it helps.

All 3 comments

is this a bug?

@PandaTsui It can be written under series.itemStyle, that is, all nodes are added styles. If you want to add styles to a single node, write it down in series.data[idx].itemStyle.

is this a bug?

The series[i]-graph.data[i].category should be the index of certain category in categories.

So the code should be:

data: [
                {
                  draggable: true,
                  name: "AGOTOZ",
                  symbolSize: 120
                },
                {
                  name: "节点1",//  节点名称
                  category: 0,
                  symbolSize: 60// 标签大小
                },
                {
                  name: "节点2",//  节点名称
                  category: 1,
                  symbolSize: 90// 标签大小
                }
],// 数据渲染

Hope it helps.

Was this page helpful?
0 / 5 - 0 ratings