持续采坑中...
timg (1).jpeg
QQ20181024-185700-HD.gif
要实现上面的效果，需要一个了解下几个函数
myChart.dispatchAction({type: 'downplay', seriesIndex: 1, dataIndex: beforeDefaultIndex });
myChart.dispatchAction({type: 'highlight',seriesIndex: 1,dataIndex: beforeDefaultIndex});//设置默认选中高亮部分
myChart.dispatchAction({type: 'showTip',seriesIndex:1,dataIndex:beforeDefaultIndex});
然后才是option拼接，由于在echarts官方实例中，我无法拿到echarts实例对象，所以只能直接怼。因为之前的图用这个函数不生效所以，不太有信心。
话不多说直接上代码,下面的是option对象
/**
* model转chartOption
*/
- (NSDictionary *)chartOptionByModel{
self.timeAxis = @[@"1",@"2",@"3",@"4",@"5"].mutableCopy;
self.source = @[@"2",@"3",@"5",@"2",@"6"].mutableCopy;
NSArray *data = @[@[@"1",@"2"],
@[@"2",@"3"],
@[@"3",@"5"],
@[@"4",@"2"],
@[@"5",@"6"]];
NSDictionary * option = [NSDictionary dictionary];
option = @{
@"dataZoom":@{
@"type":@"inside"
},
@"tooltip":@{
@"trigger":@"axis",
@"axisPointer":@{
@"type":@"cross",
},
@"show":[NSNumber numberWithBool:true]
},
@"grid":@[@{
@"left":@"0px",
@"right":@"0px",
@"bottom":@"0px",
@"top":@"0px",
}],
@"xAxis":@[@{@"show":[NSNumber numberWithBool:true],
@"data":self.timeAxis,
@"splitLine":@{@"lineStyle":@{@"type":@"dashed"}},
@"splitNumber":@20
}],
@"yAxis":@[@{
@"show":[NSNumber numberWithBool:true],
@"type":@"value",
@"splitLine":@{@"lineStyle":@{@"type":@"dashed"}}
}],
@"series":@[
@{
@"type":@"line",
@"name": @"In",
@"smooth":[NSNumber numberWithBool:true],
@"showSymbol":[NSNumber numberWithBool:false],
@"data":data,
@"itemStyle":@{@"normal":@{@"color":@"#ffffff"}},
@"markPoint": @{
@"itemStyle": @{
@"normal": @{
@"color": @"transparent"
}
},
@"label": @{
@"normal": @{
@"show": [NSNumber numberWithBool:true],
@"position": @"left",
// formatter: myRegression.expression,
@"textStyle": @{
@"color": @"#333",
@"fontSize": @14
}
}
},
@"data": @[@{
@"coord": data[data.count - 1]
}]
},
@"lineStyle":@{
@"normal":@{
@"width":@"0.5",
@"color":@"#fff"
}
},
},
@{
@"name": @"scatter",
@"type": @"scatter",
@"itemStyle": @{
@"normal": @{
@"color": @"#ffffff",
@"borderColor":@"#ffffff"
}},
@"label": @{
@"emphasis": @{
@"show": [NSNumber numberWithBool:true],
@"position": @"left",
@"itemStyle": @{
@"normal": @{
@"color": @"#ffffff",
@"borderColor":@"#ffffff"
}
},
@"textStyle": @{
@"color": @"#fff",
@"fontSize": @16
}
}
},
@"data": data
}
]
};
return option;
}
重点在于 html中的代码
需要考虑是代码控制的默认选中，还是手触发的点击事件。两个是有区别的
var myChart; //echarts表
var beforeDefaultIndex;//记录之前的选中的点。
function setOption(opt){//opt echarts option所需 isNeedDefault 是否需要默认选中的
option = opt;
var echartsDom = document.getElementById('sc_chart');
echartsDom.removeAttribute("_echarts_instance_");
myChart = echarts.init(echartsDom);
myChart.setOption(option)；
window.addEventListener('resize', function () {
myChart.resize();
})
}
function setCancelBeforeIndex(){ //取消之前选中
myChart.dispatchAction({type: 'downplay', seriesIndex: 1, dataIndex: beforeDefaultIndex });
}
function setNeedDefault(currentIndex){//添加默认的选中
beforeDefaultIndex = currentIndex;
myChart.dispatchAction({type: 'highlight',seriesIndex: 1,dataIndex: beforeDefaultIndex});//设置默认选中高亮部分
myChart.dispatchAction({type: 'showTip',seriesIndex:1,dataIndex:beforeDefaultIndex});
myChart.on('mouseover',function(e){//手触发选中 如果不是那个点就把原来点取消
if(e.dataIndex != beforeDefaultIndex){
myChart.dispatchAction({type: 'downplay', seriesIndex: 1, dataIndex: beforeDefaultIndex });
}
});
myChart.on('mouseout',function(e){//手抬起的时候，把那个点选中
beforeDefaultIndex = e.dataIndex;
myChart.dispatchAction({type: 'highlight',seriesIndex: 1,dataIndex: e.dataIndex});
});
}