课堂测试第三次（带有时间滚动轴的可视化展示）

 如上图这张图将会随日期滚动动态展示不同日期的销售与销量情况。

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]}})