使用sortable拖拽echarts(echarts批量渲染、全屏显示、随屏幕resize
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chartDisplay</title>
</head>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/element-ui.css" />
<link rel="stylesheet" type="text/css" href="css/chartDisplay-drag.css" />
<body>
<div id="app">
<div class="chartDisplay">
<div class="header">
<div class="title "><i class="my-icon-requireReport"></i>需求报告<a class="my-icon-chartSearch" @click="search"></a></div>
<div class="toolBar">
<a href="新建需求统计表.html">
<el-button class="newBtn"><i class="el-icon-plus"></i> 新建</el-button>
</a>
<el-button class="backBtn">返回</el-button>
</div>
</div>
<div class="body">
<el-row :gutter="20" class="moveBox" ref="moveBox">
<el-col :span="8" class="demandChartCol disMoveItem " ref="demandChartCol" id="demandChartCol" data-id="0">
<div class="demandReportBlock block ">
<div class="chartHeader">
<div class="title longText"><i class="my-icon-chartDecoration"></i>需求报告</div>
</div>
<div class="releaseCondition">
<span class="condition"><i
class="my-icon-releaseQuantity"></i>已经发布数量：{
{
demandReportData.releaseCondition.releaseQuantity}}个</span>
<span class="condition"><i
class="my-icon-releaseTotal"></i>发布总数：{
{
demandReportData.releaseCondition.releaseTotal}}个</span>
</div>
<div class="charts">
<el-row>
<el-col :span="12">
<div ref="demandPieChart" id="pieChart"></div>
</el-col>
<el-col :span="12">
<div ref="demandStackBarChart" id="stackBarChart"></div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="8" v-for="item,index of chartListData" :key="index" class="addChartCol moveItem" :class="item.hidden?'hidden':''" :data-id="item.id">
<div class="addChart block " :ref="'chartBlock'+item.id" :id="item.id">
<div class="chartHeader">
<div class="title longText"><i class="my-icon-chartDecoration"></i>{
{
item.chartTitle}}</div>
<div class="chartToolBar">
<div class="switch inlineB" :class="item.showTable?'showTable':''">
<span class="inlineB" @click="showChart(item,index)"
@mouseup="showChartMouseupEvent($event,index)">图</span>
<!-- item.showTable=!item.showTable -->
<span class="inlineB" @click="showTable(item,index)"
@mouseup="showTableMouseupEvent($event,index)">表</span>
</div>
<i class="my-icon-fullScreen" @click="myFullscreen(item,index)"></i>
<i class="my-icon-more" @click="showingMoreDropdown(item.id)"></i>
<!-- 由于全屏下，不显示element的弹窗，所以自定义一个 -->
<transition name="el-zoom-in-top">
<ul v-show="showingMoreDropdownId==item.id" class="moreDropdown el-dropdown-menu">
<li class="el-dropdown-menu__item" v-if="item.showTable==false" @click="saveChartImg(index,item)">保存图片</li>
<li class="el-dropdown-menu__item disbled" v-else>保存图片</li>
<li class="el-dropdown-menu__item" v-if="item.showTable">导出列表</li>
<li class="el-dropdown-menu__item disbled" v-else>导出列表</li>
<li class="el-dropdown-menu__item">编辑列表</li>
<li class="el-dropdown-menu__item" @click="showDelMsgBox(item,index)">删除列表</li>
</ul>
</transition>
</div>
</div>
<div class="chartBody" :ref="'chartBody'+item.id">
<div class="chartContainer" :ref="'chart'+item.id" v-show="!item.showTable"></div>
<div class="tableContainer" v-show="item.showTable">
<el-table :data="item.tableData" style="width: 100%" :max-height="tableMaxHeight" border
header-row-class-name="tableHeaderRow" size="mini">
<el-table-column v-for="(item, index) in item.tableHeader" :key="index" :width="item.width"
:show-overflow-tooltip="true" min-width="10" :label="item.label" align="center">
<template slot="header" slot-scope="scope">
<div @mouseover="onMouseOverTableHeader('refName' + scope.$index)">
<el-tooltip :disabled="isShowTooltip" :content="item.label" placement="top">
<div class="longText">
<span :ref="'refName' + scope.$index">{
{
item.label}}</span>
</div>
</el-tooltip>
</div>
</template>
<template slot-scope="scope">
<div class="total" v-if="item.prop=='total'">{
{
scope.row[item.prop]}}</div>
<span v-else class="tableContent">{
{
scope.row[item.prop]}}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="maskFull" :ref="'maskFull'+item.id">
</div>
<div aria-label="删除" :ref="'delMsgBoxFull'+item.id" class="el-message-box__wrapper delMsgBoxFull" style="z-index: 2007;">
<div class="el-message-box">
<div class="el-message-box__header">
<div class="el-message-box__title">
<!----><span>删除</span></div><button @click="cancelDelChart" type="button" aria-label="Close" class="el-message-box__headerbtn"><i
class="el-message-box__close el-icon-close"></i></button>
</div>
<div class="el-message-box__content">
<div class="el-message-box__container">
<div class="el-message-box__status el-icon-warning"></div>
<div class="el-message-box__message">
<p>此操作将永久删除此报表，是否继续？</p>
</div>
</div>
<div class="el-message-box__input" style="display: none;">
<div class="el-input">
<!----><input type="text" autocomplete="off" placeholder="" class="el-input__inner">
<!---->
<!---->
<!---->
<!---->
</div>
<div class="el-message-box__errormsg" style="visibility: hidden;"></div>
</div>
</div>
<div class="el-message-box__btns"><button type="button"
class="el-button el-button--default el-button--small cancelBtn" @click="cancelDelChart">
<!---->
<!----><span>
取消
</span></button><button type="button" @click="delChart"
class="el-button el-button--default el-button--small el-button--primary sureBtn">
<!---->
<!----><span>
确定
</span></button></div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 查询抽屉 -->
<el-drawer size="360px" :visible.sync="searchDrawer" direction="ltr" :show-close="false" custom-class="searchDrawer">
<el-form :model="searchForm" ref="searchForm" label-width="100px" class="searchForm ofh" size="small" >
<el-form-item label="部门：" prop="department">
<el-select v-model="searchForm.department" placeholder="请选择部门" style="width:100%">
<el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间：" prop="time">
<el-date-picker v-model="searchForm.time" type="daterange" format="yyyy.MM.dd" value-format="yyyy.MM.dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%">
</el-date-picker>
</el-form-item>
<el-form-item label="需求来源：" prop="demandSource">
<el-select v-model="searchForm.demandSource" placeholder="请选择需求来源" style="width:100%">
<el-option v-for="item in demandSourceOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="产品：" prop="product">
<el-select v-model="searchForm.product" placeholder="请选择产品" style="width:100%">
<el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="版本：" prop="">
<el-select v-model="searchForm.version" placeholder="请选择版本" style="width:100%">
<el-option v-for="item in versionOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态：" prop="">
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态：" prop="">
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态：" prop="">
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态：" prop="">
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态：" prop="">
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态：" prop="">
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态：" prop="">
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态：" prop="">
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item class="clearFormItem">
<a class="clearBtn" @click="resetForm('searchForm')">清空数据</a>
</el-form-item>
<el-form-item>
<div class="footerBtnGroup">
<el-button class="cancelBtn" @click="resetData">查询</el-button>
<el-button class="sureBtn" @click="saveData">保存</el-button>
</div>
</el-form-item>
</el-form>
</el-drawer>
<div class="maskFull" ref="maskSmall"></div>
<div aria-label="删除" ref="delMsgBoxSmall" class="el-message-box__wrapper delMsgBoxFull" style="z-index: 2007;">
<div class="el-message-box">
<div class="el-message-box__header">
<div class="el-message-box__title">
<!----><span>删除</span></div><button @click="cancelDelChart" type="button" aria-label="Close" class="el-message-box__headerbtn"><i
class="el-message-box__close el-icon-close"></i></button>
</div>
<div class="el-message-box__content">
<div class="el-message-box__container">
<div class="el-message-box__status el-icon-warning"></div>
<div class="el-message-box__message">
<p>此操作将永久删除此报表，是否继续？</p>
</div>
</div>
<div class="el-message-box__input" style="display: none;">
<div class="el-input">
<!----><input type="text" autocomplete="off" placeholder="" class="el-input__inner">
<!---->
<!---->
<!---->
<!---->
</div>
<div class="el-message-box__errormsg" style="visibility: hidden;"></div>
</div>
</div>
<div class="el-message-box__btns"><button type="button"
class="el-button el-button--default el-button--small cancelBtn" @click="cancelDelChart">
<!---->
<!----><span>
取消
</span></button><button type="button" @click="delChart"
class="el-button el-button--default el-button--small el-button--primary sureBtn">
<!---->
<!----><span>
确定
</span></button></div>
</div>
</div>
</div>
</body>
<!-- 开发环境 -->
<script src="js/vue.js"></script>
<!-- 生产环境 -->
<!-- <script src="js/vue.min.js"></script> -->
<script src="js/element-ui.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<!-- 引入 sortable 文件 -->
<script src="js/sortable.min.js"></script>
<!-- 引入 muuri 文件,可拖动流式布局 -->
<!-- <script src="js/muuri.min.js"></script> -->
<!-- 引入 muuri需配合的动画，防止有些浏览器动画失效 -->
<!-- <script src="js/web-animations.min.js"></script> -->
<!-- 引入element-resize-detector用来响应元素的宽高 -->
<!-- <script src="js/element-resize-detector.min.js"></script> -->
<script>
let vm = Vue.extend({
data() {
return {
sortable:null,
originalSortLis:[],
sortList:[],
deleting:false,
deletingId:'',
deledIdList:[],
dragReleaseEnd:false,
showingBlockIdList:[],
showTableList:[],
searchDrawer:false,
showingMoreDropdownId: null,
fullscreen: false,
fullscreenChart:null,
isShowTooltip: false,
chartObjList: {
},
tableMaxHeight: 0,
searchForm:{
department:'',
time:'',
demandSource:'',
product:'',
version:'',
status:''
},
departmentOptions:[
{
value: '1',
label: '优先级'
},
{
value: '2',
label: '状态'
}
],
demandSourceOptions: [
{
value: '1',
label: '优先级'
},
{
value: '2',
label: '状态'
}
],
productOptions: [
{
value: '1',
label: '优先级'
},
{
value: '2',
label: '状态'
}
],
versionOptions: [
{
value: '1',
label: '优先级'
},
{
value: '2',
label: '状态'
}
],
statusOptions: [
{
value: '1',
label: '优先级'
},
{
value: '2',
label: '状态'
}
],
demandReportData: {
releaseCondition:
{
releaseQuantity: "12004",
releaseTotal: "19000"
}
,
PieChartData: {
seriesName: '2023年',
seriesData: [
{
name: "已发布数量",
value: 7890
},
{
name: "发布总数",
value: 19000
}
]
},
stackBarChartData: {
xLables: ["中台研发中心1", "中台研发中心2", "中台研发中心3", "中台研发中心4", "中台研发中心5"],
series: [
{
data: [80, 50, 90, 60, 60],
name: "待处理",
type: "bar",
stack: '堆叠',
},
{
data: [90, 50, 80, 60, 60],
name: "开发中",
type: "bar",
stack: '堆叠',
},
]
},
},
chartListData: [
{
id: "1",
chartTitle: '报表名111111111111111111111111111111111111111111111111111111111111111111111111111',
chartType: 'barChart',
showTable: false,
hidden:false,
这是一个使用Vue和ECharts实现的复杂图表应用，包括饼图、堆叠柱状图、柱状图、折线图、折柱混合图等。页面支持图表的拖拽、全屏显示、根据屏幕大小自动调整大小、表格显示和隐藏切换等功能。同时，还实现了图表的保存为图片、数据查询、删除图表等操作。代码中还包含了图表的自定义事件监听和处理，如鼠标悬浮显示表头提示、全屏退出监听等。
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
