<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
<p id="p">1001</p>
<script type="text/javascript" src="js/echarts3.js"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var see;
var option = {
color: ['#3398DB'],
title:{
text:'1001',
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: deal(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']),
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [25, 10,30, 334, 390, 330, 220],
itemStyle:{
normal: {
color: function(params) {
var key = params.name.replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, "");
if(key == 'Sun'){
see =params.dataIndex;
return "#FE8463";
}else{
return "#9BCA63";
}
}
}
}
}]
};
myChart.on('click', function(param) {
if(param.dataIndex == see){
console.log(param.dataIndex);
}
});
myChart.setOption(option);
function deal(x_catalog){
var list = [];
for (var i = 0; i < x_catalog.length; i++) {
var s = "";
for(var j = 0; j < x_catalog[i].length; j++){
s += x_catalog[i][j]+"\r\n";
}
list.push(s);
}
return list;
}
</script>
</body>
</html>
