echarts-横向

mounted () {
      let list = [
        {
          name:'市级医院',
          value:233,
        },
        {
          name:'乡镇卫生院',
          value:533,
        },
        {
          name:'市级医院',
          value:133,
        },
        {
          name:'市级医院',
          value:433,
        },
      ]
      this.initBar(list)
    },
    methods: {
      initBar(data){
        let echarts = require('echarts')
        let dom = echarts.init(document.getElementById('my-echart'))
        dom.setOption({
          color:'#526FEA',
          tooltip:{
            trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "none", // 默认为直线，可选为：'line' | 'shadow'
              label:'cross',
              show:true
            },
          },
          grid: {
            show: false,
            top: '10%',
            left: '1%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show:true,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#CCCCCC",
                type:'dashed',
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#AAAEB3",
              },
            },
            axisLabel: {
                //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#AAAEB3",
                fontSize: 12,
              },
              formatter: function (data) {
                return data;
              },
            },
          },
          yAxis:{
            type: 'category',
            data: data.map(v=>v.name),//.reverse(),
            axisLine: {
              lineStyle: {
                color: 'black',
                width: 0, //这里是为了突出显示加上的
              }
            },
            //刻度线
            axisTick: {
              show: false,
            },
          },
          series: [{
            label: {
              show: true,
              position: 'right',
              color:'black',
              textStyle: {
                fontWeight:'500',
                fontSize : '12',
                fontFamily : 'PingFangSC-Medium,PingFang SC',
              }
            },
            itemStyle:{
              normal:{
                //柱形图圆角
                barBorderRadius:[0, 13, 13, 0],
                color: function(params) {
                  var colorList = [
                    '#FF7C11','#1592FF','#10C6C6','#3DD973','#FC5C5C',
                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                  ]
                  return colorList[params.dataIndex]
                },
              }
            },
            name: '',
            data: data.map(v=>v.value),//.reverse(),
            type: 'bar',
            //条状宽度
            barMaxWidth: 22
          }]
        });
      }
    },