echarts容器的宽度根据父元素宽度变化进行自适应
我们用echarts的实现一些柱状图什么的总是不免要面临自适应的问题一般的都是根据浏览器窗口大小改变宽度实现自适应,也就是用resize的方法但是我的项目是后台管理系统,有一个侧边栏的伸缩并不属于浏览器窗口大小变化,发现侧边栏收缩时echarts的图形并没有随着宽度变化而铺满盒子大小,怎么办??找了很多办法,有一个方法生效,一起来分享一下先看效果这是侧边栏没有伸缩的时侯...
·
我们用echarts的实现一些柱状图什么的总是不免要面临自适应的问题
一般的都是根据浏览器窗口大小改变宽度实现自适应,也就是用resize的方法
但是我的项目是后台管理系统,有一个侧边栏的伸缩并不属于浏览器窗口大小变化,发现侧边栏收缩时echarts的图形并没有随着宽度变化而铺满盒子大小,怎么办??
找了很多办法,有一个方法生效,一起来分享一下
先看效果
这是侧边栏没有伸缩的时侯
这是侧边栏伸缩的时侯
echarts能根据宽度不同平铺
直接上代码
首先给echarts百分比的宽度
然后在methods里写echarts的配置项
methods: {
myCharts() {
let myChart = echarts.init(this.$refs.rankMain);
let option = {
grid: {
top: "1%",
bottom: "-7%",
left: "4%",
right: "11%",
containLabel: true,
},
xAxis: {
show: false,
type: "value",
},
yAxis: {
axisTick: {
show: false,
},
inverse: true, //倒序
// //坐标轴线
axisLine: {
show: false,
lineStyle: {
color: "rgba(0,0,0,.45)",
},
},
type: "category",
data: this.softwareList,
},
series: [
{
type: "bar",
emphasis: {
itemStyle: {
color: "rgba(255, 157, 77, 1)",
},
},
data: this.avgValueList,
barWidth: 14,
z: 10,
tooltip: { show: false },
itemStyle: {
// 柱子样式
normal: {
color: "rgba(255, 157, 77, 1)", // 柱状图颜色
barBorderRadius: [20],
legendHoverLink: false,
label: {
show: true, // 显示文本
position: ["100%", 2], // 数据值位置
formatter: "{c}小时",
textStyle: {
color: "rgba(0, 0, 0, 0.65)",
fontSize: 12,
},
},
},
},
},
{
type: "bar",
emphasis: {
itemStyle: {
color: "rgba(255, 235, 219, 1)",
},
},
data: this.timeData,
tooltip: { show: false },
barWidth: 14,
barGap: "-100%", // 两个柱子之间的距离,如果要重叠设置为-100%
itemStyle: {
normal: {
barBorderRadius: [20],
color: "rgba(255, 235, 219, 1)", // 柱子颜色,作为底层背景
label: {
show: false,
},
},
},
},
],
};
myChart.setOption(option);
},
},
然后在mounted里渲染,自适应宽度平铺echarts也在这里写
mounted() {
setTimeout(() => {
this.myCharts();
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(this.$refs.rankMain);
});
},
更多推荐
已为社区贡献2条内容
所有评论(0)