一、Echarts3 的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts</title>
</head>
<body>
<h1>Echarts 3</h1>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 600px; height: 400px;"></div>
<!-- 引入 echarts.js -->
<script src="echarts.common.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var datas = [ {
"name" : "衬衫",
"number" : 100,
"price" : 69,
"tax" : 43
}, {
"name" : "羊毛衫",
"number" : 80,
"price" : 369,
"tax" : 36
}, {
"name" : "雪纺衫",
"number" : 60,
"price" : 129,
"tax" : 9
}, {
"name" : "裤子",
"number" : 200,
"price" : 89,
"tax" : 27
}, {
"name" : "高跟鞋",
"number" : 30,
"price" : 500,
"tax" : 25
}, {
"name" : "袜子",
"number" : 200,
"price" : 19,
"tax" : 30
} ];
var dt = [];
var dt2 = [];
var dt3 = [];
var len = datas.length;
var option = {
title : {
text : 'ECharts Legend single selected and resorted'
},
tooltip : {},
legend : {
data : [ '数量', '单价', '交税' ],
selected : {
'单价' : false,
'交税' : false
},
selectedMode : 'single'
},
yAxis : [ {
} ],
xAxis : [ {
type : 'category',
splitLine : {
show : false
},
data : dt
} ],
series : [ {
name : '数量',
type : 'bar',
data : (function() {
var data = [];
datas.sort(function(a, b) {
if (a.number > b.number)
return -1; //降序
else
return 1;
});
datas.forEach(function(item) {
console.log(1);
data.push(item.number);
dt.push(item.name);
});
return data;
})()
}, {
name : '单价',
type : 'bar',
data : (function() {
var data = [];
datas.sort(function(a, b) {
if (a.price > b.price)
return -1; //降序
else
return 1;
});
datas.forEach(function(item) {
console.log(2);
data.push(item.price);
dt2.push(item.name);
})
return data;
})()
}, {
name : '交税',
type : 'bar',
data : (function() {
var data = [];
datas.sort(function(a, b) {
if (a.tax > b.tax)
return -1; //降序
else
return 1;
});
datas.forEach(function(item) {
console.log(3);
data.push(item.tax);
dt3.push(item.name);
});
return data;
})()
} ]
};
myChart.on('legendselectchanged', function(params) {
var name = params.name;
if (name == '单价') {
var opt = myChart.getOption();
opt.xAxis[0]["data"] = dt2;
myChart.setOption(opt);
}
if (name == '数量') {
var opt = myChart.getOption();
opt.xAxis[0]["data"] = dt;
myChart.setOption(opt);
}
if (name == '交税') {
var opt = myChart.getOption();
opt.xAxis[0]["data"] = dt3;
myChart.setOption(opt);
}
console.log(name);
});
myChart.setOption(option);
</script>
</body>
</html>
=====================================================================================================
二、Echarts 2 的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts2.2.7</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 600px; height: 400px;"></div>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<script type="text/javascript">
require.config({
paths : {
echarts : 'http://echarts.baidu.com/build/dist'
}
});
require([ 'echarts', 'echarts/chart/bar' ], function(echarts) {
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var datas = [ {
"name" : "衬衫",
"number" : 100,
"price" : 69,
"tax" : 43
}, {
"name" : "羊毛衫",
"number" : 80,
"price" : 369,
"tax" : 36
}, {
"name" : "雪纺衫",
"number" : 60,
"price" : 129,
"tax" : 9
}, {
"name" : "裤子",
"number" : 200,
"price" : 89,
"tax" : 27
}, {
"name" : "高跟鞋",
"number" : 30,
"price" : 500,
"tax" : 25
}, {
"name" : "袜子",
"number" : 200,
"price" : 19,
"tax" : 30
} ];
var dt = [];
var dt2 = [];
var dt3 = [];
var len = datas.length;
var option = {
title : {
text : 'ECharts 入门示例'
},
tooltip : {},
legend : {
data : [ '数量', '单价', '交税' ],
selected : {
'单价' : false,
'交税' : false
},
selectedMode : 'single'
},
yAxis : [ {
} ],
xAxis : [ {
type : 'category',
splitLine : {
show : false
},
data : dt
} ],
series : [ {
name : '数量',
type : 'bar',
data : (function() {
var data = [];
datas.sort(function(a, b) {
if (a.number > b.number)
return -1; //降序
else
return 1;
});
datas.forEach(function(item) {
console.log(1);
data.push(item.number);
dt.push(item.name);
});
return data;
})()
}, {
name : '单价',
type : 'bar',
data : (function() {
var data = [];
datas.sort(function(a, b) {
if (a.price > b.price)
return -1; //降序
else
return 1;
});
datas.forEach(function(item) {
console.log(2);
data.push(item.price);
dt2.push(item.name);
})
return data;
})()
}, {
name : '交税',
type : 'bar',
data : (function() {
var data = [];
datas.sort(function(a, b) {
if (a.tax > b.tax)
return -1; //降序
else
return 1;
});
datas.forEach(function(item) {
console.log(3);
data.push(item.tax);
dt3.push(item.name);
});
return data;
})()
} ]
};
//legend单击事件
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function(param) {
var selected = param.selected;
if (selected['单价']) {
console.log('a');
var opt = myChart.getOption();
opt.xAxis[0]["data"] = dt2;
myChart.setOption(opt);
}
if (selected['数量']) {
console.log('b');
var opt = myChart.getOption();
opt.xAxis[0]["data"] = dt;
myChart.setOption(opt);
}
if (selected['交税']) {
console.log('c');
var opt = myChart.getOption();
opt.xAxis[0]["data"] = dt3;
myChart.setOption(opt);
}
console.log(selected);
});
myChart.setOption(option);
});
</script>
</body>
</html>