销售量年度变化echarts 柱状配置项内容和展示

时间轴+横向bar

       var lineData = ['2016', '2017', '2018'];
 
 var datas = [
     [{
         "name": "杭州",
         "value": 48877
     }, {
         "name": "北京",
         "value": 39851
     }, {
         "name": "上海",
         "value": 36854
     }, {
         "name": "郑州",
         "value": 26584
     }, {
         "name": "重庆",
         "value": 15842
     }, {
         "name": "成都",
         "value": 14785
     }, {
         "name": "武汉",
         "value": 36954
     }, {
         "name": "苏州",
         "value": 25689
     }, {
         "name": "福州",
         "value": 15847
     }, {
         "name": "宁波",
         "value": 12569
     }, {
         "name": "东莞",
         "value": 8652
     }, {
         "name": "南京",
         "value": 7854
     }, {
         "name": "西安",
         "value": 4778
     }, {
         "name": "呼和浩特市",
         "value": 3658
     }, {
         "name": "天津",
         "value": 1564
     }],
     [{
         "name": "杭州",
         "value": 58877
     }, {
         "name": "北京",
         "value": 53684
     }, {
         "name": "上海",
         "value": 48756
     }, {
         "name": "郑州",
         "value": 36589
     }, {
         "name": "重庆",
         "value": 36582
     }, {
         "name": "成都",
         "value": 25874
     }, {
         "name": "武汉",
         "value": 39584
     }, {
         "name": "苏州",
         "value": 35698
     }, {
         "name": "福州",
         "value": 17596
     }, {
         "name": "宁波",
         "value": 23658
     }, {
         "name": "东莞",
         "value": 15371
     }, {
         "name": "南京",
         "value": 15475
     }, {
         "name": "西安",
         "value": 9658
     }, {
         "name": "呼和浩特市",
         "value": 15658
     }, {
         "name": "天津",
         "value": 8521
     }],
     [{
         "name": "杭州",
         "value": 68877
     }, {
         "name": "北京",
         "value": 62481
     }, {
         "name": "上海",
         "value": 56982
     }, {
         "name": "郑州",
         "value": 48751
     }, {
         "name": "重庆",
         "value": 58652
     }, {
         "name": "成都",
         "value": 69854
     }, {
         "name": "武汉",
         "value": 52483
     }, {
         "name": "苏州",
         "value": 59827
     }, {
         "name": "福州",
         "value": 38519
     }, {
         "name": "宁波",
         "value": 36344
     }, {
         "name": "东莞",
         "value": 18495
     }, {
         "name": "南京",
         "value": 32531
     }, {
         "name": "西安",
         "value": 13069
     }, {
         "name": "呼和浩特市",
         "value": 25544
     }, {
         "name": "天津",
         "value": 12005
     }]
 ]
 
 color = ['#00CC98', '#65FE66'];

 option = {

     baseOption: {
         timeline: {
             data: lineData,
             axisType: 'category',
             autoPlay: true,
             playInterval: 5000, //播放速度

             left: '5%',
             right: '5%',
             bottom: '0%',
             width: '90%',
             //  height: null,
             label: {
                 normal: {
                     textStyle: {

                         color: '#FFFFFF',
                     }
                 },
                 emphasis: {
                     textStyle: {
                         color: '#63FD68'
                     }
                 }
             },
             symbolSize: 10,
             lineStyle: {
                 color: '#2C7439'
             },
             checkpointStyle: {

                 color: '#63FD68',
                 symbolSize: 15,
                 borderColor: "rgb(107,110,116,0.8)",
                 borderWidth: 3.5
             },
             controlStyle: {
                 showNextBtn: true,
                 showPrevBtn: true,
                 normal: {
                     color: '#aaaaaa',
                     borderColor: '#aaaaaa'
                 },
                 emphasis: {
                     color: '#63FD68',
                     borderColor: '#63FD68'
                 }
             },
             emphasis: {
                 itemStyle: {
                     color: "63FD68"
                 }
             }

         },
         title: {
             text: '',
             right: '2%',
             bottom: '8%',
             textStyle: {
                 fontSize: 50,
                 color: '#aaaaaa' //标题字体颜色
             }
         },
         tooltip: {
             show: true,
         },
         calculable: true,
         grid: {
             left: '10%',
             right: '5%',
             bottom: '6%',
             top: '4%',
             containLabel: true
         },
         label: {
             normal: {
                 textStyle: {
                     color: '#63FD68'
                 }
             }
         },
         xAxis: [{
             show: true,
             position: 'top',
             axisLine: {
                 show: false
             },
             splitLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },
         }],
         yAxis: [{
             show: true,
             'type': 'category',
             // inverse: true,
             data: '',
             axisLine: {
                 show: false
             },
             splitLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },
             axisLabel: {
                 show: false,
             }
         }],

         series: [{
             'name': '',
             'type': 'bar',
             showBackground: true,
             backgroundStyle: {
                 barBorderRadius: 30,
             },
             markLine: {
                 show: false,
             },
             barWidth: 15,
             label: {
                 normal: {
                     show: true,
                     fontSize: 16, //标签国家字体大小
                     position: 'left', //数值显示在右侧
                     formatter: function(p) {
                         var val = "";
                         if (p.name.length > 4) {
                             val = p.name.substr(0, 4) + '...';
                             return val;
                         } else {
                             return p.name;
                         }

                     }
                 }
             },
             itemStyle: {
                 normal: {
                     show: true,
                     // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
                     // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                         offset: 0,
                         color: color[0] //指0%处的颜色
                     }, {
                         offset: 1,
                         color: color[1] //指100%处的颜色
                     }], false),
                     barBorderRadius: 30,

                 },
                 emphasis: {
                     color: new echarts.graphic.LinearGradient(
                         0, 0, 1, 0,
                         [{
                                 offset: 0,
                                 color: '#CE8A00'
                             },
                             {
                                 offset: 1,
                                 color: '#EEBA00'
                             }
                         ]
                     )

                 }
             },
         }],

         animationEasingUpdate: 'quinticInOut',
         animationDurationUpdate: 1500, //动画效果
     },

     options: []
 };
 for (var n = 0; n < lineData.length; n++) {

     var res = datas[n];
     
    //  console.log(res);
     res.sort(function(a, b) {
         return a.value - b.value;
     });

     var res1 = [];
     var res2 = [];
     //console.log(res);
     for (t = 0; t < res.length; t++) {
         res1[t] = res[t].name;
         res2[t] = res[t].value;
     }
     option.options.push({
         title: {
             text: lineData[n] + '年'
         },
         yAxis: {
             data: res1,
         },
         series: [{
             data: res2
         }]
     });
 }