如上图这张图将会随日期滚动动态展示不同日期的销售与销量情况。
echarts代码：
var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option_hive; var dataMap = {}; function dataFormatter(obj) { // prettier-ignore //商家代码 var pList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆']; var temp; //月份 for (var year = 2002; year <= 2011; year++) { var max = 0; var sum = 0; temp = obj[year]; for (var i = 0, l = temp.length; i < l; i++) { max = Math.max(max, temp[i]); sum += new Number(temp[i]); obj[year][i] = { name: pList[i], value: temp[i] }; } obj[year + 'max'] = Math.floor(max / 100) * 100; obj[year + 'sum'] = sum; } return obj; }
ajax代码
function get_hive_D() { $.ajax({ url: "/hive_D", success: function (data) { //bing1_option.legend.data=data.name; dataMap.dataGDP=dataFormatter(data.dataPI); dataMap.dataPI=dataFormatter(data.dataGDP); dataMap.name=dataFormatter(data.name); option_hive = { baseOption: { timeline: { axisType: 'category', // realtime: false, // loop: false, autoPlay: true, currentIndex: 2, playInterval: 1000, // controlStyle: { // position: 'left' // }, data: [ '9-1', '9-2', '9-3', '9-4', '9-5', '9-6', '9-7', '9-8', '9-9', '9-10' ] }, title: { subtext: '数据来自国家统计局' }, tooltip: {}, legend: { left: 'right', data: ['销售金额','销售数量' ], }, calculable: true, grid: { top: 80, bottom: 100, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', label: { show: true, formatter: function (params) { return params.value.replace(' ', ''); } } } } }, xAxis: [ { type: 'category', axisLabel: { interval: 2 }, data: [ ], splitLine: { show: false } } ], yAxis: [ { type: 'value', name: 'GDP（亿元）' } ], series: [ { name: '销售金额', type: 'bar' }, { name: '销售数量', type: 'bar' }, { name: 'GDP占比', type: 'pie', center: ['75%', '35%'], radius: '28%', z: 100 } ] }, options: [ { title: { text: '9-1销量销售情况' }, series: [ { data: dataMap.dataGDP['2002'] }, { data: dataMap.dataPI['2002'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2002sum'] }, { name: '销售数量', value: dataMap.dataPI['2002sum'] } ] } ], xAxis: [ { data: dataMap.name['2002'] } ] }, { title: { text: '9-2销量销售情况' }, series: [ { data: dataMap.dataGDP['2003'] }, { data: dataMap.dataPI['2003'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2003sum'] }, { name: '销售数量', value: dataMap.dataPI['2003sum'] } ] } ], xAxis: [ { data: dataMap.name['2003'] } ] }, { title: { text: '9-3销量销售情况' }, series: [ { data: dataMap.dataGDP['2004'] }, { data: dataMap.dataPI['2004'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2004sum'] }, { name: '销售数量', value: dataMap.dataPI['2004sum'] } ] } ], xAxis: [ { data: dataMap.name['2004'] } ] }, { title: { text: '9-4销量销售情况' }, series: [ { data: dataMap.dataGDP['2005'] }, { data: dataMap.dataPI['2005'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2004sum'] }, { name: '销售数量', value: dataMap.dataPI['2004sum'] } ] } ], xAxis: [ { data: dataMap.name['2005'] } ] }, { title: { text: '9-5销量销售情况' }, series: [ { data: dataMap.dataGDP['2006'] }, { data: dataMap.dataPI['2006'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2006sum'] }, { name: '销售数量', value: dataMap.dataPI['2006sum'] } ] } ], xAxis: [ { data: dataMap.name['2006'] } ] }, { title: { text: '9-6销量销售情况' }, series: [ { data: dataMap.dataGDP['2007'] }, { data: dataMap.dataPI['2007'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2007sum'] }, { name: '销售数量', value: dataMap.dataPI['2007sum'] } ] } ], xAxis: [ { data: dataMap.name['2007'] } ] }, { title: { text: '9-7销量销售情况' }, series: [ { data: dataMap.dataGDP['2008'] }, { data: dataMap.dataPI['2008'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2008sum'] }, { name: '销售数量', value: dataMap.dataPI['2008sum'] } ] } ], xAxis: [ { data: dataMap.name['2008'] } ] }, { title: { text: '9-8量销售情况' }, series: [ { data: dataMap.dataGDP['2009'] }, { data: dataMap.dataPI['2009'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2009sum'] }, { name: '销售数量', value: dataMap.dataPI['2009sum'] } ] } ], xAxis: [ { data: dataMap.name['2009'] } ] }, { title: { text: '9-9销量销售情况' }, series: [ { data: dataMap.dataGDP['2010'] }, { data: dataMap.dataPI['2010'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2010sum'] }, { name: '销售数量', value: dataMap.dataPI['2010sum'] } ] } ], xAxis: [ { data: dataMap.name['2010'] } ] }, { title: { text: '9-10销量销售情况' }, series: [ { data: dataMap.dataGDP['2011'] }, { data: dataMap.dataPI['2011'] }, { data: [ { name: '销售金额', value: dataMap.dataGDP['2011sum'] }, { name: '销售数量', value: dataMap.dataPI['2011sum'] } ] } ], xAxis: [ { data: dataMap.name['2011'] } ] } ] } option_hive.baseOption.xAxis[0].data=data.name; option_hive && myChart.setOption(option_hive); }, error: function (xhr, type, errorThrown) { } }) }
@app.route("/hive_D") def get_hive_D(): list = [] list2 = [] list3=[] data = utils.get_hive_D('2021-9-1') list_cnt=[] list_round=[] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-2') list_cnt=[] list_round = [] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-3') list_cnt=[] list_round = [] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-4') list_cnt=[] list_round = [] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-5') list_cnt=[] list_round = [] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-6') list_cnt=[] list_round = [] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-7') list_cnt=[] list_round = [] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-8') list_cnt=[] list_round = [] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-1') list_cnt=[] list_round=[] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-9') list_cnt=[] list_round=[] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) data = utils.get_hive_D('2021-9-10') list_cnt=[] list_round=[] list_name=[] for sale_nbr,cnt,round in data: list_cnt.append(cnt) list_round.append(round) list_name.append(sale_nbr) list.append(list_cnt) list2.append(list_round) list3.append(list_name) return jsonify({"dataGDP":{2002:list[0],2003:list[1],2004:list[2],2005:list[3],2006:list[4],2007:list[5] ,2008:list[6],2009:list[7],2010:list[8],2011:list[9]}, "dataPI":{2002:list2[0],2003:list2[1],2004:list2[2],2005:list2[3],2006:list2[4],2007:list2[5] ,2008:list2[6],2009:list2[7],2010:list2[8],2011:list2[9]}, "name":{2002:list3[0],2003:list3[1],2004:list3[2],2005:list3[3],2006:list3[4],2007:list3[5] ,2008:list3[6],2009:list3[7],2010:list3[8],2011:list3[9]}})