$(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":[] // }; // var series=[]; // dFun(data.echatX, data.echatY, data.echatY2,data.echatY3,data.echatY4,series); }); var myChart; // 基于准备好的dom,初始化echarts实例 var dChart = echarts.init(document.getElementById('main3')); // 指定图表的配置项和数据 // 品牌类型,月份数量,月份数量 function dFun(categoryList,series) { dChart.setOption({ tooltip: { trigger: 'axis', // formatter: '{a}:{c}', axisPointer: { type: 'shadow', crossStyle: { color: '#999' } } }, grid: { show: false, left: '3%', right: '4%', bottom: '10%' }, xAxis: { // splitLine: {     show: false   }, type: 'category', data: categoryList, 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: series }); } function queryMonthly(){ var startMonth = document.getElementById("startMonth").value; var endMonth = document.getElementById("endMonth").value; var param = { startMonth:startMonth, endMonth:endMonth }; var series=[]; console.log(param); // 折线图 $.ajax({ url: "../monthly/monthlyCategory", data: param, contentType:"application/x-www-form-urlencoded", type: 'POST', success: function(data) { console.log(JSON.stringify(data)); series=[]; series.length=0; for (var i = 0, size = data.dateList.length; i < size; i++) { series.push({ name: 'Units Sold'+data.dateList[i], type: 'bar', symbol: 'circle', // 折线点设置为实心点 symbolSize: 4, // 折线点的大小 data: data[`totalNumberList${data.dateList[i]}`], // data.totalNumberList2020-05 barWidth: '20%', }); series.push({ name: 'Sales'+data.dateList[i], type: 'line', symbol: 'circle', // 折线点设置为实心点 symbolSize: 6, // 折线点的大小 yAxisIndex: 1, // 这里要设置哪个y轴,默认是最左边的是0,然后1,2顺序来。 data: data[`totalSalesList${data.dateList[i]}`], symbolSize: 10, itemStyle: { normal: { color: "#DDB0AD" } } }); } dFun(data.categoryList,series); }, }); } function exportMonthly(){ var startMonth = document.getElementById("startMonth").value; var endMonth = document.getElementById("endMonth").value; var params = { startMonth:startMonth, endMonth:endMonth }; console.log(params); exportFile('#rrapp', '../monthly/monthlyCategoryExport', params); }