記事ディレクトリ
はじめに:
プロジェクト要件では、データの変化傾向を表示するには、el-table 内のデータをクリックする必要がありますが、echarts4 を使用すると、el-dialog をクリックするたびに表示されないことがわかります。初回クリック時はechartsの内容ですが、要素を閲覧すると要素内にechartsを格納するボックスがあることがわかり、2回目のクリックで開くとチャートが表示されますが、チャートが密集していますページ検査により、幅と高さが 100 ピクセルしかないことがわかりますが、スタイルの幅と高さは 100% に設定されています。
<el-dialog :title="trendtitle"
:visible.sync="trendopen"
width="800px"
append-to-body>
<div id="main1"></div>
</el-dialog>
問題分析:
分析では、ダイアログが完全に表示されておらず、チャートが初期化されたため、アイコン コンテナーが初めてマウントされませんでした。その後、チャート コンテナをロードする dom がマウントされていないため、設定された幅と高さのスタイルは 100% 無効になります。
問題が解決しました：
これを使用します。$nextTick(()=>{コンテナを取得})
this.$nextTick(() => {
let myChart = this.$echarts.init(document.getElementById('main1'))
myChart.setOption({
title: {
text: upc
},
tooltip: {
},
//配置x轴
xAxis: {
// data: ['一班', '二班', '三班', '四班', '五班', '六班']
data: xdataTime,
boundaryGap: false,
// axisLine: {
// show: true,
// lineStyle: {
// width: 1,
// type: "solid"
// }
// },
axisLabel: {
//设置x轴的字
interval: 0,//使x轴横坐标全部显示
rotate: 45
},
},
grid: {
left: '20%',
bottom: '30%'
},
//配置固定滚动条
dataZoom: [{
type: 'slider',
show: true,
startValue: 0,
endValue: 10,
height: '15',
bottom: '3%',
zoomLock: true
}],
//配置y轴，可不配置，自定义了根据间隔
yAxis: {
},
series: [{
name: upc,
type: 'line',
// data: [45, 42, 46, 48, 52, 47]
data: arr
}]
})
})
ps：
使用してください参照取得図に示すように、echarts コンテナを取得することはできません。
<el-dialog :title="trendtitle"
:visible.sync="trendopen"
width="800px"
append-to-body>
<div id="main1"
ref="main1"></div>
</el-dialog>
