好久没更新了，总结一波柱状图上面的一些配置。也是自己记录下，下次好找，毕竟图表api谁还记这个玩意啊，也记不住。如果觉得有用各位可以收藏一波，以防迷路。基本都有注释，没注释的应该看名称也很容易知道是啥玩意。 

initChart2() {var chartDom = this.$refs.Chart_2;var myChart = this.myChart2 = echarts.init(chartDom);myChart.showLoading({text: '',color: '#1890FF',textColor: '#000',maskColor: 'rgba(255, 255, 255, 0.2)',zlevel: 0,});var option;let scoreShow = false//配置滚动条出现条件let xArr = [193, 234, 298, 234, 898]if (xArr.length > 6) {//超过八条才显示scoreShow = true}option = {grid: {top: '25%', // 距离顶部10%bottom: '5%', // 距离底部15%left: '0%', // 距离左侧10%right: '10%', // 距离右侧10%containLabel: true // 包含坐标轴标签},title: {text: '{text1| 园区充电}{text2| (近一周)}',textStyle: {rich: {text1: {color: 'black',fontSize: 16,fontWeight: 'bold'}, text2: {color: '#999',fontSize: 13,}}}},tooltip: {trigger: 'axis'},xAxis: {type: 'value',// boundaryGap: 0.1,},yAxis: {type: 'category',data: ['金店雅苑三期202室外', 'Indo', '金店雅苑三期202室外', 'Indo', '金店雅苑三期202室外'],axisLabel: {interval: 0,//rotate:30,formatter: function (val) {var strs = val.split(''); //字符串数组var str = ''for (var i = 0, s; s = strs[i++];) { //遍历字符串数组str += s;if (!(i % 6)) str += '\n'; //按需要求余}return str}}},series: [{name: '2012',type: 'bar',color: '#1890FF',data: xArr,label: {show: true,position: 'right'// position: 'insideRight'},}],dataZoom: [{// 设置滚动条的隐藏或显示show: scoreShow,// 设置类型type: "slider",// 设置背景颜色backgroundColor: "gray",// backgroundColor: "rgb(19, 63, 100)",// 设置选中范围的填充颜色fillerColor: "rgb(16, 171, 198)",// 设置边框颜色borderColor: 'transparent',// 是否显示detail，即拖拽时候显示详细数值信息showDetail: false,// 数据窗口范围的起始数值startValue: 0,// 数据窗口范围的结束数值（一页显示多少条数据）endValue: 6,// minValueSpan: 6,  // 放大到最少几个maxValueSpan: 4,  //  缩小到最多几个// 控制哪个轴，如果是number表示控制一个轴，// 如果是Array表示控制多个轴。此处控制第二根轴yAxisIndex: [0, 1],// empty：当前数据窗口外的数据，被设置为空。// 即不会影响其他轴的数据范围filterMode: "empty",// 滚动条高度width: 4,// 滚动条显示位置height: "80%",// 距离右边right: 3,// 控制手柄的尺寸handleSize: 0,// 是否锁定选择区域（或叫做数据窗口）的大小zoomLoxk: true,// 组件离容器上侧的距离// 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐top: "middle",brushSelect: false,//刷选功能，false阻止滚动条条长度改变},{// 没有下面这块的话，只能拖动滚动条，// 鼠标滚轮在区域内不能控制外部滚动条type: "inside",// 控制哪个轴，如果是number表示控制一个轴，// 如果是Array表示控制多个轴。此处控制第二根轴yAxisIndex: [0, 1],// 滚轮是否触发缩放zoomOnMouseWheel: false,// 鼠标移动能否触发平移moveOnMouseMove: true,// 鼠标滚轮能否触发平移moveOnMouseWheel: true,},]};window.addEventListener("resize", () => {myChart.resize();});option && myChart.setOption(option);}

哦，补充下，loading关闭是用图表的实例.hideLoading() 关闭。

上面的滚动条的部分主要在dataZoom部分，label换行在format部分，主副标题在一行显示看title配置部分。

哦，对了，兄弟们要是发现mounted后图表溢出了，超过你的div了,那么你得看看你的div是不是一个具体的宽高，还有父元素的宽高是不是不是具体的而影响了布局。

这里给两个建议：

1.设置具体的宽高

2.如果你用的flex啥的还有百分比的形式，那么不考虑接口延迟情况下，可以加个短暂的定时器再去挂载图表。

都到这里了，那么就顺便附上个人用的图表自适应大小的代码吧。

window.addEventListener("resize", () => {myChart.resize();//myChart就是你的图表实例});

关于上面有更好的方法各位也可以提出来