<!-- 为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。 -->
### One-line summary [问题简述]
graph流程图点击某个节点时，希望此节点发生颜色变化，当点击其他节点时，刚才的节点恢复默认颜色，这次点击的节点颜色改变成期望的颜色
### Version & Environment [版本及环境]
+ ECharts version [ECharts 版本]:2.0
+ Browser version [浏览器类型和版本]:
+ OS Version [操作系统类型和版本]:
### Expected behaviour [期望结果]
graph流程图点击某个节点时，希望此节点发生颜色变化，当点击其他节点时，刚才的节点恢复默认颜色，这次点击的节点颜色改变成期望的颜色
### ECharts option [ECharts配置项]
<!-- Copy and paste your 'echarts option' here. -->
<!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的
option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
```javascript
var drawForceChart = function(){
var forceOption = {
tooltip: {
trigger: 'item',
formatter: function(para){
return para.name;
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
textStyle: {
color:'#000'
},
series : [
{
type: 'graph',
tooltip: {
backgroundColor:'skyblue',
// formatter: "{b} <br/>{a} : {c} h "
},
layout: 'none',
symbolSize: 10,
roam: false,
label: {
normal: {
show: true,
position: 'inside',
//offset: [0,-60],//居上 20
textStyle: {
fontSize: 12
},
formatter:function(para){
if(para.name == '回收商收货' || para.name == '回收商退货'){
//console.log(para.name.substring(0,3)+'\n'+para.name.substring(3,5));
return
para.name.substring(0,3)+'\n'+para.name.substring(3,5);
}else if(para.name == '理货暂存' || para.name == '门店仓库'
|| para.name == '隐私清除' || para.name == '用户退货' || para.name == '质量抽检' ||
para.name == '退货质检' || para.name == '仓库抽检' || para.name == '退货审核'){
//console.log(para.name.substring(0,2)+'\n'+para.name.substring(2,4));
return
para.name.substring(0,2)+'\n'+para.name.substring(2,4);
}else{
return para.name;
}
}
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 18
}
}
},
data: [
{
name: '提交',
x: 100,
y: 300,
value:'提交',
//symbol:'rect', //让节点为矩形显示
symbolSize: 50,//节点的长和宽
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '发货',
x: 200,
y: 300,
//symbol:'rect',
symbolSize: 50,
value:'发货',
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '收货',
x: 300,
y: 300,
value:'收货',
//symbol:'rect',
symbolSize: [50, 50],
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '质检',
x: 400,
y: 300,
//symbol:'rect',
symbolSize: [50, 50],
value:'质检',
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '理货暂存',
x: 500,
y: 300,
value:'理货暂存',
//symbol:'rect',
symbolSize: [50, 50],
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '入库',
x: 600,
y: 300,
value:'入库',
//symbol:'rect',
symbolSize: [50, 50],
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '库存',
x: 700,
y: 300,
value:'库存',
//symbol:'rect',
symbolSize: [50, 50],
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '竞拍',
x: 800,
y: 300,
value:'竞拍',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '付款',
x: 900,
y: 300,
value:'付款',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '出库',
x: 1000,
y: 300,
value:'出库',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '回收商收货',
x: 1100,
y: 300,
value:'回收商收货',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '结束',
x: 1200,
y: 300,
value:'结束',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '取货',
x: 150,
y: 200,
value:'取货',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '门店仓库',
x: 150,
y: 400,
value:'门店仓库',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '异常',
x: 350,
y: 200,
value:'门店仓库',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '隐私清除',
x: 450,
y: 200,
value:'隐私清除',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '用户退货',
x: 450,
y: 400,
value:'用户退货',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '退货质检',
x: 550,
y: 400,
value:'退货质检',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '质量抽检',
x: 550,
y: 200,
value:'质量抽检',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '维修',
x: 650,
y: 200,
value:'维修',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '仓库抽检',
x: 750,
y: 200,
value:'仓库抽检',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '退货审核',
x: 900,
y: 400,
value:'退货审核',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '回收商退货',
x: 1000,
y: 400,
value:'回收商退货',
//symbol:'rect',
symbolSize: 50,
itemStyle: {
normal: {
color: '#399'
}
}
}
],
// links: [],
links: [
{
source: '提交',
target: '发货'
},
{
source: '发货',
target: '收货'
},
{
source: '收货',
target: '质检'
},
{
source: '质检',
target: '理货暂存'
},
{
source: '理货暂存',
target: '入库'
},
{
source: '入库',
target: '库存'
},
{
source: '库存',
target: '竞拍'
},
{
source: '竞拍',
target: '付款'
},
{
source: '付款',
target: '出库'
},
{
source: '出库',
target: '回收商收货'
},
{
source: '回收商收货',
target: '结束'
},
{
source: '提交',
target: '取货'
},
{
source: '提交',
target: '门店仓库'
},
{
source: '取货',
target: '发货'
},
{
source: '门店仓库',
target: '发货'
},
{
source: '收货',
target: '异常'
},
{
source: '异常',
target: '质检'
},
{
source: '理货暂存',
target: '隐私清除'
},
{
source: '理货暂存',
target: '用户退货'
},
{
source: '理货暂存',
target: '质量抽检'
},
{
source: '质量抽检',
target: '入库'
},
{
source: '退货质检',
target: '理货暂存'
},
{
source: '库存',
target: '维修'
},
{
source: '库存',
target: '仓库抽检'
},
{
source: '仓库抽检',
target: '库存'
},
{
source: '维修',
target: '仓库抽检'
},
{
source: '退货审核',
target: '退货质检'
},
{
source: '回收商退货',
target: '退货审核'
},
{
source: '出库',
target: '回收商退货'
}
],
lineStyle: {
normal: {
opacity: 0.9,
color:'#53B5EA',
type: 'dashed',
width: 1
}
}
}
]
};
var forceChart = echarts.init(document.getElementById('forceChart'));
forceChart.setOption(forceOption);
forceChart.on('click', function (handler,context){
console.log(handler);
//console.log(handler.data.name);
handler.data.itemStyle.normal.color = "#1b9acf";
handler.color = "#1b9acf";
handler.resize;
if(forceMap.has(handler.data.name)){
var modelName = forceMap.get(handler.data.name);
switchToShow(modelName);
callModelFun('draw'+modelName.substring(0,1).toLocaleUpperCase()+modelName.substring(1,modelName.length));
}
//获取节点点击的数组序号
//var arrayIndex = handler.dataIndex;
//获取数据
//var urlParam = responseData.data.date[arrayIndex];
});
window.addEventListener('resize',forceChart.resize);
};
var forceMap = new Map();
var initForceMap = function(){
forceMap.set('维修','repair');
forceMap.set('仓库抽检','randomInspection');
};
```
### Other comments [其他信息]
<!-- For example: Screenshot or Online demo -->
<!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
[ Full content available at:
https://github.com/apache/incubator-echarts/issues/8982 ]
This message was relayed via gitbox.apache.org for [email protected]
