版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/flting1017/article/details/78983716
<meta charset="utf-8">
<html>
<div id="main" style="width: 1100px;height:900px;"></div>
</html>
<script src="./echarts2.js"></script>
<script>
var data1 = [12, 24, 35, 42, 56, 69, 85];
var data2 = [1.25,1.55, 1.10, 2.98, 1.45, 2.58, 3.10];
var data3 = [150, 232, 201, 154, 190, 330, 410];
var data4 = [320, 332, 301, 334, 390, 330, 320];
var data5 = [820, 932, 901, 934, 1290, 1330, 1320];
var days = ["周一","周二","周三","周四","周五","周六","周日"];
var datamap = {
'邮件营销':data1,
'联盟广告':data2,
'视频广告':data3,
'直接访问':data4,
'搜索引擎':data5,
}
// 这个方法是，如果是小于0，转化为百分比去显示
commoechart(days,datamap,{
// "联盟广告":function(val){
// return Number(val * 100).toFixed(1) + "%"
// }
})
// 写一个方法，是专门来扩大数字倍数的
// xAxis:横坐标,DataMap元数据,dataFormat展示数据格式
function commoechart(xAxis,datamap,dataformat) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var keysdata = Object.keys(datamap) || [];
var Options = {
// 动画效果
animationDuration: 2000,
animationDurationUpdate: 1000,
calculable:true,
tooltip:{
formatter:'{datamap[0]}$$$'
},
xAxis:[
{
type:'category',
boundaryGap:false,
data:xAxis
}
],
yAxis:[
{
type:'value',
show:true,
},
],
series:[],
grid: {
top:'15%',
left: '3%',
right: '4%',
bottom: '4%',
containLabel: true
},
};
// 默认什么高亮
var legend = {
selected:{
'邮件营销':false,
'联盟广告':true,
'视频广告':false,
'直接访问':true,
'搜索引擎':true
},
data:keysdata,
};
var getEachMax = (function(){
var maxData = {};
keysdata.forEach(function(key){
var EachArray = Object.assign([],datamap[key]);
maxData[key] = EachArray.sort(function(pre,cur){
if(Number(pre) <= Number(cur)){
return 1;
}else{
return -1;
}
})[0]
});
return maxData;
}());
var series = function(){
// console.log(datamap)
var partMax = keysdata.map(function(key){
if(legend.selected[key]){
return Number(getEachMax[key]);
}else{
return 1
}
}).sort(function(pre,cur){
if(Number(pre)<=Number(cur)){
return 1;
}else {
return -1
}
})[0],baseArgu = {};
keysdata.forEach(function(key){
var base = parseInt(partMax/getEachMax[key]);
if(base>1){
baseArgu[key] = base /2;
}else{
baseArgu[key] = 1
}
base = null
});
Options["tooltip"] = {
trigger:'axis',
formatter:function(parmas){
// console.log(parmas)
var text = parmas[0].axisValue + '<br/>';
parmas.forEach(function(value){
text += value.seriesName + ':' + datamap[value['seriesName']][value['dataIndex']] + '<br/>';
})
return text
}
};
Options['legend'] = legend;
Options['series'] = keysdata.map(function(key){
return {
name:key,
type:'line',
smooth:true,
data:datamap[key].map(function(value){
return value * baseArgu[key]
}),
itemStyle:{
normal:{
label:{
show:true,formatter:function(val){
if(dataformat[key] && (typeof dataformat[key] === 'function')) {
return dataformat[key](datamap[key][val['dataIndex']])
}
return datamap[key][val['dataIndex']]
}
}
}
}
}
})
};
series();
myChart.setOption(Options);
myChart.on("legendselectchanged",function(parmas){
legend.selected[parmas.name] = !Options.legend.selected[parmas.name];
series();
myChart.setOption(Options,true,true);
})
}
</script>