var Bar, Line, Pie; var charts = []; var chartsObje = {}; var MyECharts = (function() { //柱状图 var BarTemplate = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', top: 20, containLabel: true }, xAxis: [{ type: 'value' }], yAxis: [{ type: 'category', data: [], axisTick: { alignWithLabel: true } }], series: [{ name: '', type: 'bar', barWidth: '40%', data: [] }] }; var BarXxTemplate = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [ ] }; //饼图 var PieTemplate = { //color:['#4cabce','#e5323d'], tooltip: {}, series: [{ name: 'pie', type: 'pie', center: ['50%', '50%'], label: { normal: { textStyle: { color: '#235894' } } }, labelLine: { normal: { lineStyle: { color: '#3E6C9F' } } }, data: [], itemStyle: { normal: { //opacity: 0.7, borderWidth: 3 // borderColor:'#6C9FD3' } } }] }; /* data:[ {value:335, name:'直接访问',itemStyle:{color:'white'}}, {value:310, name:'邮件营销',itemStyle:{color:'#6C9FD3'}}, {value:234, name:'联盟广告',itemStyle:{color:'white'}}, {value:135, name:'视频广告',itemStyle:{color:'#6C9FD3'}}, {value:1548, name:'搜索引擎',itemStyle:{color:'#6C9FD3'}} ], */ //折线图 var LineTemplate = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: true, //与左边Y轴相连 data: [] //'周一','周二','周三','周四','周五','周六','周日' }, yAxis: { type: 'value' }, series: [{ type: 'line', data: [], //11,212,123,15,66.... itemStyle: { color: "#6C9FD3" } }] }; //初始化需要的参数: /* id (string) 必填 默认为big_pie(Dom对象的id) name (string) 可选 鼠标悬停在统计图上是,tip显示的名字 dataList(List) 必填 需要有name、value如果没有则传入第二个参数 reName (object) {name:mc,value:zrs} 可选 如果dataList中不含name、value则通过传入这个对象来替换原先dataList的Key type (string) 'pie'||'line'||'bar' 可选 默认为pie */ var LineTemplateXx = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ name: '邮件营销', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', data: [220, 182, 191, 234, 290, 330, 310] }] }; var EChartManager = function(o) { var seriesType = o.type || 'pie'; var seriesName = o.name || ''; var domID = o.id || 'big_pie'; if (!o.dataList) { throw "未传入初始化的数据(dataList)"; } var dataList = o.dataList; if (o.rename) { for (var i = 0; i < dataList.length; i++) { if (o.rename.name) { if (!dataList[i][o.rename.name]) { throw o.rename.name + " notFound in " + JSON.stringify(dataList[i]); } dataList[i]["name"] = dataList[i][o.rename.name] } if (o.rename.value) { var value = dataList[i][o.rename.value]; if (!value && value != 0) { throw o.rename.value + " notFound in " + JSON.stringify(dataList[i]); } dataList[i]["value"] = value; } } } var clickFunction = o.clickFunction; /*var myChart=chartsObje[domID]; if(!myChart){*/ //} var targetDOM = document.getElementById(domID); if (targetDOM) { myChart = echarts.init(targetDOM); } else { var myChart = echarts.getInstanceByDom(o.dom) if (myChart) myChart.dispose(); myChart = echarts.init(o.dom); } charts.push(myChart); chartsObje[domID] = myChart; if (clickFunction) { myChart.on("click", clickFunction); } seriesType = seriesType + ""; switch (seriesType) { case 'pie': //饼状图 Pie = JSON.parse(JSON.stringify(PieTemplate)); this.handlePieData(dataList, seriesName, o); myChart.setOption(Pie, true, null, o.callback); break; case '1': //饼状图 Pie = JSON.parse(JSON.stringify(PieTemplate)); this.handlePieData(dataList, seriesName, o); myChart.setOption(Pie, true, null, o.callback); break; case 'line': //折状图 Line = JSON.parse(JSON.stringify(LineTemplate)); this.handleLineData(dataList, seriesName, o); myChart.setOption(Line, true, null, o.callback); break; case '11': //折状图 Line = JSON.parse(JSON.stringify(LineTemplate));; this.handleLineData(dataList, seriesName, o); myChart.setOption(Line, true, null, o.callback); break; default: Bar = JSON.parse(JSON.stringify(BarTemplate)); this.handleBarData(dataList, seriesName, o); myChart.setOption(Bar, true, null, o.callback); } }; EChartManager.prototype = { handleColor: function(obj, o) { if (o.color) { } }, handlePieData: function(list, seriesName, o) { this.addOption(Pie, o.optionObj); var data = []; for (var i = 0; i < list.length; i++) { if (!("name" in list[i]) || !("value" in list[i])) { throw "传入的初始化对象数组dataList应含有name和value"; } var temp = {}; if (o.color) { for (var prop in list[i]) { temp[prop] = list[i][prop]; } if (o.color[temp["name"]]) { temp["itemStyle"] = { color: o.color[temp["name"]] } } } else { for (var prop in list[i]) { temp[prop] = list[i][prop]; } } data.push(temp); } if (o.name) { Pie["title"] = {}; Pie["title"]["left"] = 30; Pie["title"]["text"] = o.name; } Pie.series[0].data = data; Pie.series[0].name = seriesName; }, handleLineData: function(list, seriesName, o) { var sanjzbOne = list[0].sanjzblist; if (sanjzbOne && sanjzbOne.length > 0) { Line = JSON.parse(JSON.stringify(LineTemplateXx)); this.addOption(Line, o.optionObj); Line.title.text=o.name; Line.xAxis.data=[]; Line.series=[]; var names=[]; for (var i = 0; i < list.length; i++) { var item = list[i]; Line.xAxis.data.push(item.name); var sanjzbList = item.sanjzblist; for (var j = 0; j < sanjzbList.length; j++) { var sanItem = sanjzbList[j]; if (names.indexOf(sanItem.mc)==-1) { var series = { name: sanItem.mc, type: 'line', data: [] }; Line.series.push(series); names.push(sanItem.mc); } } } for (var i = 0; i < list.length; i++) { var item = list[i]; var sanjzbList = item.sanjzblist; for (var seriesIndex in Line.series) { var seriesItem=Line.series[seriesIndex]; var name=seriesItem.name; var setSl = false; for (var j = 0; j < sanjzbList.length; j++) { var sanItem = sanjzbList[j]; if (name == sanItem.mc) { setSl = true; seriesItem.data.push(sanItem.sl); break; } } if (setSl == false) { seriesItem.data.push(0); } } } } else { this.addOption(Line, o.optionObj); var seriesData = []; var xAxisData = []; for (var i = 0; i < list.length; i++) { if (!("name" in list[i]) || !("value" in list[i])) { throw "传入的初始化对象数组dataList应含有name和value"; } var temp = {}; for (var prop in list[i]) { temp[prop] = list[i][prop]; if (prop == 'name') { xAxisData.push(list[i][prop]); } } seriesData.push(temp); } if (o.name) { Line["title"] = {}; Line["title"]["left"] = 30; Line["title"]["text"] = o.name; } Line.xAxis.data = xAxisData; Line.series[0].data = seriesData; Line.series[0].name = seriesName; } }, handleBarData: function(list, seriesName, o) { var sanjzbOne = list[0].sanjzblist; if (sanjzbOne && sanjzbOne.length > 0) { Bar = JSON.parse(JSON.stringify(BarXxTemplate)); this.addOption(Bar, o.optionObj); var xAxisData = []; var obj = {}; Bar.xAxis.data = []; Bar.series = []; for (var i = 0; i < list.length; i++) { var item = list[i]; xAxisData.push(item.name); var sanjzbList = item.sanjzblist; for (var j = 0; j < sanjzbList.length; j++) { var sanItem = sanjzbList[j]; if (!obj[sanItem.mc]) { var series = { name: sanItem.mc, type: 'bar', stack: '总量', data: [] }; obj[sanItem.mc] = series; } } } for (var i = 0; i < list.length; i++) { var item = list[i]; var sanjzbList = item.sanjzblist; for (var mc in obj) { var setSl = false; for (var j = 0; j < sanjzbList.length; j++) { var sanItem = sanjzbList[j]; if (mc == sanItem.mc) { setSl = true; obj[sanItem.mc].data.push(sanItem.sl); break; } } if (setSl == false) { obj[mc].data.push(0); } } } Bar.xAxis.data = xAxisData; for (var key in obj) { Bar.series.push(obj[key]); } } else { Bar = JSON.parse(JSON.stringify(BarTemplate)); this.addOption(Bar, o.optionObj); var seriesData = []; var yAxisData = []; for (var i = 0; i < list.length; i++) { if (!("name" in list[i]) || !("value" in list[i])) { throw "传入的初始化对象数组dataList应含有name和value"; } var temp = {}; for (var prop in list[i]) { temp[prop] = list[i][prop]; if (prop == 'name') { yAxisData.push(list[i][prop]); } } seriesData.push(temp); } Bar.yAxis[0].data = []; Bar.series[0].data = []; Bar.series[0].name = []; Bar.yAxis[0].data = yAxisData; Bar.series[0].data = seriesData; Bar.series[0].name = seriesName; } if (o.name) { Bar["title"] = {}; Bar["title"]["left"] = 30; Bar["title"]["text"] = o.name; } }, addOption: function(oldOption, newOption) { if (!newOption) { return; } oldOption = Object.assign(oldOption, newOption); } }; return { init: function(o) { var obj = new EChartManager(o); } }; })();