console
var provinceData = [
{province:'北京',count:800},
{province:'上海',count:700},
{province:'广东',count:600},
{province:'湖南',count:500},
{province:'湖北',count:400}
];
var cityData = [
{city:'深圳',count:400},
{city:'广州',count:200},
{city:'东莞',count:100},
{city:'惠州',count:100},
{city:'中山',count:200}
];
var countryData = [
{country:'宝安',count:100},
{country:'南山',count:200},
{country:'罗湖',count:200},
{country:'龙华',count:80},
{country:'龙岗',count:90}
];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据钻取demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
</head>
<body>
<div class="container">
<div class="chart" style="height:500px;width:100%">
</div>
</div>
</body>
<script>
var myChart;
var currentLevel =1;
var currentFilterKey = 'province';
var level = {province:1,city:2,country:3};
function initOptions(data, yAxis, xAxis){
var option = {
dataset: {
dimensions: [xAxis, ...yAxis],
source: data
},
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: []
};
var series = option.series;
$(yAxis).each((axis,index)=>{
series.push({
type: 'bar',
label: {
show:true,
position: 'top'
}
});
});
return option;
}
function createSomeMenu(params) {
return {
callback: function(key, options) {
var m = "where time = " + params.data[0]+", group by " + key;
window.console && console.log(m);
var data;
switch(key){
case 'province':
data = provinceData;
break;
case 'city':
data = cityData;
break;
case 'country':
data = countryData;
break;
}
var option = initOptions(data,['count'],key);
myChart.setOption(option);
console.log(params.data);
alert(currentFilterKey+' = '+ params.data[currentFilterKey]);
currentLevel = level[key];
currentFilterKey = key;
},
events: {
onchange:function(){
alert('change');
}
},
items: {
dillUp: {
name: "上钻",
items: {
province: {
name: '省',
disabled: function (key, opt) {
return !currentLevel || currentLevel <= level[key];
}
},
city: {
name: '市',
disabled: function (key, opt) {
return !currentLevel || currentLevel <= level[key];
}
},
country: {
name: '县',
disabled: function (key, opt) {
return !currentLevel || currentLevel <= level[key];
}
}
}
},
sep1: "---------",
dillDown: {
name: "下钻",
items: {
province: {
name: '省',
disabled: function (key, opt) {
return currentLevel=>level[key];
}
},
city: {
name: '市',
type:'checkbox',
disabled: function (key, opt) {
return currentLevel>=level[key];
}
},
country: {
name: '县',
disabled: function (key, opt) {
return currentLevel>=level[key];
}
}
}
}
}
};
}
var myChart;
$(function(){
myChart= echarts.init($('.chart')[0]);
var option = initOptions(provinceData,['count'],'province');
option && myChart.setOption(option);
$('.chart')[0].oncontextmenu=()=>false;
myChart.on('click',(params)=>{
console.log('clicked',params.data);
var _event = params.event.event,
position = {
x: _event.pageX,
y: _event.pageY
}
$('.chart').data('runCallbackThingie', createSomeMenu);
$('.chart').data('params', params);
$('.chart').contextMenu(position);
});
$.contextMenu({
selector: '.chart',
build: function($trigger, e) {
e.preventDefault();
var params = $trigger.data('params');
return $trigger.data('runCallbackThingie')(params);
}
});
})
</script>
</html>