$(function () { // var data = { // "echatX": [ // "2019-07-02", // "2019-07-03", // "2019-07-04", // "2019-07-05", // "2019-07-06", // "2019-07-07", // "2019-07-08", // "2019-07-09", // "2019-07-10", // "2019-07-11", // "2019-07-12", // "2019-07-13", // "2019-07-14", // "2019-07-15" // ], // "echatY": [ // 501,210,123,333,445,157,151,369,101,101,350,435,153,100 // ], // "echatY2": [ // 80,40,13,36,57,77,41,39,61,31,60,73,33,50 // ], // "echatY3": [ // 5091,2210,1233,3133,4415,1517,1511,3619,1101,1011,3510,4315,1513,1100 // ], // "echatY4": [ // 501,210,123,333,445,157,151,369,101,101,350,435,153,100 // ], // "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[] // }; // dFun(data.echatX, data.echatY, data.echatY2,data.echatY3,data.echatY4); }); var myChart; // 基于准备好的dom,初始化echarts实例 var dChart = echarts.init(document.getElementById('main3')); // 指定图表的配置项和数据 function dFun(dateList, totalNumberList, totalSalesList) { dChart.setOption({ // title: { // left: 'left', // text: '概率', // show: false // }, tooltip: { trigger: 'axis', // formatter: '{a}:{c}', axisPointer: { type: 'shadow', crossStyle: { color: '#999' } } }, grid: { show: false, left: '3%', right: '4%', bottom: '10%' }, // legend: { // show: true, // selectedMode: 'single', // 设置显示单一图例的图形,点击可切换 // bottom: 10, // left: 50, // textStyle: { // color: '#666', // fontSize: 12 // }, // itemGap: 20, // inactiveColor: '#ccc' // }, xAxis: { // splitLine: {     show: false   }, type: 'category', data: dateList, axisPointer: { type: 'shadow' }, // 改变x轴颜色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 这里是为了突出显示加上的 } }, axisTick: { show: true, interval: 0 }, }, // 设置两个y轴,左边显示数量,右边显示概率 yAxis: [{ splitLine: {     show: false   }, type: 'value', name: '销售量', // max: 10000, // min: 0, // show: true, // interval: 1000, // 改变y轴颜色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 这里是为了突出显示加上的 } }, }, // 右边显示概率 { splitLine: {     show: false   }, type: 'value', name: '销售额', // min: 0, // max: 100, // interval: 10, // 改变y轴颜色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 这里是为了突出显示加上的 } } }], // 每个设备分数量、概率2个指标,只要让他们的name一致,即可通过,legeng进行统一的切换 series: [{ name: 'Units Sold', type: 'bar', symbol: 'circle', // 折线点设置为实心点 symbolSize: 4, // 折线点的大小 data: totalNumberList, barWidth: '20%', },{ //折线 name: 'Sales', type: 'line', symbol: 'circle', // 折线点设置为实心点 symbolSize: 6, // 折线点的大小 yAxisIndex: 1, // 这里要设置哪个y轴,默认是最左边的是0,然后1,2顺序来。 data: totalSalesList, symbolSize: 10, itemStyle: { normal: { color: "#DDA0DD" } } }, ] }); } function queryWeekly(){ var startWeek = document.getElementById("startWeek").value; var endWeek = document.getElementById("endWeek").value; var startWeekDate = new Date(startWeek); var endWeekDate = new Date(endWeek); if(startWeekDate.getTime() > endWeekDate.getTime()){ alert("开始时间不能大于结束时间"); return; } var param = { startWeek:startWeek, endWeek:endWeek }; console.log(param); // 折线图 $.ajax({ url: "../monthly/customersQueryByWeek", data: param, contentType:"application/x-www-form-urlencoded", type: 'POST', success: function(data) { if (data.code =='500'){ alert(data.msg); return; } console.log(data); dFun(data.dateList, data.totalNumberList, data.totalSalesList); }, }); } function exportWeekly(){ var startWeek = document.getElementById("startWeek").value; var endWeek = document.getElementById("endWeek").value; var params = { startWeek:startWeek, endWeek:endWeek }; if (startWeek==null || startWeek==undefined || startWeek==''){ alert("请输入开始时间"); return; } if (endWeek==null || endWeek==undefined || endWeek==''){ alert("请输入开始时间"); return; } console.log(params); exportFile('#rrapp', '../monthly/weeklySalesSummaryExport', params); }