暴力解决echarts柱状图宽度不能更改问题
程序员文章站
2022-05-24 18:06:15
...
- Echarts使用 - Echarts官方实例
安装
cnpm install echarts -S (安装依赖并引入到 package.json)
引入
import echarts from 'echarts'
用法:
将条形图放在div里面,最好设置宽度为100%,下面会说到原因。
<div id="myChart" :style="{width: '100%', height: '500px'}"></div>
drawLine(state) {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: moment(state.queryFilter.date).format('YYYY-MM-DD')+'省份日报表',
left:'center'
},
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
left: '2%',
padding: 5,
},
grid: {
left: '5%',
right: '5%',
bottom: '20%',
scontainLabel: true
},
xAxis: [
{
boundaryGap: true,//默认true,这时刻度只是作为分隔线,标签和数据点都会在两个刻度之间。
type: 'category',
minInterval: 1,//自动计算的坐标轴最小间隔大小。
data: state.queryFilter.x,//x轴要显示的数据
axisTick: {
alignWithLabel: true
},
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '打单量',
type: 'bar',
barWidth: '50%',
data: state.queryFilter.y,//y轴要显示的数据
// barCategoryGap: '1%'
}
],
});
}
如果不指定div宽度,那么经过数据填充,一个echarts柱状图迎面而来。问题来了,文字显示不全。
那么,指定宽度将div拉长?嗯,终于文字能对应显示了,问题又来了,好一个“犹抱琵琶半遮面”。
这个大坑。。。我甚至试过在数据填充的时候用空数组来填充。(我靠,算法就该这么玩!)没毛病,但是毕竟来公司第一个上手项目,余心有不甘,遂继续探索。
有人可能会说,官方文档不是说了barGap“柱间距离,可设固定值(如 20)或者百分比(如 ‘30%’,表示柱子宽度的 30%)。”
可惜,这玩意儿不是“单身狗”拥有的属性。就是说只有当双柱状图才可使用(就是一组两个条,两种颜色相拥在一起那种)。
先把div宽度指定为100%再说。后来看文档发现有几个比较好的玩意儿来操作x轴:
xAxis下:
axisLabel: {
interval: 0,// 0 强制显示所有,1为隔一个标签显示一个标签,2为隔两个
rotate: 45,//标签旋转角度,在标签显示不下的时可通过旋转防止重叠
textStyle: {
fontSize: 15,//字体大小
}
}
还有就是xAxis下有两个属性:
boundaryGap: true,//默认true,此时刻度作为分隔线,标签与数据点在两个刻度间显示
minInterval: 1,//默认0,设置成1保证坐标轴分割刻度显示成整数。
最后终于完美展示:
echarts的柱子之间宽度是不能调!不能调!!不能调!!!
上一篇: Spring 中 Bean 的生命周期
下一篇: 单词接龙