echart-vue-條形圖和柱狀圖的設置

var seriesLabel = {
  //柱子文字顯示
  normal: {
    show: true,
    color: "#fff",
    // textBorderColor: '#333',
    // textBorderWidth: 2,
    position: "right",
  },
};

 

1：設置柱狀圖在父容器的位置大小以便更好調整自適應圖標的具體顯示：

這個canvas繪制是基於容器contanner的大小來的，但事實上很多時候會偏向距離和大小，首先設置contanner

 

<template>
    <div>
        <div id="serverTime" 
        style="width:100%;height:20vh;"></div>
    </div>
</template>

vue組件serverTime 寬度是可以在父組件內使用此組件元素設置，高度必須固定。不然會讀取不到像百分比和動態設置高度的最后都會失效導致圖表高度為零，顯示不出圖表，這也是首先要注意的地方，不過卻可以使用vh，讀取適當的高度顯示圖表。

接下來進一步設置圖表顯示，畢竟有的圖表根據需求顯示數據高度要高或寬度要寬等，這樣才更靈活

設置具體繪制的寬高大小定位主要在option 內的grid字段內設置，這也是表的總體位置大小設置：例如

  grid: {
                    //表格位置
                    top: 30, //根據canvas所在div
                    left: 30, //位置設置
                    // show:false
                    // height: "70%", //寬高根據所有包含網格標題的大小所以要算進去
                    width:"80%"//不設置為自適應
                  },

2：設置條形圖的x軸y軸的坐標上的文字：

圖表具體設置后x軸和y軸有時候會需要設置字體大小和顏色，注意，xy軸字體設置是和條形圖上顯示的數據文字設置區別開了來的

x軸和y軸上文字設置也是區別開來的：
x軸：
xAxis: {
 axisLabel: {//側邊欄的標題字
                    interval: 0,//顯示不全
                    // rotate: 25,//文字傾斜角度
                    fontSize:'10px'
                    },
}
y軸：
 yAxis: {
axisLabel:{//y軸標題文字設置
                        fontSize:'10px',
                        // color:"pink"
                    },
}

另外注意，網上搜索的設置xy軸的方法是這樣的：xAxis.nameTextStyle 坐標軸名稱的文字樣式。實際上測試這種設置是無效果的

3：隱藏網格設置：

xy軸默認是有個網格的，如果不想要想要圖表更干凈利索，就需要去掉網格：

具體設置是：

主要是對y軸的設置：
                yAxis: {
                    type: 'value',
                    axisLabel:{//y軸標題文字設置
                        fontSize:'10px',
                        // color:"pink"
                    },
                    splitLine:{//隱藏背景網格
                        // show:false,
                         lineStyle:{
                            color: ['red'],
                            width: 0,
                            type: 'dashed'
                        }
                },

　　4：網格去掉了，但是x軸和y軸的軸線顏色有時候也會被客戶需求調整，這個其實也可以進行設置：

x軸：
xAxis: {
    axisLine: {
                        show:true,
                                lineStyle: {
                                    color:'#ffffff'  //x軸顏色
                                }
                        }
}
y軸：
yAxis：{
 splitLine:{//隱藏背景網格
                        // show:false,
                         lineStyle:{
                            color: ['red'],
                            width: 0,
                            type: 'dashed'
                        }
}

5：（決定柱狀圖還是條形圖） 另外擴展一個：條形圖和柱狀圖的區別是圖的縱向和橫向，其實主要對x軸和y軸默認顯示問題，調整兩個顯示即可：

柱狀圖：
 xAxis: {
type: 'category',
...
}
 yAxis: {
     type: 'value',
...
}    
條形圖：
反過來即可

 

6:柱狀圖設置鼠標移到指定項文字顯示：

這個直接看官網api也不好找，實戰總結如下

首先配置option內添加字段：
        tooltip: {//鼠標事件

　　　　　　trigger: "axis",//一組兩個或多個為單位,去掉就會作用在每個柱子單位

          axisPointer: {
            type: "shadow",
          },
        },

然后在series內具體的data配置：
每個date是一個數組（如果有兩組三組為一組數據）
data內添加name屬性，name會默認顯示數據的
 name: "數據1:",

完整series數據代碼：

        series: [
          {
            name: "數據1:",
            type: "bar",
            barWidth: 10, //柱圖寬度
            barGap: "100%", //多個並排柱子設置柱子之間的間距
            data: data1Arr,
            label: seriesLabel,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 1, color: "#23FFFF" }, //柱圖漸變色
                { offset: 0, color: "#1E62FF" }, //柱圖漸變色
              ]),
            },
          },
          {
            name: "數據2:",
            type: "bar",
            barWidth: 10, //柱圖寬度
            // barCategoryGap:'10%',
            barGap: "100%", //多個並排柱子設置柱子之間的間距
            label: seriesLabel,//柱子上設置說明
            data: data2Arr,//這里是指具體每個柱子的數據值，柱子高度據此為依據
            // data: [150, 105, 110,33],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 1, color: "#23FFFF" }, //柱圖漸變色
                { offset: 0, color: "#1E62FF" }, //柱圖漸變色
              ]),
            
            },
          },
        ],

7：對柱子的設置：

這個最常用，柱子大小寬度顏色，漸變，背景，文字等還是比較自由配置的：

代碼參考上面的，其中 

柱子寬度：

barWidth

多個柱子間距：

barGap 這個要配合grid的寬高進行調整的

itemStyle：柱子的背景顏色可以進行設置：比如

 itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 1, color: "#23FFFF" }, //柱圖漸變色
                { offset: 0, color: "#1E62FF" }, //柱圖漸變色
              ]),
            
            },

 

label：這是對柱子上顯示出來的文字進行調整的，參考如下