/*-----------------------近1个月安装服务城市TOP10---------------------*/
// 
$(document).ready(function () {
  // 基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.querySelector(".mes993 .chart"));

  // 2. 指定配置和数据
  myChart.setOption (
    
    {
      color: ["#2f89cf"],
    grid: {
      top: "5%",
      left: "3%",
      right: "4%",
      bottom: "1%",
      show: true,
      borderColor: "#012f4a",
      containLabel: true
    },
    xAxis: {
        type: 'value',
        show:false,
        splitLine: {
                          show: false//是否显示分隔线。
                   },
        // 去除刻度
          axisTick: {
             show: true
                    },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false
      },
        boundaryGap: [0, 0.01]
    },
    yAxis: {
             show:true,
            //去除y线
              axisLine: {
                show: false
                      },
             axisTick: {
                          show: false   // 去除刻度
                       },
             splitLine: {
                          show: false//是否显示分隔线。
                        },
             axisLabel: {
                          color: "rgba(255,255,255,.7)" ,  // 修饰刻度标签的颜色
                          show:true
                        },
        type: 'category'

    },


    dataset: {
         source: [ ]
      },
    series: [
      {
       // name: "发货",
        type: "bar",
        barWidth: "50%",
        label: {
        show: true,
      
        position: 'inside',
        textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
      },
            //带背景
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(255,255,255,0.2)',

      },
      //圆角
      itemStyle: {
          barBorderRadius: 5
        }

      }
     
    ]
}
  
  );


    //第一次加载
    myChart.showLoading();
       // 异步加载数据
  
   $.get('data993.json').done(function (data) {
    myChart.hideLoading();
      myChart.setOption({ 
      dataset:{  source:data.source  },
  });

  window.addEventListener("resize", function () {
    myChart.resize();
  });
  
});

});
/*-----------------------TOP 排列榜---------------------*/

 

 备注:Y轴这条线怎么去除的,有网友知道麻烦告诉一下。我试了很多次还是不行。

posted on 2021-10-07 16:47  redhat588  阅读(68)  评论(0编辑  收藏  举报