持續(xù)采坑中...
timg (1).jpeg
QQ20181024-185700-HD.gif
要實現(xiàn)上面的效果，需要一個了解下幾個函數(shù)
myChart.dispatchAction({type: 'downplay', seriesIndex: 1, dataIndex: beforeDefaultIndex });
myChart.dispatchAction({type: 'highlight',seriesIndex: 1,dataIndex: beforeDefaultIndex});//設(shè)置默認(rèn)選中高亮部分
myChart.dispatchAction({type: 'showTip',seriesIndex:1,dataIndex:beforeDefaultIndex});
然后才是option拼接第股，由于在echarts官方實例中话原，我無法拿到echarts實例對象繁仁，所以只能直接懟。因為之前的圖用這個函數(shù)不生效所以控漠，不太有信心盐捷。
話不多說直接上代碼,下面的是option對象
/**
* model轉(zhuǎn)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中的代碼
需要考慮是代碼控制的默認(rèn)選中碉渡，還是手觸發(fā)的點擊事件。兩個是有區(qū)別的
var myChart; //echarts表
var beforeDefaultIndex;//記錄之前的選中的點母剥。
function setOption(opt){//opt echarts option所需 isNeedDefault 是否需要默認(rèn)選中的
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){//添加默認(rèn)的選中
beforeDefaultIndex = currentIndex;
myChart.dispatchAction({type: 'highlight',seriesIndex: 1,dataIndex: beforeDefaultIndex});//設(shè)置默認(rèn)選中高亮部分
myChart.dispatchAction({type: 'showTip',seriesIndex:1,dataIndex:beforeDefaultIndex});
myChart.on('mouseover',function(e){//手觸發(fā)選中 如果不是那個點就把原來點取消
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});
});
}
