好久没更新了，总结一波柱状图上面的一些配置。也是自己记录下，下次好找，毕竟图表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就是你的图表实例
});关于上面有更好的方法各位也可以提出来