search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.48k stars 19.62k forks source link

[Feature] echarts-graph.emphasis Display node name and value #16235

Closed world1103 closed 10 months ago

world1103 commented 2 years ago

What problem does this feature solve?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="static/apache-echarts/echarts-min-5.2.2.js"></script>
</head>

<body>
    <div id="main" style="width: 1400px;height:730px;"></div>
</body>

<script type="text/javascript">
  var nodes = [
    {id:"1", name:"尿素喷嘴控制线路故障 - 开路", value:6650, symbolSize:66.50,category:0},
    {id:"2", name:"初级驾驶性能限制系统激活 - 扭矩限制", value:6650, symbolSize:66.50,category:1},
    {id:"3", name:"定量给料中断激活初级驾驶性能限制系统", value:5619, symbolSize:56.19,category:0},
    {id:"4", name:"通讯故障 - 接收后NOx传感器报文超时（AT1OG1）", value:2573, symbolSize:25.73,category:0},
    {id:"5", name:"通讯故障 - 接收尿素泵控制信息报文超时（F2D1）", value:2212, symbolSize:22.12,category:0},
    {id:"6", name:"通讯故障 - 接收尿素泵故障信息报文超时（F2D4）", value:2212, symbolSize:22.12,category:0},
    {id:"7", name:"通讯故障 - 接收DOC前后排温传感器报文超时（A1DOC）", value:2116, symbolSize:21.16,category:0},
    {id:"8", name:"通讯故障 - 接收SCR前后排温传感器报文超时（A1SCREGT1）", value:2116, symbolSize:21.16,category:0},
    {id:"9", name:"远程油门一路线路故障-对地短路", value:1680, symbolSize:16.80,category:4},
    {id:"10", name:"远程油门二路线路故障-对地短路", value:1680, symbolSize:16.80,category:4},
    {id:"11", name:"通讯故障 - 接收前NOx传感器报文超时（AT1IG1）", value:1536, symbolSize:15.36,category:0},
    {id:"12", name:"初级驾驶性能限制系统激活(OBD限扭矩激活)", value:1412, symbolSize:14.12,category:0},
    {id:"13", name:"颗粒捕集器(DPF)吸附颗粒过载", value:1412, symbolSize:14.12,category:0},
    {id:"14", name:"监测系统/排放后处理器A类故障激活初级驾驶性能限制系统", value:1340, symbolSize:13.40,category:0},
    {id:"15", name:"温度传感器合理性互校验故障2-机油温不合理", value:1333, symbolSize:13.33,category:5},
    {id:"16", name:"温度传感器合理性互校验故障1-水温不合理", value:1333, symbolSize:13.33,category:5},
    {id:"17", name:"通讯故障 - 接收尿素泵状态信息报文超时（F2D3）", value:1203, symbolSize:12.03,category:0},
    {id:"18", name:"SCR转换效率低-被动监控", value:1124, symbolSize:11.24,category:0},
    {id:"19", name:"监测系统或排放后处理器A类故障诱导激活-驾驶系统激活", value:1124, symbolSize:11.24,category:0},
    {id:"20", name:"通讯故障-下游NOx传感器(AT1OG1报文)接收超时", value:1100, symbolSize:11.00,category:0},
    {id:"21", name:"通讯故障-上游NOx传感器(AT1IG1报文)接收超时", value:1100, symbolSize:11.00,category:0},
    {id:"22", name:"通讯故障-DOC前后排温信号(A1DOC)接收超时", value:1086, symbolSize:10.86,category:0},
    {id:"23", name:"通讯故障-SCR前后排温信号(A1SCREGT1)接收超时", value:1086, symbolSize:10.86,category:0},
    {id:"24", name:"严重驾驶性能限制系统激活 - 车速限制", value:1045, symbolSize:10.45,category:1},
    {id:"25", name:"监测系统/排放后处理器A类故障激活严重驾驶性能限制系统", value:1045, symbolSize:10.45,category:0},
    {id:"26", name:"上游NOx传感器母故障（CAN）", value:970, symbolSize:9.70,category:0},
    {id:"27", name:"上游NOx传感器加热器开路故障（CAN）", value:970, symbolSize:9.70,category:0},
    {id:"28", name:"高压EGR压差传感器故障 - EGR压差静态值偏移不合理", value:778, symbolSize:7.78,category:6},
    {id:"29", name:"尿素液位低诱导激活-警报系统激活", value:627, symbolSize:6.27,category:0},
    {id:"30", name:"尿素液位低于1级限值故障", value:627, symbolSize:6.27,category:0},
    {id:"31", name:"燃油含水或传感器开路或对电源短路", value:612, symbolSize:6.12,category:5},
    {id:"32", name:"智能EGR阀-温度传感器超高限故障", value:612, symbolSize:6.12,category:6},
    {id:"33", name:"通讯故障-仪表转速车速信息(TCO1报文)接收超时", value:582, symbolSize:5.82,category:4},
    {id:"34", name:"来自CAN报文的车速信号错误或接收超时", value:582, symbolSize:5.82,category:4},
    {id:"35", name:"尿素液位低 - 3级（罐空限车速）", value:580, symbolSize:5.80,category:0},
    {id:"36", name:"通讯故障-尿素液位、温度(AT1T1I报文)接收超时", value:557, symbolSize:5.57,category:0},
    {id:"37", name:"通讯故障-尿素品质传感器(A1DEFI)接收超时", value:557, symbolSize:5.57,category:0},
    {id:"38", name:"定量给料中断激活严重驾驶性能限制系统", value:556, symbolSize:5.56,category:0},
    {id:"39", name:"DPF堵塞故障", value:513, symbolSize:5.13,category:0},
    {id:"40", name:"DPF拆除故障", value:494, symbolSize:4.94,category:0},
    {id:"41", name:"远程油门第二路位置信号故障 - 对地短路或开路", value:482, symbolSize:4.82,category:4},
    {id:"42", name:"远程油门第一路位置信号故障 - 对地短路或开路", value:482, symbolSize:4.82,category:4},
    {id:"43", name:"尿素泵尿素压力过低", value:415, symbolSize:4.15,category:0},
    {id:"44", name:"尿素泵建压失败", value:415, symbolSize:4.15,category:0},
    {id:"45", name:"下游氮氧传感器线路故障-短路", value:365, symbolSize:3.65,category:0},
    {id:"46", name:"下游氮氧传感器加热线路故障-短路", value:365, symbolSize:3.65,category:0},
    {id:"47", name:"下游NOx传感器短路故障（CAN）", value:321, symbolSize:3.21,category:0},
    {id:"48", name:"下游NOx传感器母故障（CAN）", value:321, symbolSize:3.21,category:0},
    {id:"49", name:"下游NOx传感器二元λ短路故障（CAN）", value:321, symbolSize:3.21,category:0},
    {id:"50", name:"主副刹车开关信号合理性故障", value:314, symbolSize:3.14,category:4},
    {id:"51", name:"尿素回液管电加热管路的激活端对地短路", value:313, symbolSize:3.13,category:0},
    {id:"52", name:"尿素进液管电加热管路的激活端对地短路", value:313, symbolSize:3.13,category:0},
    {id:"53", name:"高压EGR驱动桥故障 - 对地短路(HB反向)", value:309, symbolSize:3.09,category:6},
    {id:"54", name:"高压EGR驱动桥故障 - 对地短路(HB顺向)", value:309, symbolSize:3.09,category:6},
    {id:"55", name:"尿素浓度低激活严重驾驶性能限制系统", value:305, symbolSize:3.05,category:0},
    {id:"56", name:"尿素喷射管电加热管路开路", value:304, symbolSize:3.04,category:0},
    {id:"57", name:"尿素回液管电加热管路开路", value:304, symbolSize:3.04,category:0},
    {id:"58", name:"尿素进液管电加热管路开路", value:302, symbolSize:3.02,category:0},
    {id:"59", name:"颗粒捕捉器上游温度传感器合理性故障", value:300, symbolSize:3.00,category:0},
    {id:"60", name:"氧化催化器(DOC)上游温度传感器合理性故障", value:300, symbolSize:3.00,category:0},
    {id:"61", name:"环境温度传感器线路故障-对电源短路或开路", value:297, symbolSize:2.97,category:6},
    {id:"62", name:"监测系统或排放后处理器A类故障诱导激活-限扭激活", value:294, symbolSize:2.94,category:0},
    {id:"63", name:"燃油计量阀油压控制失败 - 轨压过高时，燃油计量阀全关仍无改善（大油量需求时）", value:294, symbolSize:2.94,category:5},
    {id:"64", name:"轨压控制偏差故障 - （需求-反馈）差值低于负极限", value:294, symbolSize:2.94,category:5},
    {id:"65", name:"反应剂质量诱导激活-警报系统激活", value:286, symbolSize:2.86,category:0},
    {id:"66", name:"通讯故障 - 接收尿素液位和温度传感器报文超时（AT1T1I1）", value:286, symbolSize:2.86,category:0},
    {id:"67", name:"尿素品质传感器浓度偏差大故障", value:286, symbolSize:2.86,category:0},
    {id:"68", name:"通讯故障 - 接收尿素品质传感器报文超时（A1DEFI1）", value:286, symbolSize:2.86,category:0},
    {id:"69", name:"轨压控制偏差故障 - （需求-反馈）差值高于正极限", value:274, symbolSize:2.74,category:5},
    {id:"70", name:"燃油计量阀油压控制失败 - 轨压过低时，燃油计量阀全开仍无改善（大油量需求时）", value:274, symbolSize:2.74,category:5},
    {id:"71", name:"下游氮氧传感器加热故障-加热缓慢", value:268, symbolSize:2.68,category:0},
    {id:"72", name:"上游氮氧传感器加热故障-加热缓慢", value:268, symbolSize:2.68,category:0},
    {id:"73", name:"DPF过载警示（基于压差）", value:251, symbolSize:2.51,category:0},
    {id:"74", name:"DPF堵塞警示（基于压差）", value:251, symbolSize:2.51,category:0},
    {id:"75", name:"高压EGR冷却器冷却效率过低", value:217, symbolSize:2.17,category:6},
    {id:"76", name:"NOx转化效率低 - 排放超OBD限值", value:208, symbolSize:2.08,category:0},
    {id:"77", name:"DPF压差传感器线路故障 - 开路或对电源短路", value:208, symbolSize:2.08,category:0},
    {id:"78", name:"下游NOx传感器加热器开路故障（CAN）", value:206, symbolSize:2.06,category:0},
    {id:"79", name:"尿素液位低 - 2级（限扭矩）", value:205, symbolSize:2.05,category:0},
    {id:"80", name:"水加热电磁阀控制线路故障 - 开路", value:202, symbolSize:2.02,category:0},
    {id:"81", name:"来自CAN报文(AMB)的环境温度信号错误或接收超时", value:196, symbolSize:1.96,category:4},
    {id:"82", name:"辅助制动蝶阀控制线路故障 - 开路（普适版）", value:180, symbolSize:1.80,category:4},
    {id:"83", name:"尿素泵尿素压力过高", value:176, symbolSize:1.76,category:0},
    {id:"84", name:"定量给料中断诱导激活-警报系统激活", value:171, symbolSize:1.71,category:0},
    {id:"85", name:"高压EGR温度传感器故障 - 开路或对电源短路（文丘里）", value:171, symbolSize:1.71,category:6},
    {id:"86", name:"上游NOx传感器加热器短路故障（CAN）", value:163, symbolSize:1.63,category:0},
    {id:"87", name:"尿素液位低 - 1级（报警）", value:159, symbolSize:1.59,category:0},
    {id:"88", name:"尿素泵电机总成堵转故障", value:149, symbolSize:1.49,category:0},
    {id:"89", name:"中冷器出口温度合理性故障 - 模型值与测量值偏差过大", value:149, symbolSize:1.49,category:6},
    {id:"90", name:"下游NOx传感器开路故障（CAN）", value:146, symbolSize:1.46,category:0},
    {id:"91", name:"下游NOx传感器二元λ开路故障（CAN）", value:146, symbolSize:1.46,category:0},
    {id:"92", name:"预热继电器控制线路故障 - 开路", value:145, symbolSize:1.45,category:5},
    {id:"93", name:"EGR冷却器故障-冷却效率低", value:140, symbolSize:1.40,category:6},
    {id:"94", name:"通讯故障-车辆环境信息报文(AMB)接收超时", value:138, symbolSize:1.38,category:4},
    {id:"95", name:"喷射管电加热继电器控制线路故障 - 开路", value:138, symbolSize:1.38,category:0},
    {id:"96", name:"高压EGR流量过高故障 - 被动监控", value:137, symbolSize:1.37,category:6},
    {id:"97", name:"轨压过低 - 低于最小喷射轨压", value:137, symbolSize:1.37,category:5},
    {id:"98", name:"严重驾驶性能限制系统激活(OBD限车速激活)", value:135, symbolSize:1.35,category:1},
    {id:"99", name:"上游NOx传感器短路故障（CAN）", value:128, symbolSize:1.28,category:0},
    {id:"100", name:"上游NOx传感器二元λ短路故障（CAN）", value:128, symbolSize:1.28,category:0},
    {id:"101", name:"尿素罐加热继电器故障-开路", value:127, symbolSize:1.27,category:0},
    {id:"102", name:"DPF压差传感器线路故障 - 对地短路", value:121, symbolSize:1.21,category:0},
    {id:"103", name:"高压EGR压力传感器故障 - 对地短路（文丘里）", value:115, symbolSize:1.15,category:6},
    {id:"104", name:"尿素泵压力传感器线路故障-对地短路", value:112, symbolSize:1.12,category:0},
    {id:"105", name:"主油门第二路位置信号故障 - 对地短路或开路", value:110, symbolSize:1.10,category:4},
    {id:"106", name:"尿素罐尿素浓度低", value:110, symbolSize:1.10,category:0},
    {id:"107", name:"DPF压差传感器故障 - DPF压差静态值偏移不合理", value:107, symbolSize:1.07,category:0}
  ]

  var links = [
    {source: "1", target: "2"},
    {source: "3", target: "2"},
    {source: "4", target: "2"},
    {source: "6", target: "5"},
    {source: "8", target: "7"},
    {source: "10", target: "9"},
    {source: "4", target: "11"},
    {source: "11", target: "2"},
    {source: "13", target: "12"},
    {source: "14", target: "2"},
    {source: "15", target: "16"},
    {source: "6", target: "17"},
    {source: "19", target: "18"},
    {source: "20", target: "21"},
    {source: "23", target: "22"},
    {source: "17", target: "5"},
    {source: "25", target: "24"},
    {source: "26", target: "27"},
    {source: "12", target: "18"},
    {source: "28", target: "2"},
    {source: "3", target: "24"},
    {source: "12", target: "19"},
    {source: "1", target: "28"},
    {source: "3", target: "1"},
    {source: "2", target: "24"},
    {source: "11", target: "4"},
    {source: "29", target: "30"},
    {source: "2", target: "3"},
    {source: "21", target: "20"},
    {source: "31", target: "32"},
    {source: "33", target: "34"},
    {source: "14", target: "35"},
    {source: "36", target: "37"},
    {source: "1", target: "38"},
    {source: "13", target: "39"},
    {source: "19", target: "40"},
    {source: "41", target: "42"},
    {source: "23", target: "21"},
    {source: "23", target: "20"},
    {source: "8", target: "11"},
    {source: "44", target: "43"},
    {source: "12", target: "39"},
    {source: "19", target: "12"},
    {source: "14", target: "4"},
    {source: "21", target: "22"},
    {source: "20", target: "22"},
    {source: "11", target: "7"},
    {source: "45", target: "46"},
    {source: "38", target: "24"},
    {source: "47", target: "49"},
    {source: "48", target: "47"},
    {source: "48", target: "49"},
    {source: "1", target: "50"},
    {source: "52", target: "51"},
    {source: "54", target: "53"},
    {source: "55", target: "24"},
    {source: "57", target: "56"},
    {source: "58", target: "56"},
    {source: "59", target: "60"},
    {source: "19", target: "61"},
    {source: "64", target: "63"},
    {source: "62", target: "12"},
    {source: "67", target: "65"},
    {source: "68", target: "66"},
    {source: "35", target: "14"},
    {source: "69", target: "70"},
    {source: "35", target: "2"},
    {source: "71", target: "72"},
    {source: "38", target: "3"},
    {source: "66", target: "2"},
    {source: "68", target: "2"},
    {source: "12", target: "13"},
    {source: "37", target: "36"},
    {source: "73", target: "74"},
    {source: "8", target: "4"},
    {source: "31", target: "56"},
    {source: "11", target: "6"},
    {source: "3", target: "38"},
    {source: "8", target: "2"},
    {source: "67", target: "12"},
    {source: "66", target: "68"},
    {source: "4", target: "7"},
    {source: "7", target: "8"},
    {source: "76", target: "77"},
    {source: "48", target: "78"},
    {source: "35", target: "79"},
    {source: "5", target: "6"},
    {source: "80", target: "2"},
    {source: "33", target: "81"},
    {source: "6", target: "2"},
    {source: "7", target: "2"},
    {source: "65", target: "12"},
    {source: "79", target: "35"},
    {source: "31", target: "18"},
    {source: "83", target: "44"},
    {source: "28", target: "50"},
    {source: "84", target: "12"},
    {source: "12", target: "40"},
    {source: "26", target: "86"},
    {source: "75", target: "85"},
    {source: "44", target: "87"},
    {source: "87", target: "43"},
    {source: "8", target: "17"},
    {source: "83", target: "43"},
    {source: "17", target: "7"},
    {source: "23", target: "37"},
    {source: "11", target: "8"},
    {source: "14", target: "11"},
    {source: "23", target: "36"},
    {source: "44", target: "89"},
    {source: "88", target: "44"},
    {source: "65", target: "67"},
    {source: "2", target: "1"},
    {source: "90", target: "91"},
    {source: "81", target: "12"},
    {source: "81", target: "19"},
    {source: "66", target: "92"},
    {source: "2", target: "50"},
    {source: "5", target: "17"},
    {source: "14", target: "38"},
    {source: "31", target: "19"},
    {source: "93", target: "39"},
    {source: "44", target: "88"},
    {source: "88", target: "89"},
    {source: "37", target: "22"},
    {source: "32", target: "57"},
    {source: "32", target: "31"},
    {source: "33", target: "94"},
    {source: "95", target: "2"},
    {source: "79", target: "87"},
    {source: "97", target: "69"},
    {source: "96", target: "64"},
    {source: "48", target: "91"},
    {source: "90", target: "48"},
    {source: "36", target: "22"},
    {source: "12", target: "98"},
    {source: "35", target: "87"},
    {source: "92", target: "8"},
    {source: "99", target: "100"},
    {source: "95", target: "4"},
    {source: "3", target: "14"},
    {source: "19", target: "81"},
    {source: "76", target: "102"},
    {source: "31", target: "57"},
    {source: "20", target: "19"},
    {source: "9", target: "10"},
    {source: "22", target: "23"},
    {source: "103", target: "77"},
    {source: "14", target: "25"},
    {source: "104", target: "12"},
    {source: "94", target: "81"},
    {source: "21", target: "19"},
    {source: "106", target: "2"},
    {source: "105", target: "77"},
    {source: "74", target: "77"},
    {source: "20", target: "36"},
    {source: "28", target: "107"},
    {source: "20", target: "37"},
    {source: "84", target: "104"},
    {source: "76", target: "82"},
    {source: "82", target: "77"},
    {source: "74", target: "73"},
    {source: "73", target: "77"},
    {source: "11", target: "66"},
    {source: "34", target: "33"},
    {source: "96", target: "1"},
    {source: "11", target: "92"},
    {source: "21", target: "37"},
    {source: "5", target: "8"},
    {source: "21", target: "36"},
    {source: "3", target: "107"},
    {source: "10", target: "65"},
    {source: "9", target: "65"},
    {source: "34", target: "81"},
    {source: "66", target: "8"},
    {source: "22", target: "21"},
    {source: "105", target: "103"}
  ]

  var categories = [
    {name: "后处理系统"},
    {name: "控制系统"},
    {name: "政策系统"},
    {name: "整车功能"},
    {name: "整车系统"},
    {name: "燃油系统"},
    {name: "空气系统"}
  ]

  nodes.forEach(function (node) {
    node.label = {
      show: node.symbolSize > 20
    };
  });

  option = {
    title: {
      text: '伴生故障',
      subtext: 'Circular layout',
      top: 'bottom',
      left: 'right'
    }, //标题
    tooltip: {},
    legend: [
      {
        data: categories.map(function (a) {
          return a.name;
        })
      }
    ],//图例
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        name: '伴生故障',
        type: 'graph',
        layout: 'circular',
        circular: {
          rotateLabel: true
        },
        data: nodes, //节点
        links: links, //节点关系
        categories: categories, //轴分类
        roam: true, //是否开启鼠标缩放和平移漫游
        legendHoverLink: false, //是否启用图例 hover 时的联动高亮
        label: {
          position: 'right',
          formatter: '{b}'
        },
        lineStyle: {
          color: 'source',
          curveness: 0.3
        },
        emphasis: {
          focus: 'adjacency',
          lineStyle: {
            width: 10
          }
        }//悬停淡化周边
      }
    ]
  };

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))
  myChart.showLoading();
  myChart.hideLoading();
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
</script>

</html>

What does the proposed API look like?

I have a graph chart。 Set symbolSize>30 to display the node name，code show as below ： nodes.forEach(function (node) { node.label = { show: node.symbolSize > 20 }; });

Emphasis is set to highlight graphics ，code show as below ： emphasis: { focus: 'adjacency', lineStyle: { width: 10 } }

When hovering the mouse, the related associated node will be highlighted, but the related node name is not displayed。 How can I display the node name while highlighting the node? And I don't want to display all the node names, because there are too many nodes.

Ovilia commented 2 years ago

Please make your code minimal.

Ovilia commented 2 years ago

Please make your code minimal.

echarts-bot[bot] commented 2 years ago

@world1103 Please provide a demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , https://www.makeapie.com/editor.html or https://codesandbox.io/s/mystifying-bash-2uthz.

github-actions[bot] commented 10 months ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 10 months ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!