封装Echarts
1、页面形式
父组件
<template>
<div class="container">
<el-card>
<div class="box">
<Echart v-for="(item, index) in echatsList" :key="index" :idName="item.idName" :options="item.options"
:width=33></Echart>
</div>
</el-card>
</div>
</template>
<script>
import * as echarts from 'echarts';
import Echart from "../../components/Echart";
export default {
components: {
Echart
},
data() {
return {
echatsList: [{
idName: "mainOne",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
},
{
idName: "mainTwo",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}, {
idName: "mainThr",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}, {
idName: "mainFou",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}, {
idName: "mainFiv",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
},
{
idName: "mainSix",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}]
}
},
}
</script>
<style lang="scss" scoped>
.container {
margin: 20px;
}
.box {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
</style>
子组件（封装）
<template>
<div :id="idName" :style="{ width: width + '%', height: '500px' }"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "echart",
props: {
idName: {
type: String,
default: () => ""
},
options: {
type: Object,
default: () => { }
},
width: {
type: Number,
default: () => 100
}
},
data() {
return {
}
},
mounted() {
// 调用echarts(渲染在页面)
this.getEcharts()
},
methods: {
// 初始化数据(echarts复制过来的)
getEcharts() {
var myChart = echarts.init(document.getElementById(this.idName));
window.addEventListener('resize', function () {
myChart.resize();
});
myChart.setOption(this.options);
},
}
}
</script>
<style lang="scss" scoped></style>
2、弹窗
父组件
<template>
<div class="app-container">
<!-- 模糊搜素 -->
<el-card class="box-card">
<el-form class="top" :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="卫星编号" prop="satCode">
<el-select v-model="queryParams.satCode" placeholder="请选择卫星编号" @keyup.enter.native="handleQuery">
<el-option v-for="item in options" :key="item.satId" :label="item.satCode"
:value="item.satCode"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目标编号" prop="satName">
<el-select v-model="queryParams.satName" placeholder="请选择目标编号" @keyup.enter.native="handleQuery">
<el-option v-for="item in options" :key="item.satId" :label="item.satName"
:value="item.satName"></el-option>
</el-select>
</el-form-item>
<el-form-item label="载荷编号" prop="satName">
<el-select v-model="queryParams.satName" placeholder="请选择目标编号" @keyup.enter.native="handleQuery">
<el-option v-for="item in options" :key="item.satId" :label="item.satName"
:value="item.satName"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目标搜索" prop="satName">
<el-select v-model="queryParams.satName" placeholder="请选择目标编号" @keyup.enter.native="handleQuery">
<el-option v-for="item in options" :key="item.satId" :label="item.satName"
:value="item.satName"></el-option>
</el-select>
</el-form-item>
<el-form-item label="进站时间">
<el-date-picker v-model="queryParams.time" style="width: 380px" type="datetimerange" range-separator="-"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 表格 -->
<el-card class="box">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain>导出</el-button>
</el-col>
</el-row>
<el-table :data="tableData" stripe border @row-dblclick="handleRowDblclick">
<el-table-column label="序号" type="index" align="center" width="60px">
<template slot-scope="scope">
<span>{{ scope.row['index'] }}</span>
</template>
</el-table-column>
<el-table-column label="载荷编号" align="center" prop="satCode" :show-overflow-tooltip="true" />
<el-table-column label="平台编号" prop="deviceInfo" :show-overflow-tooltip="true" align="center" />
<el-table-column label="任务编号" prop="circleNo" align="center" />
<el-table-column label="目标编号" prop="satCode" align="center" />
<el-table-column label="开始时间" prop="satCode" align="center" />
<el-table-column label="结束时间" prop="satCode" align="center" />
<template slot-scope="scope">
<el-input type="textarea" autosize v-model="satCode" placeholder="请输入专家意见" style="width: 130px" />
</template>
</el-table-column>
</el-table>
<!-- @pagination="lookList" -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" />
</el-card>
<el-dialog v-dialogDrag :visible.sync="isShow" width="60%" append-to-body :before-close="cancel">
<editDialogView ></editDialogView>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
components: {
"editDialogView": () => import("./components/editDialogView.vue")
},
data() {
return {
isShow: false,
satCode: "",
options: [],
// 查询参数
queryParams: {
isUsed: "",
satCode: "",
satName: "",
time: [],
pageNum: 1,
pageSize: 10,
},
// 表格数据
tableData: [
{
index: 1,
satCode: 111,
deviceInfo: "fuhvuv",
circleNo: 'ded'
},
{
index: 2,
satCode: 222,
deviceInfo: "sefef",
circleNo: 'vfvsd'
},
{
index: 3,
satCode: 333,
deviceInfo: "thyt",
circleNo: 'edef'
}
],
// 总条数
total: 0,
rowData: {}
}
},
methods: {
handleQuery() { },
hanldenChange() { },
resetQuery() { },
handleRowDblclick(row) {
console.log("双击666", row)
this.isShow = true
this.rowData = row
},
viewClose() {
this.isShow = false
},
cancel() {
this.isShow = false
}
}
}
</script>
<style lang="scss" scoped>
.box-card {
margin-bottom: 10px;
}
.top {
margin-top: 20px;
}
</style>
子组件
<template>
<div class="container">
<el-card>
<div class="box">
<Echart v-for="(item, index) in echatsList" :key="index" :idName="item.idName" :options="item.options"
:width=33></Echart>
</div>
</el-card>
</div>
</template>
<script>
import * as echarts from 'echarts';
import Echart from "@/components/Echart";
export default {
components: {
Echart
},
data() {
return {
echatsList: [{
idName: "mainOne",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
},
{
idName: "mainTwo",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}, {
idName: "mainThr",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}, {
idName: "mainFou",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}, {
idName: "mainFiv",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
},
{
idName: "mainSix",
options: {
grid: {
bottom: '60px' // 距离底部60个像素
},
legend: {
data: ['Email'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
left: 'center',
bottom: '0px'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
} ]
}
},
}
</script>
<style lang="scss" scoped>
.container {
margin: 20px;
}
.box {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
</style>
