需要将弹窗作为组件引用到vue页面中，组件中存在dailog弹窗，弹窗中存在一个echarts画成的折线图。
测试代码
<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: '标题'
},
visible: {
type: Boolean,
default: false
},
},
data() {
return {
chart: null,
dialogVisible:true,
option: {
legend: {
data: ['招商银行', '浦发银行', '广发银行', '上海银行']
},
xAxis: {
type: 'category', // 还有其他的type，可以去官网喵两眼哦
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // x轴数据
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三个值
},
series: [
{
name: '招商银行',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
},
{
name: '浦发银行',
data: [620, 711, 823, 934, 1445, 1456, 1178],
type: 'line'
},
{
name: '广发银行',
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.爬坑重点
赋值.png
echar组件.png
此处不能直接在mounted中调用获取折线图容器 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: '标题'
},
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) {
// // 当visible改变的时候，触发父组件的 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()// 查询当前时间
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')
},
// 电网负荷曲线查询
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 === '无数据') {
this.$notify({message: '电网负荷预测暂无数据 !', type: 'info'})
return
}
this.myChartpl.setOption({
legend: {
data: res.data
},
series: res.data.series,
})
})
},
// 绘制电网负荷曲线
ForeLineChart(lineId) {
// 生成时间横坐标
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)
// 当窗口或者大小发生改变时执行resize，重新绘制图表
window.addEventListener('resize', () => {
this.myChartpl.resize()
})
this.lineOption = ({
title: {
top: '1%',
left: 'center',
text: '电网负荷预测'
},
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}, // 时间间隔
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
// },
// // 点击取消的事件
// resetPopupData () {
// // 这里可重置数据
// this.dialogVisible = false
// },
// // 点击确定的按钮
// async submitPopupData () {
// this.dialogVisible = false
// },
}
}
</script>
<style scoped>
</style>
在父页面引用时考虑到关闭、确定、取消、等按钮用于隐藏弹窗。
