123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- $(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 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) {
- 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
- };
- console.log(params);
- exportFile('#rrapp', '../monthly/weeklySalesSummaryExport', params);
- }
|