[JavaScript知识库]echarts条形图

<div id="sexColumnPic" v-show="isShowSexPic === 2" style="height:313px;"></div>

// 性别条形图
      getSexColumnPic(){
        let option;

          option = {
            yAxis:{
              type:'category',
              data:this.columnOptionData(this.sexTableData),
              axisLabel:{
                interval:0 // 0：强制显示所有标签 1：隔一个标签显示一个
              },
              axisTick:{
                show:false // 不显示坐标轴刻度线
              },
              inverse:true
            },
            xAxis:{
              type:'value'
            },
            series:[
              {
                data:this.columnSeriesData(this.sexTableData),
                type:'bar',
                itemStyle:{
                  normal:{
                    color:'#229399',
                    label:{
                      show:true,
                      position:'right',
                      textStyle:{
                        fontSize:12,
                        color:'#666'
                      }
                    }
                  }
                }
              }
            ]
          }

          // 初始化图表前，先设置容器宽高，否则显示不出来
          let width = document.getElementsByClassName('picBox')[0].offsetWidth - 44 + 'px';
          document.getElementById('sexColumnPic').style.width = width;

          let myChart = window["$hc"]["echarts"].init(document.getElementById("sexColumnPic"));
          myChart.setOption(option);
          window.onresize = () => {
            myChart.resize()
          }
      },