需要將彈窗作為組件引用到vue頁面中，組件中存在dailog彈窗违诗，彈窗中存在一個(gè)echarts畫成的折線圖怔鳖。
測(cè)試代碼
<template>
<el-dialog :title="dialogTitle"
:visible.sync="dialogVisible">
<div ref="myChart" style="height:400px;width: 96%;"></div>
</el-dialog>
</template>
<script>
import echarts from 'echarts'
export default {
name: "demo",
props: {
dialogTitle: {
type: String,
default: '標(biāo)題'
},
visible: {
type: Boolean,
default: false
},
},
data() {
return {
chart: null,
dialogVisible:true,
option: {
legend: {
data: ['招商銀行', '浦發(fā)銀行', '廣發(fā)銀行', '上海銀行']
},
xAxis: {
type: 'category', // 還有其他的type摹菠，可以去官網(wǎng)喵兩眼哦
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // x軸數(shù)據(jù)
name: '日期', // x軸名稱
// x軸名稱樣式
nameTextStyle: {
fontWeight: 600,
fontSize: 18
}
},
yAxis: {
type: 'value',
name: '縱軸名稱', // y軸名稱
// y軸名稱樣式
nameTextStyle: {
fontWeight: 600,
fontSize: 18
}
},
tooltip: {
trigger: 'axis' // axis item none三個(gè)值
},
series: [
{
name: '招商銀行',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
},
{
name: '浦發(fā)銀行',
data: [620, 711, 823, 934, 1445, 1456, 1178],
type: 'line'
},
{
name: '廣發(fā)銀行',
data: [612, 920, 1140, 1160, 1190, 1234, 1321],
type: 'line'
},
{
name: '上海銀行',
data: [234, 320, 453, 567, 789, 999, 1200],
type: 'line'
}
]
},
};
},
watch: {
},
mounted() {
this.$nextTick(()=>{
this.getEchart()
})
},
methods:{
getEchart(){
// this.$nextTick(()=>{
// var myChart = echarts.init(this.$refs.myChart)
// })
var myChart = echarts.init(this.$refs.myChart)
console.log(myChart)
myChart.setOption(this.option,true)
}
}
}
</script>
<style scoped>
</style>
1.爬坑重點(diǎn)
賦值.png
echar組件.png
此處不能直接在mounted中調(diào)用獲取折線圖容器 getElementById()方法盒卸，原因是dailog若未加載則其中echarts容器就獲取不到值，因此不能用id 使用 ref和 $refs取值的方式次氨。
附加
原始代碼
<template>
<!-- 封裝彈框 -->
<div class="echartsDialogUtil">
<!-- <el-dialog-->
<!-- v-dialogDrag-->
<!-- :title="dialogTitle"-->
<!-- :visible.sync="visible"-->
<!-- :before-close="handleClose"-->
<!-- :append-to-body="true"-->
<!-- @updateVisible="updateVisible"-->
<!-- @resetPopupData="resetPopupData"-->
<!-- @submitPopupData="submitPopupData"-->
<!-- @handleClose="handleClose"-->
<!-- >-->
<el-dialog
v-dialogDrag
:title="dialogTitle"
:visible.sync="visible"
:before-close="handleClose"
:append-to-body="true"
@handleClose="handleClose"
>
<div ref="myechar" style="height:400px;width: 100%;" />
</el-dialog>
</div>
</template>
<script>
import dailyInfomationApi from '@/api/pxf-settlement-outnetpub/informationDisclosure/dailyInfomationApi'
import echarts from 'echarts'
import moment from 'moment'
export default {
name: "echartsDialogUtil",
props: {
dialogTitle: {
type: String,
default: '標(biāo)題'
},
visible: {
type: Boolean,
default: false
},
id:{
type: String,
default: ''
},
dataDate:{
type: String,
default: ''
},
tableName:{
type: String,
default: ''
}
},
watch:{
},
computed: {
// dialogVisible: {
// get() {
// return this.visible
// },
// set(val) {
// // 當(dāng)visible改變的時(shí)候蔽介，觸發(fā)父組件的 updateVisible方法，在該方法中更改傳入子組件的 centerDialogVisible的值
// this.$emit('updateVisible', val)
// }
// }
},
data() {
return {
pickerDisabled: {
disabledDate: (time) => {
return time.getTime() > new Date(new Date().toLocaleDateString()).getTime()
}
},
// dataDate:'',
lineOption: null,
tableName: '',
// 曲線查詢條件
ipForeLoadCurvSearch: {
dataDate: '',
id: ''
},
myChartpl: null,
}
},
mounted() {
this.$nextTick(()=>{
this.ForeLineChart()
})
// this.getdatetime()// 查詢當(dāng)前時(shí)間
this.queryIpForeLoadCurv()
// this.ForeLineChart('myechar')
},
methods: {
// 重置Fore
// resetFore() {
// this.ipForeLoadCurvSearch = {
// dataDate: '',
// id: ''
// }
// },
getdatetime() {
// this.ipForeLoadCurvSearch.dataDate = this.dateFormat(new Date())
},
dateFormat(param) {
var date = param
if (date === undefined) {
return ''
}
return moment(date).format('YYYY-MM-DD')
},
// 電網(wǎng)負(fù)荷曲線查詢
queryIpForeLoadCurv() {
if (this.lineOption !== null) {
this.myChartpl.setOption(this.lineOption, true)
}
this.ipForeLoadCurvSearch.id = this.id;
this.ipForeLoadCurvSearch.dataDate = this.dataDate
dailyInfomationApi.queryIpForeLoadCurvPl(this.ipForeLoadCurvSearch).then(res => {
if (res.data === '無數(shù)據(jù)') {
this.$notify({message: '電網(wǎng)負(fù)荷預(yù)測(cè)暫無數(shù)據(jù) !', type: 'info'})
return
}
this.myChartpl.setOption({
legend: {
data: res.data
},
series: res.data.series,
})
})
},
// 繪制電網(wǎng)負(fù)荷曲線
ForeLineChart(lineId) {
// 生成時(shí)間橫坐標(biāo)
var m = 0
var n = 0
var arr = []
for (var i = 0; i < 96; i++) {
arr.push((m > 9 ? m : '0' + m) + ':' + (n > 9 ? n : '0' + n))
n += 15
if (n > 45) {
n = 0
m += 1
}
}
arr.push('00:00')
this.myChartpl = echarts.init(this.$refs.myechar)
// 當(dāng)窗口或者大小發(fā)生改變時(shí)執(zhí)行resize，重新繪制圖表
window.addEventListener('resize', () => {
this.myChartpl.resize()
})
this.lineOption = ({
title: {
top: '1%',
left: 'center',
text: '電網(wǎng)負(fù)荷預(yù)測(cè)'
},
legend: {
right: '5%',
data: []
},
grid: {
left: '5%',
right: '2%',
bottom: '0%',
containLabel: true
},
tooltip: {
trigger: 'axis',
confine: true// 防止提示框超出范圍
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {interval: 3}, // 時(shí)間間隔
data: arr
},
yAxis: {
name: '單位：兆瓦',
type: 'value'
},
series: []
})
this.myChartpl.setOption(this.lineOption)
},
Cancel () {
this.$emit('resetechartsDialogUtil')
},
Save () {
this.$emit('submitechartsDialogUtil')
},
handleClose () {
this.$emit('handleClose')
},
// // 修改是否讓頁面顯示與隱藏的事件
// updateVisible (val) {
// this.dialogVisible = val
// },
// // 點(diǎn)擊取消的事件
// resetPopupData () {
// // 這里可重置數(shù)據(jù)
// this.dialogVisible = false
// },
// // 點(diǎn)擊確定的按鈕
// async submitPopupData () {
// this.dialogVisible = false
// },
}
}
</script>
<style scoped>
</style>
在父頁面引用時(shí)考慮到關(guān)閉虹蓄、確定犀呼、取消、等按鈕用于隱藏彈窗薇组。
