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：这是对柱子上显示出来的文字进行调整的，参考如下