echarts柱状图获取接口数据

    （记录学习的过程）

 var echarts = require('echarts'); //固定
         var myChartone = echarts.init(this.$refs.chartone);
       
        
         
         //定义两个上下箭头的矢量路径
         var up = 'path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z';
         var down = 'path://M755.2 648.362667a42.666667 42.666667 0 0 1 0.554667 60.330666l-213.333334 217.173334a42.666667 42.666667 0 0 1-60.842666 0l-213.333334-217.173334a42.666667 42.666667 0 0 1 60.842667-59.818666L469.333333 791.68V128a42.666667 42.666667 0 1 1 85.333334 0v663.68l140.245333-142.805333a42.666667 42.666667 0 0 1 60.330667-0.512z'
         //遍历data2里面元素的正负定义一个矢量路径的数组
         var path = [up, down, up, down, down, down, up]
         var optionone = {
             // color: ['#F66087','#029BFF','#FFAA40'],
             color: ['#029BFF','#FFAA40','#F66087'],
             tooltip: {
                 trigger: 'axis',
                 axisPointer: { // 坐标轴指示器，坐标轴触发有效
                     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                 }
             },
             grid: {
                 top:'-2%',
                 left: '6%',
                 right: '4%',
                 bottom: '3%',
                 containLabel: true,
                 width:'65%',
             },
             xAxis: {
                 type: 'category',
                 data: ['1', '2', '3', '4', '5', '6', '7'],
                 axisTick: {
                     alignWithLabel: true,
                 },
                 axisLine: { //  改变x轴颜色
                     lineStyle: {
                         color: '#b5b5b5'
                     }
                 },
             },
             yAxis: [{
               axisLine: { //  改变y轴颜色
               show:false,
                   lineStyle: {
                       color: '#b5b5b5',

                   }
               },
               splitLine: {
                   show: true,
                   lineStyle: {
                       color: '#f4f4f4',
                   
                   }
               },
               axisTick: {
                   show: false
               },
                 type: 'value',
                         min:0, //y轴的最小值
                         max:700, //y轴最大值 
                         interval:100,
                         name:"服务次数",
                      
                         
             }],
             series: [
                 {
                     name: '1',
                     type: 'bar',
                     stack: 'a',
                     barGap: '-100%',
                     barWidth: '60%',
                     data: [380.17, 292.45, 185.14, 166.68, 205.57, 256.13, 152.93],
                     label: {
                         show: true,
                          fontSize: 8,
                     },
                     itemStyle: {
                         color: '#029BFF',
                      
 
                     }
                 },
                 {
                     name: '2',
                     type: 'bar',
                     stack: 'a',
                     barGap: '-100%',
                     barWidth: '60%',
                     data: [90.78, 51.65, 30.27, 120.03, 118.72, 114.12, 113.11],
                     label: {
                         show: true,
                         fontSize: 8,
                     },
                     
                 },
                  {
                     name: '3',
                     type: 'bar',
                     stack: 'a',
                     barGap: '-100%',
                     barWidth: '60%',
                     data: [60, 51.65, 52.27, 70.03, 18.72, 34.12, 13.11],
                     label: {
                         show: true,
                         fontSize: 8,
                     },
                     itemStyle: {
                         color: '#F66087',
                         
                     }
                 },
             ],
    
         };
         
         // 新增start
         let topData = []
        
         
         $.ajax({
           url:'接口地址',
           data:{
             "showCode":"xxxxxx",
             "calcRegion":"xxxxxxxx"
           },
           success:function(res){
             topData = res.result
             console.log(topData)
              console.log("-----------------------------------------")
              
              optionone.xAxis.data = res.result[0].data.map(el => el.labelName)
              console.log(optionone.xAxis.data)
            
              optionone.series = res.result.map(el => {
               return{
                 data:el.data.map(el2 => el2.valueData),
                 type:'bar',
                 stack: 'a',
                
                 label: {
                     show: true,
                     fontSize: 8,
                 },
                 
               }
             }),
             console.log("=========================")
             console.log(optionone.series)
             
              myChartone.setOption(optionone); 
             
           }
         });