这里写自定义目录标题
效果:手动改变窗口大小,echarts实现自动适应父级盒子宽度
1.在vue中安装一个插件element-resize-detector-----这是一个元素调整大小检测器
npm install element-resize-detector
2.安装成功后在页面引用
<template>
<div>
<div id='echartsWarp'>
<div id="speeds" :style="{ width: '100%', height: '450px' }"></div>
<div>
</div>
</template>
<script>
// 直接导入使用，也可以在main.js中引入
//elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
var elementResizeDetectorMaker = require("element-resize-detector");
export default {
name: "Index",
data() {
return {
}
},
mounted(){
this.changeEchartsWidthApi();
},
methods:{
//监听盒子大小,改变echarts宽度,实现echarts自适应
changeEchartsWidthApi() {
// 创建实例，无参数
var erd = elementResizeDetectorMaker(); //使用默认选项（将使用基于对象的方法）
// 创建实例带参数
// 使用基于超快速滚动的方法。
// 这是推荐的策略。
var erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll",
callOnAdd: true, //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
//如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
//被调用（不会阻止其被调用）
debug: true,
});
//监听class为staticNextMain的元素 大小变化
var self = this;
//侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
//覆盖实例选项
erd.listenTo(document.getElementById("echartsWarp"), function (element) {
//今日车速
self.speedChartsApi();
});
},
//今日车速
speedChartsApi() {
// 基于准备好的dom，初始化echarts实例
this.$nextTick((_) => {
const dom = document.getElementById("speeds");
dom.style.width = dom.parentNode.parentNode.clientWidth + "px";
// let myChart = this.$echarts.init(document.getElementById("speeds"));
let myChart = this.$echarts.init(dom);
// 绘制图表
myChart.setOption({
title: {
text: "2022-01-14",
left: "50px",
textStyle: {
color: "#666666", //颜色
fontStyle: "normal", //风格
fontWeight: "normal", //粗细
fontFamily: "Microsoft yahei", //字体
fontSize: 16, //大小
align: "center", //水平对齐
},
},
legend: {
data: ["历史车速"],
},
tooltip: {
trigger: "axis",
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"06:15",
"07:15",
"08:15",
"09:15",
"10:15",
"11:15",
"12:15",
"13:15",
"14:15",
"15:15",
"16:15",
"17:15",
"18:15",
"19:15",
"20:15",
"21:15",
"22:15",
"23:15",
],
},
yAxis: {
type: "value",
},
series: [
{
data: [
820, 932, 901, 934, 1290, 1330, 1320, 2344, 234, 123, 222, 111,
333, 345, 1234, 234, 5678, 234,
],
name: "历史车速",
type: "line",
smooth: true, //平滑
color: "#24C2DC",
stack: "Total",
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#7CE2D8", // 0% 处的颜色
},
{
offset: 1,
color: "#E9FAF8", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
});
myChart.resize();
setTimeout(function () {
window.addEventListener('resize', () => {
myChart.resize();
})
}, 200);
});
},
}
}
</script>
