echarts 橫向柱形圖的使用

echarts 橫向柱形圖的使用

歡迎使用Markdown編輯器

遇到了一個需求，實現橫向的柱形圖，並在左上角顯示對應的名稱【第一次用echarts，不太熟悉用法】

要解決以下幾個問題

1. 柱形圖展示爲橫向
2. 隱藏掉X軸Y軸的數據顯示
3. 如何在柱形圖上顯示相應的數據

代碼展示

yAxis: [{//數據放在Y軸，解決橫向柱形圖
          type: 'category',
          data: [],
          show:false,//不顯示X軸的標註
          splitLine: {show: false},
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 15
          },
          axisLabel :{
            interval:0
          }
        }],
 series: [
          {
            name: 'XXX',
            type: 'bar',
            data: [],//存放的是黃色柱形的數據
            color:'#F8E37A',
            barWidth:20,//設置柱形的寬度
            barMinWidth:20,//最小寬度 barGap: 0可以讓黃藍之間沒有空隙
            label: {
              show: true,
              color:'#2173B3',//標籤的顏色
              position: [0, -12],//將label  顯示在黃色柱形的左上角
              formatter:(params)=>params.name //顯示對應的名稱
              },
            },
]

遇到的問題

1.echarts的canvas沒有佔滿父組件【width:100%;height:100%】時

grid: {//通過option.grid 實現佔滿父組件
          top:"50px",
          left:'10px'
          right:"40px",
          bottom:"50px"
        },

2.要顯示不同樣式的標籤或顯示x/x的格式

              formatter:(params)=>{//顯示黃藍兩個的比值  例如1/4
                let len=this.option.yAxis[0].data.length
                for(var i=0;i<len;i++){
                  if(this.option.yAxis[0].data[i] == params.name){
                    let value=params.value+'/'+this.option.series[0].data[i]
                    return `{color1|${params.name}}{color2|${value}}` //實現的效果爲 XXX  X/X
                  }
                }
              },
                rich:{
                color1:{
                  color:'',

                },
                color2:{
                  color:'',
                }
              }

echarts 關於position的設定 有inside的相關屬性 爲啥沒有outside 小問號
給自己記錄下