echart-vue-条形图和柱状图的设置

Posted 2021-06-22 少哨兵

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\',
...
}    
条形图：
反过来即可