init
This commit is contained in:
Jane
423
src/views/visual/databoard/DataBoardBuild.vue
Normal file
423
src/views/visual/databoard/DataBoardBuild.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div class="board-container">
|
||||
<div class="widget-left-container">
|
||||
<div class="widget-left-header">
|
||||
<span>{{ dataBoard.boardName }}</span>
|
||||
</div>
|
||||
<div class="widget-left-wrapper">
|
||||
<ul class="list-group">
|
||||
<li v-for="(item, index) in dataChartList" :key="item.id" class="list-group-item">
|
||||
<div class="list-group-item-text">{{ item.chartName }}</div>
|
||||
<div class="list-group-item-button"><el-button icon="el-icon-plus" type="text" size="mini" :disabled="item.disabled" @click="handleAddChart(item)" /></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-center-container">
|
||||
<div class="widget-center-header">
|
||||
<div class="widget-center-header-collapse" @click="drawer = true"><i class="el-icon-info" /></div>
|
||||
<div class="widget-center-header-button">
|
||||
<el-button icon="el-icon-view" type="text" @click="handlePreview">
|
||||
预览
|
||||
</el-button>
|
||||
<el-button icon="el-icon-delete" type="text" @click="handleReset">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-hasPerm="['visual:board:build']" icon="el-icon-plus" type="text" @click="handleSubmit">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button icon="el-icon-close" type="text" @click="handleCancel">
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-center-wrapper">
|
||||
<grid-layout
|
||||
:layout.sync="layout"
|
||||
:col-num="24"
|
||||
:row-height="30"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-mirrored="false"
|
||||
:vertical-compact="true"
|
||||
:use-css-transforms="true"
|
||||
:pane-container="false"
|
||||
:margin="[10, 10]"
|
||||
style="border: 1px dashed #999; height: 100%; overflow-x: hidden; overflow-y: auto;"
|
||||
>
|
||||
<grid-item
|
||||
v-for="item in layout"
|
||||
:key="item.i"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:i="item.i"
|
||||
drag-allow-from=".vue-draggable-handle"
|
||||
@resized="handleResize"
|
||||
>
|
||||
<el-card v-loading="getChartItem(item.i).loading" class="widget-center-card" body-style="padding: 10px;">
|
||||
<div slot="header" class="widget-center-card-header vue-draggable-handle">
|
||||
<div>
|
||||
<span>{{ getChartItem(item.i).chartName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="el-icon-delete" @click="handleDeleteChart(item.i)" />
|
||||
<i class="el-icon-setting" @click="handleTimerChart(item.i)" />
|
||||
</div>
|
||||
</div>
|
||||
<chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
|
||||
<div v-else :style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
|
||||
</el-card>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</div>
|
||||
</div>
|
||||
<el-drawer
|
||||
size="300px"
|
||||
:visible.sync="drawer"
|
||||
:with-header="false"
|
||||
>
|
||||
<div class="widget-board-form">
|
||||
<el-form size="mini" label-position="top">
|
||||
<el-form-item label="看板名称">
|
||||
<el-input v-model="dataBoard.boardName" size="mini" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="缩略图">
|
||||
<el-upload
|
||||
action="#"
|
||||
accept=".png, .jpg, .jpeg"
|
||||
list-type="picture-card"
|
||||
:limit="1"
|
||||
:auto-upload="false"
|
||||
:before-upload="beforeUpload"
|
||||
:on-change="handleChange"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
:class="{ hideUpload: hideUpload }"
|
||||
>
|
||||
<i slot="default" class="el-icon-plus" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDataBoard, buildDataBoard } from '@/api/visual/databoard'
|
||||
import { listDataChart, getDataChart, dataParser } from '@/api/visual/datachart'
|
||||
import VueGridLayout from 'vue-grid-layout'
|
||||
import ChartPanel from '../datachart/components/ChartPanel'
|
||||
import { compressImg, dataURLtoBlob } from '@/utils/compressImage'
|
||||
|
||||
export default {
|
||||
name: 'DataBoardBuild',
|
||||
components: {
|
||||
GridLayout: VueGridLayout.GridLayout,
|
||||
GridItem: VueGridLayout.GridItem,
|
||||
ChartPanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataBoard: {},
|
||||
dataChartList: [],
|
||||
layout: [],
|
||||
interval: [],
|
||||
charts: [],
|
||||
drawer: false,
|
||||
// 文件上传
|
||||
fileList: [],
|
||||
hideUpload: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDataBoard(this.$route.params.id)
|
||||
this.getDataChartList()
|
||||
},
|
||||
methods: {
|
||||
getDataBoard(id) {
|
||||
getDataBoard(id).then(response => {
|
||||
if (response.success) {
|
||||
this.dataBoard = response.data
|
||||
if (this.dataBoard.boardThumbnail) {
|
||||
const blob = dataURLtoBlob(this.dataBoard.boardThumbnail)
|
||||
const fileUrl = URL.createObjectURL(blob)
|
||||
this.fileList.push({ url: fileUrl })
|
||||
this.hideUpload = true
|
||||
}
|
||||
this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
|
||||
this.interval = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.interval)) : []
|
||||
const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
|
||||
charts.forEach((item, index, arr) => {
|
||||
this.parserChart(item)
|
||||
})
|
||||
this.charts = charts
|
||||
}
|
||||
})
|
||||
},
|
||||
parserChart(chart) {
|
||||
this.$set(chart, 'loading', true)
|
||||
if (chart.chartConfig) {
|
||||
dataParser(JSON.parse(chart.chartConfig)).then(response => {
|
||||
if (response.success) {
|
||||
this.$set(chart, 'data', response.data.data)
|
||||
this.$set(chart, 'chartSchema', JSON.parse(chart.chartConfig))
|
||||
this.$set(chart, 'loading', false)
|
||||
this.$set(chart, 'visible', true)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$set(chart, 'loading', false)
|
||||
}
|
||||
},
|
||||
getChartItem(id) {
|
||||
return this.charts.find(chart => chart.id === id)
|
||||
},
|
||||
getDataChartList() {
|
||||
listDataChart().then(response => {
|
||||
if (response.success) {
|
||||
this.dataChartList = response.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAddChart(chart) {
|
||||
const index = this.layout.findIndex(item => item.i === chart.id)
|
||||
if (index !== -1) {
|
||||
this.$set(chart, 'disabled', true)
|
||||
return
|
||||
}
|
||||
getDataChart(chart.id).then(response => {
|
||||
if (response.success) {
|
||||
const obj = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 12,
|
||||
h: 9,
|
||||
i: chart.id
|
||||
}
|
||||
this.layout.push(obj)
|
||||
const data = response.data
|
||||
this.parserChart(data)
|
||||
this.charts.push(data)
|
||||
this.$set(chart, 'disabled', true)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDeleteChart(id) {
|
||||
this.layout.splice(this.layout.findIndex(item => item.i === id), 1)
|
||||
this.charts.splice(this.charts.findIndex(item => item.id === id), 1)
|
||||
this.$set(this.dataChartList.find(item => item.id === id), 'disabled', false)
|
||||
},
|
||||
handleTimerChart(id) {
|
||||
this.$prompt('请输入定时时间间隔，输入0不定时（单位毫秒，1000 毫秒 = 1 秒）', '提示', {
|
||||
showClose: false,
|
||||
closeOnClickModal: false,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /^(0|\+?[1-9][0-9]*)$/,
|
||||
inputErrorMessage: '格式不正确',
|
||||
inputValue: '5000'
|
||||
}).then(({ value }) => {
|
||||
const timer = this.interval.find(item => item.id === id)
|
||||
if (timer) {
|
||||
this.$set(timer, 'milliseconds', value)
|
||||
} else {
|
||||
this.interval.push({ id: id, milliseconds: value })
|
||||
}
|
||||
}).catch(() => {})
|
||||
},
|
||||
handlePreview() {
|
||||
const route = this.$router.resolve({ path: `/visual/board/view/${this.dataBoard.id}` })
|
||||
window.open(route.href, '_blank')
|
||||
},
|
||||
handleReset() {
|
||||
this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
|
||||
this.interval = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.interval)) : []
|
||||
const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
|
||||
charts.forEach((item, index, arr) => {
|
||||
this.parserChart(item)
|
||||
})
|
||||
this.charts = charts
|
||||
this.dataChartList.forEach((item, index, arr) => {
|
||||
if (charts.findIndex(chart => chart.id === item.id) === -1) {
|
||||
this.$set(item, 'disabled', false)
|
||||
} else {
|
||||
this.$set(item, 'disabled', true)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
const data = {
|
||||
id: this.dataBoard.id,
|
||||
boardThumbnail: this.dataBoard.boardThumbnail,
|
||||
boardConfig: {
|
||||
layout: this.layout,
|
||||
interval: this.interval
|
||||
}
|
||||
}
|
||||
buildDataBoard(data).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
window.location.href = 'about:blank'
|
||||
window.close()
|
||||
},
|
||||
handleResize(i, newH, newW, newHPx, newWPx) {
|
||||
if (this.charts.find(chart => chart.id === i).visible) {
|
||||
this.$refs[`charts${i}`][0].$children[0].$emit('resized')
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB')
|
||||
}
|
||||
return isLt2M
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
this.hideUpload = fileList.length >= 1
|
||||
const config = {
|
||||
width: 250, // 压缩后图片的宽
|
||||
height: 150, // 压缩后图片的高
|
||||
quality: 0.8 // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
|
||||
}
|
||||
compressImg(file.raw, config).then(result => {
|
||||
// result 为压缩后二进制文件
|
||||
this.$set(this.dataBoard, 'boardThumbnail', result)
|
||||
})
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.hideUpload = fileList.length >= 1
|
||||
this.$set(this.dataBoard, 'boardThumbnail', 'x')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.board-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.widget-left-container {
|
||||
width: 250px;
|
||||
box-sizing: border-box;
|
||||
.widget-left-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.widget-left-wrapper {
|
||||
height: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
.list-group {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
.list-group-item-text {
|
||||
width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.list-group-item-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-center-container {
|
||||
width: calc(100% - 250px);
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #e4e7ed;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
.widget-center-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
.widget-center-header-collapse {
|
||||
float: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.widget-center-header-button {
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
.widget-center-wrapper {
|
||||
height: calc(100% - 40px);
|
||||
padding: 10px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
.widget-center-card {
|
||||
::v-deep .el-card__header {
|
||||
padding: 0;
|
||||
.widget-center-card-header {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-board-form {
|
||||
padding: 20px;
|
||||
.hideUpload ::v-deep {
|
||||
.el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.el-upload-list__item {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
232
src/views/visual/databoard/DataBoardList.vue
Normal file
232
src/views/visual/databoard/DataBoardList.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="board-container">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-pagination
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page.sync="queryParams.pageNum"
|
||||
:page-size.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row :gutter="20">
|
||||
<el-col v-hasPerm="['visual:board:add']" :span="6" class="box-card-col">
|
||||
<el-card :body-style="{ padding: '0px' }" class="box-card-item">
|
||||
<div class="box-card-item-add" @click="handleAdd">
|
||||
<div class="icon-block">
|
||||
<i class="el-icon-plus" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6" class="box-card-col">
|
||||
<el-card :body-style="{ padding: '0px' }" class="box-card-item">
|
||||
<div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)">
|
||||
<el-image :src="item.boardThumbnail ? item.boardThumbnail : ''">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline" />
|
||||
</div>
|
||||
</el-image>
|
||||
<div class="box-card-item-edit" :style="{display: (item.show ? 'block' : 'none')}">
|
||||
<el-button v-hasPerm="['visual:board:build']" type="primary" @click="handleConfig(item)">编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-card-item-footer">
|
||||
<div class="box-card-item-footer-text">{{ item.boardName }}</div>
|
||||
<div class="clearfix">
|
||||
<i v-hasPerm="['visual:board:edit']" class="el-icon-edit-outline" @click="handleEdit(item)" />
|
||||
<i v-hasPerm="['visual:board:preview']" class="el-icon-view" @click="handleView(item)" />
|
||||
<i v-hasPerm="['visual:board:remove']" class="el-icon-delete" @click="handleDelete(item)" />
|
||||
<i v-hasPerm="['visual:board:copy']" class="el-icon-copy-document" @click="handleCopy(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<board-form v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :data="currentBoard" @handleBoardFormFinished="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pageDataBoard, delDataBoard, copyDataBoard } from '@/api/visual/databoard'
|
||||
import BoardForm from './components/BoardForm'
|
||||
|
||||
export default {
|
||||
name: 'DataBoardList',
|
||||
components: { BoardForm },
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
tableDataList: [],
|
||||
// 总数据条数
|
||||
total: 0,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
currentBoard: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询数据列表 */
|
||||
getList() {
|
||||
pageDataBoard(this.queryParams).then(response => {
|
||||
if (response.success) {
|
||||
const { data } = response
|
||||
this.tableDataList = data.data
|
||||
this.total = data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
this.queryParams.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
mouseEnter(data) {
|
||||
this.$set(data, 'show', true)
|
||||
},
|
||||
mouseLeave(data) {
|
||||
this.$set(data, 'show', false)
|
||||
},
|
||||
handleAdd() {
|
||||
this.dialogFormVisible = true
|
||||
this.currentBoard = {}
|
||||
},
|
||||
handleConfig(data) {
|
||||
const route = this.$router.resolve({ path: `/visual/board/build/${data.id}` })
|
||||
window.open(route.href, '_blank')
|
||||
},
|
||||
handleEdit(data) {
|
||||
this.dialogFormVisible = true
|
||||
this.currentBoard = Object.assign({}, data)
|
||||
},
|
||||
handleView(data) {
|
||||
const route = this.$router.resolve({ path: `/visual/board/view/${data.id}` })
|
||||
window.open(route.href, '_blank')
|
||||
},
|
||||
handleDelete(data) {
|
||||
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDataBoard(data.id).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
handleCopy(data) {
|
||||
this.$confirm('确认拷贝当前看板, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
copyDataBoard(data.id).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('拷贝成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
}
|
||||
.box-card-col {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
.box-card-item {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
.box-card-item-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.box-card-item-edit {
|
||||
width: 260px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: rgba(4, 11, 28, 0.7);
|
||||
opacity: 0.8;
|
||||
button {
|
||||
margin-top: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-image{
|
||||
width: 260px;
|
||||
height: 150px;
|
||||
display: block;
|
||||
::v-deep .image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.box-card-item-add {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.box-card-item-footer {
|
||||
padding: 8px 5px;
|
||||
background-color: #dcdcdc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.box-card-item-footer-text {
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
173
src/views/visual/databoard/DataBoardView.vue
Normal file
173
src/views/visual/databoard/DataBoardView.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="board-container">
|
||||
<div class="board-header">
|
||||
<span>{{ dataBoard.boardName }}</span>
|
||||
</div>
|
||||
<div class="board-wrapper">
|
||||
<grid-layout
|
||||
:layout.sync="layout"
|
||||
:col-num="24"
|
||||
:row-height="30"
|
||||
:is-draggable="false"
|
||||
:is-resizable="false"
|
||||
:is-mirrored="false"
|
||||
:vertical-compact="true"
|
||||
:use-css-transforms="true"
|
||||
:margin="[10, 10]"
|
||||
style="height: 100%; overflow-x: hidden; overflow-y: auto;"
|
||||
>
|
||||
<grid-item
|
||||
v-for="item in layout"
|
||||
:key="item.i"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:i="item.i"
|
||||
>
|
||||
<el-card v-loading="getChartItem(item.i).loading" class="board-wrapper-card" body-style="padding: 10px;">
|
||||
<div slot="header" class="board-wrapper-card-header">
|
||||
<div>
|
||||
<span>{{ getChartItem(item.i).chartName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
|
||||
<div v-else :style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
|
||||
</el-card>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDataBoard } from '@/api/visual/databoard'
|
||||
import { dataParser } from '@/api/visual/datachart'
|
||||
import VueGridLayout from 'vue-grid-layout'
|
||||
import ChartPanel from '../datachart/components/ChartPanel'
|
||||
|
||||
export default {
|
||||
name: 'DataBoardView',
|
||||
components: {
|
||||
GridLayout: VueGridLayout.GridLayout,
|
||||
GridItem: VueGridLayout.GridItem,
|
||||
ChartPanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataBoard: {},
|
||||
layout: [],
|
||||
interval: [],
|
||||
charts: [],
|
||||
timers: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDataBoard(this.$route.params.id)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.timers.map((item) => {
|
||||
clearInterval(item)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getDataBoard(id) {
|
||||
getDataBoard(id).then(response => {
|
||||
if (response.success) {
|
||||
this.dataBoard = response.data
|
||||
this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
|
||||
this.interval = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.interval)) : []
|
||||
const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
|
||||
charts.forEach((item, index, arr) => {
|
||||
this.parserChart(item)
|
||||
})
|
||||
this.charts = charts
|
||||
this.$nextTick(() => {
|
||||
this.initTimer()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
parserChart(chart) {
|
||||
this.$set(chart, 'loading', true)
|
||||
if (chart.chartConfig) {
|
||||
dataParser(JSON.parse(chart.chartConfig)).then(response => {
|
||||
if (response.success) {
|
||||
this.$set(chart, 'data', response.data.data)
|
||||
this.$set(chart, 'chartSchema', JSON.parse(chart.chartConfig))
|
||||
this.$set(chart, 'loading', false)
|
||||
this.$set(chart, 'visible', true)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$set(chart, 'loading', false)
|
||||
}
|
||||
},
|
||||
getChartItem(id) {
|
||||
return this.charts.find(chart => chart.id === id)
|
||||
},
|
||||
initTimer() {
|
||||
this.interval.forEach((item, index) => {
|
||||
if (item.milliseconds && item.milliseconds > 0) {
|
||||
const timer = setInterval(() => {
|
||||
const chart = this.charts.find(chart => chart.id === item.id)
|
||||
if (chart.chartConfig) {
|
||||
dataParser(JSON.parse(chart.chartConfig)).then(response => {
|
||||
if (response.success) {
|
||||
this.$set(chart, 'data', response.data.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
}, item.milliseconds)
|
||||
this.timers.push(timer)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.board-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.board-header{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.board-wrapper {
|
||||
height: calc(100% - 40px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
.board-wrapper-card {
|
||||
::v-deep .el-card__header {
|
||||
padding: 0;
|
||||
.board-wrapper-card-header {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
src/views/visual/databoard/components/BoardForm.vue
Normal file
93
src/views/visual/databoard/components/BoardForm.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<el-dialog title="看板" width="50%" :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="看板名称" prop="boardName">
|
||||
<el-input v-model="form.boardName" placeholder="请输入看板名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addDataBoard, updateDataBoard } from '@/api/visual/databoard'
|
||||
|
||||
export default {
|
||||
name: 'BoardForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return false
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
boardName: undefined
|
||||
},
|
||||
rules: {
|
||||
boardName: [
|
||||
{ required: true, message: '看板名称不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form = this.data
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id) {
|
||||
updateDataBoard(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.$emit('handleBoardFormFinished')
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(error.msg || '保存失败')
|
||||
})
|
||||
} else {
|
||||
addDataBoard(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.$emit('handleBoardFormFinished')
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(error.msg || '保存失败')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
33
src/views/visual/databoard/index.vue
Normal file
33
src/views/visual/databoard/index.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="el-zoom-in-center">
|
||||
<data-board-list v-if="options.showList" @showCard="showCard" />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataBoardList from './DataBoardList'
|
||||
|
||||
export default {
|
||||
name: 'DataBoard',
|
||||
components: { DataBoardList },
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
data: {},
|
||||
showList: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCard(data) {
|
||||
Object.assign(this.options, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
639
src/views/visual/datachart/DataChartBuild.vue
Normal file
639
src/views/visual/datachart/DataChartBuild.vue
Normal file
@@ -0,0 +1,639 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="widget-left-container">
|
||||
<div class="widget-left-header">
|
||||
<span>数据集</span>
|
||||
<el-dropdown trigger="click" style="float: right; color: #499df3;" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
切换<i class="el-icon-arrow-down el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="item in dataSetOptions" :key="item.id" :command="item.id">{{ item.setName }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="widget-left-field">
|
||||
<div class="widget-left-field-cate"><i class="icon iconfont icon-weidu" /><span>维度列</span></div>
|
||||
<draggable v-model="dimensions" class="widget-left-field-draggable" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
|
||||
<el-tag v-for="(item, index) in dimensions" :key="index" class="draggable-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="widget-left-field">
|
||||
<div class="widget-left-field-cate"><i class="icon iconfont icon-zhibiao" /><span>指标列</span></div>
|
||||
<draggable v-model="measures" class="widget-left-field-draggable" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
|
||||
<el-tag v-for="(item, index) in measures" :key="index" class="draggable-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-center-container">
|
||||
<div class="widget-center-header">
|
||||
<div class="widget-center-header-collapse" @click="handleCollapse"><i :class="{'is-active': isCollapse}" class="el-icon-d-arrow-right" /></div>
|
||||
<div class="widget-center-header-button">
|
||||
<el-button icon="el-icon-view" type="text" @click="handlePreview">
|
||||
预览
|
||||
</el-button>
|
||||
<el-button icon="el-icon-delete" type="text" @click="handleReset">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-hasPerm="['visual:chart:build']" icon="el-icon-plus" type="text" @click="handleSubmit">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button icon="el-icon-close" type="text" @click="handleCancel">
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-center-content">
|
||||
<div class="widget-center-draggable-wrapper">
|
||||
<el-divider content-position="left">行维</el-divider>
|
||||
<div class="widget-center-draggable-text">
|
||||
<draggable group="dimensions" :list="widget.rows" class="widget-center-draggable-line">
|
||||
<el-tag v-for="(item, index) in widget.rows" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
|
||||
{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}
|
||||
</el-tag>
|
||||
</draggable>
|
||||
</div>
|
||||
<el-divider content-position="left">列维</el-divider>
|
||||
<div class="widget-center-draggable-text">
|
||||
<draggable group="dimensions" :list="widget.columns" class="widget-center-draggable-line">
|
||||
<el-tag v-for="(item, index) in widget.columns" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
|
||||
{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}
|
||||
</el-tag>
|
||||
</draggable>
|
||||
</div>
|
||||
<el-divider content-position="left">指标</el-divider>
|
||||
<div class="widget-center-draggable-text">
|
||||
<draggable group="measures" :list="widget.measures" class="widget-center-draggable-line" @change="handleValueDragChange">
|
||||
<div v-for="(item, index) in widget.measures" :key="index" class="draggable-item">
|
||||
<el-tag>{{ item.alias ? item.aggregateType + '(' + item.col + ') -> ' + item.alias : item.aggregateType + '(' + item.col + ')' }}</el-tag>
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-radio-group v-model="item.aggregateType" size="mini">
|
||||
<el-radio label="sum" size="mini">求和</el-radio>
|
||||
<el-radio label="count" size="mini">计数</el-radio>
|
||||
<el-radio label="avg" size="mini">平均值</el-radio>
|
||||
<el-radio label="max" size="mini">最大值</el-radio>
|
||||
<el-radio label="min" size="mini">最小值</el-radio>
|
||||
</el-radio-group>
|
||||
<span slot="reference" class="draggable-item-handle"><i class="el-icon-edit-outline" /></span>
|
||||
</el-popover>
|
||||
<span class="draggable-item-handle" @click="handleValueTagClose(index, item)"><i class="el-icon-delete" /></span>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-center-pane">
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane label="图表预览">
|
||||
<div class="widget-center-pane-chart">
|
||||
<chart-panel v-if="visible" id="chartPanel" ref="chartPanel" :chart-schema="widget" :chart-data="chartData.data" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="查询脚本">
|
||||
<div class="widget-center-pane-script">{{ chartData.sql }}</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-right-container" :class="{hideRightContainer: isCollapse}">
|
||||
<el-tabs type="border-card" stretch class="widget-right-tab">
|
||||
<el-tab-pane label="图表属性">
|
||||
<div class="widget-right-pane-form">
|
||||
<el-form size="mini" label-position="top">
|
||||
<el-form-item label="图表名称">
|
||||
<el-input v-model="dataChart.chartName" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="缩略图">
|
||||
<el-upload
|
||||
action="#"
|
||||
accept=".png, .jpg, .jpeg"
|
||||
list-type="picture-card"
|
||||
:limit="1"
|
||||
:auto-upload="false"
|
||||
:before-upload="beforeUpload"
|
||||
:on-change="handleChange"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
:class="{ hideUpload: hideUpload }"
|
||||
>
|
||||
<i slot="default" class="el-icon-plus" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="图表类型">
|
||||
<div class="chart-type-list">
|
||||
<span v-for="item in chartTypes" :key="item.value" :class="item.value === widget.chartType ? 'active': ''" @click="item.status && item.rule.check(widget.rows, widget.columns, widget.measures) && changeChart(item.value)">
|
||||
<el-tooltip :content="item.name + ':' + item.rule.text" placement="top">
|
||||
<svg-icon class="icon" :icon-class="item.icon + (item.status && item.rule.check(widget.rows, widget.columns, widget.measures) ? '_active': '')" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图表配置">
|
||||
<div class="widget-right-pane-config">
|
||||
<el-collapse v-model="collapsActiveNames" accordion>
|
||||
<el-collapse-item title="图表主题" name="1">
|
||||
<el-form size="mini">
|
||||
<el-form-item>
|
||||
<el-select v-model="widget.theme">
|
||||
<el-option
|
||||
v-for="(theme, index) in chartThemes"
|
||||
:key="index"
|
||||
:label="theme"
|
||||
:value="theme"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="标题组件" name="2">
|
||||
<el-form size="mini">
|
||||
<el-form-item label="是否显示">
|
||||
<el-switch v-model="widget.options.title.show" active-text="开启" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主标题文本">
|
||||
<el-input v-model="widget.options.title.text" />
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题文本">
|
||||
<el-input v-model="widget.options.title.subtext" />
|
||||
</el-form-item>
|
||||
<el-form-item label="离左侧的距离">
|
||||
<el-slider v-model="widget.options.title.leftVal" @change="widget.options.title.left = widget.options.title.leftVal + '%'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="离上侧的距离">
|
||||
<el-slider v-model="widget.options.title.topVal" @change="widget.options.title.top = widget.options.title.topVal + '%'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主标题字体大小">
|
||||
<el-input-number v-model="widget.options.title.textStyle.fontSize" :min="1" :max="30" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主标题文字的颜色">
|
||||
<el-color-picker v-model="widget.options.title.textStyle.color" />
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题字体大小">
|
||||
<el-input-number v-model="widget.options.title.subtextStyle.fontSize" :min="1" :max="20" />
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题文字的颜色">
|
||||
<el-color-picker v-model="widget.options.title.subtextStyle.color" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="图例组件" name="3">
|
||||
<el-form size="mini">
|
||||
<el-form-item label="是否显示">
|
||||
<el-switch v-model="widget.options.legend.show" active-text="开启" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图例的类型">
|
||||
<el-select v-model="widget.options.legend.type">
|
||||
<el-option label="普通图例" value="plain" />
|
||||
<el-option label="可滚动翻页的图例" value="scroll" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="离左侧的距离">
|
||||
<el-slider v-model="widget.options.legend.leftVal" @change="widget.options.legend.left = widget.options.legend.leftVal + '%'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="离上侧的距离">
|
||||
<el-slider v-model="widget.options.legend.topVal" @change="widget.options.legend.top = widget.options.legend.topVal + '%'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="列表的布局朝向">
|
||||
<el-select v-model="widget.options.legend.orient">
|
||||
<el-option label="横向" value="horizontal" />
|
||||
<el-option label="纵向" value="vertical" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="数据系列" name="4">
|
||||
<el-form size="mini">
|
||||
<el-form-item>
|
||||
<el-select v-model="widget.seriesType">
|
||||
<el-option
|
||||
v-for="(item, index) in chartSeriesTypes[widget.chartType]"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDataChart, buildDataChart, dataParser } from '@/api/visual/datachart'
|
||||
import { getDataSet, listDataSet } from '@/api/visual/dataset'
|
||||
import draggable from 'vuedraggable'
|
||||
import { chartTypes, chartThemes, chartSeriesTypes, chartOptions } from '@/utils/visual-chart'
|
||||
import ChartPanel from './components/ChartPanel'
|
||||
import { compressImg, dataURLtoBlob } from '@/utils/compressImage'
|
||||
|
||||
export default {
|
||||
name: 'DataChartBuild',
|
||||
components: {
|
||||
draggable,
|
||||
ChartPanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataChart: {},
|
||||
widget: {
|
||||
dataSetId: undefined,
|
||||
chartType: 'table',
|
||||
rows: [],
|
||||
columns: [],
|
||||
measures: [],
|
||||
// 过滤条件
|
||||
filters: [],
|
||||
// 图表配置项
|
||||
options: chartOptions,
|
||||
// 图表主题
|
||||
theme: 'default',
|
||||
// 系列类型
|
||||
seriesType: undefined
|
||||
},
|
||||
dataSetOptions: [],
|
||||
dataSet: {},
|
||||
dimensions: [],
|
||||
measures: [],
|
||||
chartTypes,
|
||||
chartThemes,
|
||||
chartSeriesTypes,
|
||||
chartData: {
|
||||
data: [],
|
||||
sql: ''
|
||||
},
|
||||
visible: false,
|
||||
isCollapse: false,
|
||||
collapsActiveNames: '1',
|
||||
// 文件上传
|
||||
fileList: [],
|
||||
hideUpload: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDataChart(this.$route.params.id)
|
||||
this.getDataSetList()
|
||||
},
|
||||
methods: {
|
||||
getDataChart(id) {
|
||||
getDataChart(id).then(response => {
|
||||
if (response.success) {
|
||||
this.dataChart = response.data
|
||||
if (this.dataChart.chartThumbnail) {
|
||||
const blob = dataURLtoBlob(this.dataChart.chartThumbnail)
|
||||
const fileUrl = URL.createObjectURL(blob)
|
||||
this.fileList.push({ url: fileUrl })
|
||||
this.hideUpload = true
|
||||
}
|
||||
if (this.dataChart.chartConfig) {
|
||||
const chartConfig = JSON.parse(this.dataChart.chartConfig)
|
||||
getDataSet(chartConfig.dataSetId).then(response => {
|
||||
if (response.success) {
|
||||
this.dataSet = response.data
|
||||
this.dimensions = this.dataSet.schemaConfig.dimensions.filter(x => [...chartConfig.rows, ...chartConfig.columns].every(y => y.col !== x.col))
|
||||
this.measures = this.dataSet.schemaConfig.measures.filter(x => chartConfig.measures.every(y => y.col !== x.col))
|
||||
}
|
||||
})
|
||||
this.widget.dataSetId = chartConfig.dataSetId
|
||||
this.widget.chartType = chartConfig.chartType
|
||||
this.widget.rows = chartConfig.rows || []
|
||||
this.widget.columns = chartConfig.columns || []
|
||||
this.widget.measures = chartConfig.measures || []
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getDataSetList() {
|
||||
listDataSet().then(response => {
|
||||
if (response.success) {
|
||||
this.dataSetOptions = response.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCommand(id) {
|
||||
getDataSet(id).then(response => {
|
||||
if (response.success) {
|
||||
this.dataSet = response.data
|
||||
this.widget.dataSetId = this.dataSet.id
|
||||
this.handleReset()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleKeyTagClose(index, tag) {
|
||||
this.widget.rows.splice(index, 1)
|
||||
this.dimensions.push(tag)
|
||||
},
|
||||
handleGroupTagClose(index, tag) {
|
||||
this.widget.columns.splice(index, 1)
|
||||
this.dimensions.push(tag)
|
||||
},
|
||||
handleValueDragChange(tag) {
|
||||
if (tag.added) {
|
||||
this.$set(tag.added.element, 'aggregateType', 'sum')
|
||||
}
|
||||
},
|
||||
handleValueTagClose(index, tag) {
|
||||
this.widget.measures.splice(index, 1)
|
||||
tag.aggregateType = ''
|
||||
this.measures.push(tag)
|
||||
},
|
||||
handleCollapse() {
|
||||
this.isCollapse = !this.isCollapse
|
||||
},
|
||||
handlePreview() {
|
||||
dataParser(this.widget).then(response => {
|
||||
if (response.success) {
|
||||
const { data } = response
|
||||
this.chartData.data = data.data
|
||||
this.chartData.sql = data.sql
|
||||
this.visible = true
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset() {
|
||||
this.dimensions = JSON.parse(JSON.stringify(this.dataSet.schemaConfig.dimensions))
|
||||
this.measures = JSON.parse(JSON.stringify(this.dataSet.schemaConfig.measures))
|
||||
this.widget.chartType = 'table'
|
||||
this.widget.rows = []
|
||||
this.widget.columns = []
|
||||
this.widget.measures = []
|
||||
this.chartData.data = []
|
||||
this.chartData.sql = ''
|
||||
this.visible = false
|
||||
},
|
||||
handleSubmit() {
|
||||
const data = {
|
||||
id: this.dataChart.id,
|
||||
chartThumbnail: this.dataChart.chartThumbnail,
|
||||
chartConfig: JSON.stringify(this.widget)
|
||||
}
|
||||
buildDataChart(data).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
window.location.href = 'about:blank'
|
||||
window.close()
|
||||
},
|
||||
changeChart(chart) {
|
||||
this.widget.chartType = chart
|
||||
this.widget.seriesType = ((this.chartSeriesTypes[this.widget.chartType] || [])[0] || {}).value || undefined
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB')
|
||||
}
|
||||
return isLt2M
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
this.hideUpload = fileList.length >= 1
|
||||
const config = {
|
||||
width: 250, // 压缩后图片的宽
|
||||
height: 150, // 压缩后图片的高
|
||||
quality: 0.8 // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
|
||||
}
|
||||
compressImg(file.raw, config).then(result => {
|
||||
// result 为压缩后二进制文件
|
||||
this.$set(this.dataChart, 'chartThumbnail', result)
|
||||
})
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.hideUpload = fileList.length >= 1
|
||||
this.$set(this.dataChart, 'chartThumbnail', 'x')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.widget-left-container {
|
||||
width: 250px;
|
||||
box-sizing: border-box;
|
||||
.widget-left-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
.el-dropdown {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.widget-left-field {
|
||||
height: 250px;
|
||||
.widget-left-field-cate {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.widget-left-field-draggable {
|
||||
height: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.draggable-label {
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
width: 90px;
|
||||
position: relative;
|
||||
float: left;
|
||||
left: 0;
|
||||
margin: 5px;
|
||||
color: #333;
|
||||
border: 1px solid #F4F6FC;
|
||||
&:hover {
|
||||
color: #409EFF;
|
||||
border: 1px dashed #409EFF;
|
||||
}
|
||||
& > div {
|
||||
display: block;
|
||||
cursor: move;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-center-container {
|
||||
width: calc(100% - 550px);
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #e4e7ed;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
.widget-center-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
.widget-center-header-collapse {
|
||||
float: right;
|
||||
background-color: #f0f8ff;
|
||||
.is-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.widget-center-header-button {
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.widget-center-content {
|
||||
height: 100%;
|
||||
.widget-center-draggable-wrapper {
|
||||
height: 266px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
.widget-center-draggable-text {
|
||||
min-height: 40px;
|
||||
height: auto;
|
||||
line-height: 40px;
|
||||
border: 1px solid #d7dae2;
|
||||
background: #f4f4f7;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
.widget-center-draggable-line {
|
||||
min-height: 40px;
|
||||
height: 40px;
|
||||
.draggable-item {
|
||||
margin: 0 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ebecef;
|
||||
border-radius: 4px;
|
||||
.draggable-item-handle {
|
||||
background-color: #ecf5ff;
|
||||
border-color: #d9ecff;
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: #409EFF;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-center-pane {
|
||||
height: calc(100% - 266px);
|
||||
.widget-center-pane-chart {
|
||||
height: 200px;
|
||||
padding: 0 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.widget-center-pane-script {
|
||||
height: 200px;
|
||||
padding: 0 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-right-container {
|
||||
width: 300px;
|
||||
box-sizing: border-box;
|
||||
// 折叠
|
||||
&.hideRightContainer{
|
||||
width: 0px;
|
||||
}
|
||||
.widget-right-pane-form {
|
||||
height: calc(100vh - 40px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.hideUpload ::v-deep {
|
||||
.el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.el-upload-list__item {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
.chart-type-list {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
grid-template-columns: repeat(5, 40px);
|
||||
grid-template-rows: repeat(4, 40px);
|
||||
grid-gap: 10px;
|
||||
span {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
box-shadow: 0 0 0 2px rgba(81, 130, 227, .06), inset 0 0 0 2px rgba(81, 129, 228, .6);
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-right-pane-config {
|
||||
height: calc(100vh - 40px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.el-form-item__content {
|
||||
.el-slider {
|
||||
padding: 0 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
227
src/views/visual/datachart/DataChartList.vue
Normal file
227
src/views/visual/datachart/DataChartList.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-pagination
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page.sync="queryParams.pageNum"
|
||||
:page-size.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row :gutter="20">
|
||||
<el-col v-hasPerm="['visual:chart:add']" class="box-card-col">
|
||||
<el-card :body-style="{ padding: '0px' }" class="box-card-item">
|
||||
<div class="box-card-item-add" @click="handleAdd">
|
||||
<div class="icon-block">
|
||||
<i class="el-icon-plus" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-for="(item, index) in tableDataList" :key="item.id" class="box-card-col">
|
||||
<el-card :body-style="{ padding: '0px' }" class="box-card-item">
|
||||
<div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)">
|
||||
<el-image :src="item.chartThumbnail ? item.chartThumbnail : ''">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline" />
|
||||
</div>
|
||||
</el-image>
|
||||
<div class="box-card-item-edit" :style="{display: (item.show ? 'block' : 'none')}">
|
||||
<el-button v-hasPerm="['visual:chart:build']" type="primary" @click="handleConfig(item)">编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-card-item-footer">
|
||||
<span class="box-card-item-footer-text">{{ item.chartName }}</span>
|
||||
<div class="clearfix">
|
||||
<i v-hasPerm="['visual:chart:edit']" class="el-icon-edit-outline" @click="handleEdit(item)" />
|
||||
<i v-hasPerm="['visual:chart:remove']" class="el-icon-delete" @click="handleDelete(item)" />
|
||||
<i v-hasPerm="['visual:chart:copy']" class="el-icon-copy-document" @click="handleCopy(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<chart-form v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :data="currentChart" @handleChartFormFinished="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pageDataChart, delDataChart, copyDataChart } from '@/api/visual/datachart'
|
||||
import ChartForm from './components/ChartForm'
|
||||
|
||||
export default {
|
||||
name: 'DataChartList',
|
||||
components: { ChartForm },
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
tableDataList: [],
|
||||
// 总数据条数
|
||||
total: 0,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
currentChart: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询数据列表 */
|
||||
getList() {
|
||||
pageDataChart(this.queryParams).then(response => {
|
||||
if (response.success) {
|
||||
const { data } = response
|
||||
this.tableDataList = data.data
|
||||
this.total = data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
this.queryParams.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
mouseEnter(data) {
|
||||
this.$set(data, 'show', true)
|
||||
},
|
||||
mouseLeave(data) {
|
||||
this.$set(data, 'show', false)
|
||||
},
|
||||
handleAdd() {
|
||||
this.dialogFormVisible = true
|
||||
this.currentChart = {}
|
||||
},
|
||||
handleConfig(data) {
|
||||
const route = this.$router.resolve({ path: `/visual/chart/build/${data.id}` })
|
||||
window.open(route.href, '_blank')
|
||||
},
|
||||
handleEdit(data) {
|
||||
this.dialogFormVisible = true
|
||||
this.currentChart = Object.assign({}, data)
|
||||
},
|
||||
handleDelete(data) {
|
||||
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDataChart(data.id).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
handleCopy(data) {
|
||||
this.$confirm('确认拷贝当前图表, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
copyDataChart(data.id).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('拷贝成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
}
|
||||
.box-card-col {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
.box-card-item {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
.box-card-item-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.box-card-item-edit {
|
||||
width: 260px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: rgba(4, 11, 28, 0.7);
|
||||
opacity: 0.8;
|
||||
button {
|
||||
margin-top: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-image{
|
||||
width: 260px;
|
||||
height: 150px;
|
||||
display: block;
|
||||
::v-deep .image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.box-card-item-add {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.box-card-item-footer {
|
||||
padding: 8px 5px;
|
||||
background-color: #dcdcdc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.box-card-item-footer-text {
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
src/views/visual/datachart/components/ChartForm.vue
Normal file
93
src/views/visual/datachart/components/ChartForm.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<el-dialog title="图表" width="50%" :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="图表名称" prop="chartName">
|
||||
<el-input v-model="form.chartName" placeholder="请输入图表名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addDataChart, updateDataChart } from '@/api/visual/datachart'
|
||||
|
||||
export default {
|
||||
name: 'ChartForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return false
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
chartName: undefined
|
||||
},
|
||||
rules: {
|
||||
chartName: [
|
||||
{ required: true, message: '图表名称不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form = this.data
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id) {
|
||||
updateDataChart(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.$emit('handleChartFormFinished')
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(error.msg || '保存失败')
|
||||
})
|
||||
} else {
|
||||
addDataChart(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.$emit('handleChartFormFinished')
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(error.msg || '保存失败')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
106
src/views/visual/datachart/components/ChartPanel.vue
Normal file
106
src/views/visual/datachart/components/ChartPanel.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<component
|
||||
:is="currentChart.component"
|
||||
:data="chartData"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:values="values"
|
||||
:chart-type="currentChart.value"
|
||||
:chart-theme="chartTheme"
|
||||
:chart-option="chartOption"
|
||||
:chart-series-type="chartSeriesType"
|
||||
:chart-style="chartStyle"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chartTypes } from '@/utils/visual-chart'
|
||||
import ChartTable from './widgets/ChartTable'
|
||||
import ChartLine from './widgets/ChartLine'
|
||||
import ChartBar from './widgets/ChartBar'
|
||||
import ChartPie from './widgets/ChartPie'
|
||||
import ChartKpi from './widgets/ChartKpi'
|
||||
import ChartRadar from './widgets/ChartRadar'
|
||||
import ChartFunnel from './widgets/ChartFunnel'
|
||||
import ChartScatter from './widgets/ChartScatter'
|
||||
import ChartGauge from './widgets/ChartGauge'
|
||||
import ChartTreemap from './widgets/ChartTreemap'
|
||||
import ChartWordCloud from './widgets/ChartWordCloud'
|
||||
import ChartLiquidFill from './widgets/ChartLiquidFill'
|
||||
import ChartSankey from './widgets/ChartSankey'
|
||||
import ChartMap from './widgets/ChartMap'
|
||||
import ChartTree from './widgets/ChartTree'
|
||||
import ChartSunburst from './widgets/ChartSunburst'
|
||||
import ChartPolar from './widgets/ChartPolar'
|
||||
|
||||
export default {
|
||||
name: 'ChartPanel',
|
||||
components: {
|
||||
ChartTable, ChartLine, ChartBar, ChartPie,
|
||||
ChartKpi, ChartRadar, ChartFunnel, ChartScatter,
|
||||
ChartGauge, ChartTreemap, ChartWordCloud, ChartLiquidFill,
|
||||
ChartSankey, ChartMap, ChartTree, ChartSunburst, ChartPolar
|
||||
},
|
||||
props: {
|
||||
chartSchema: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartTypes
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentChart() {
|
||||
return chartTypes.find(item => item.value === this.chartSchema.chartType)
|
||||
},
|
||||
rows() {
|
||||
return this.chartSchema.rows.map((row, index, arr) => {
|
||||
return {
|
||||
key: `${row.col}`,
|
||||
label: `${row.col}`
|
||||
}
|
||||
}) || []
|
||||
},
|
||||
columns() {
|
||||
return this.chartSchema.columns.map((column, index, arr) => {
|
||||
return {
|
||||
key: `${column.col}`,
|
||||
label: `${column.col}`
|
||||
}
|
||||
}) || []
|
||||
},
|
||||
values() {
|
||||
return this.chartSchema.measures.map((measure, index, arr) => {
|
||||
return {
|
||||
key: `${measure.col}`,
|
||||
label: `${measure.col}`
|
||||
}
|
||||
}) || []
|
||||
},
|
||||
chartTheme() {
|
||||
return this.chartSchema.theme || 'default'
|
||||
},
|
||||
chartSeriesType() {
|
||||
return this.chartSchema.seriesType || undefined
|
||||
},
|
||||
chartOption() {
|
||||
return this.chartSchema.options || {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
424
src/views/visual/datachart/components/widgets/ChartBar.vue
Normal file
424
src/views/visual/datachart/components/widgets/ChartBar.vue
Normal file
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartBar</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartBar',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartSeriesType: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: ''
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: { trigger: 'axis' }
|
||||
},
|
||||
calcData: {
|
||||
legendData: [],
|
||||
xAxisData: [],
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartSeriesType() {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const xAxisData = []
|
||||
const legendData = []
|
||||
const seriesObj = {}
|
||||
rowConditions.forEach((rowCondition) => {
|
||||
xAxisData.push(Object.values(rowCondition).join(this.connector))
|
||||
})
|
||||
colConditions.forEach((colCondition) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
legendData.push(seriesName)
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
})
|
||||
// 计算每个series数据
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
seriesObj[seriesName].data.push(value)
|
||||
})
|
||||
})
|
||||
})
|
||||
this.calcData.legendData = legendData
|
||||
this.calcData.xAxisData = xAxisData
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
parseChartSeries(option, series, type) {
|
||||
if (type === 'stackbar') {
|
||||
series.forEach((item) => {
|
||||
item.stack = '总量'
|
||||
})
|
||||
} else if (type === 'percentagestackbar') {
|
||||
const sum_data = []
|
||||
for (let j = 0; j < option.xAxis.data.length; j++) {
|
||||
let sum = 0
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
sum += series[i].data[j] ? Number(series[i].data[j]) : 0
|
||||
}
|
||||
sum_data[j] = sum
|
||||
}
|
||||
series.forEach((item) => {
|
||||
const serieCalcData = item.data.map((data, index) => {
|
||||
return (parseFloat(data) / parseFloat(sum_data[index]) * 100).toFixed(2)
|
||||
})
|
||||
item.data = serieCalcData
|
||||
item.stack = '总量'
|
||||
})
|
||||
option.yAxis.min = 0
|
||||
option.yAxis.max = 100
|
||||
} else if (type === 'barchart') {
|
||||
const xAxis = JSON.parse(JSON.stringify(option.xAxis))
|
||||
const yAxis = JSON.parse(JSON.stringify(option.yAxis))
|
||||
option.xAxis = yAxis
|
||||
option.yAxis = xAxis
|
||||
} else if (type === 'stackbarchart') {
|
||||
const xAxis = JSON.parse(JSON.stringify(option.xAxis))
|
||||
const yAxis = JSON.parse(JSON.stringify(option.yAxis))
|
||||
option.xAxis = yAxis
|
||||
option.yAxis = xAxis
|
||||
series.forEach((item) => {
|
||||
item.stack = '总量'
|
||||
})
|
||||
} else if (type === 'percentagestackbarchart') {
|
||||
const sum_data = []
|
||||
for (let j = 0; j < option.xAxis.data.length; j++) {
|
||||
let sum = 0
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
sum += series[i].data[j] ? Number(series[i].data[j]) : 0
|
||||
}
|
||||
sum_data[j] = sum
|
||||
}
|
||||
series.forEach((item) => {
|
||||
const serieCalcData = item.data.map((data, index) => {
|
||||
return (parseFloat(data) / parseFloat(sum_data[index]) * 100).toFixed(2)
|
||||
})
|
||||
item.data = serieCalcData
|
||||
item.stack = '总量'
|
||||
})
|
||||
const xAxis = JSON.parse(JSON.stringify(option.xAxis))
|
||||
const yAxis = JSON.parse(JSON.stringify(option.yAxis))
|
||||
option.xAxis = yAxis
|
||||
option.yAxis = xAxis
|
||||
option.xAxis.min = 0
|
||||
option.xAxis.max = 100
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
387
src/views/visual/datachart/components/widgets/ChartFunnel.vue
Normal file
387
src/views/visual/datachart/components/widgets/ChartFunnel.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartFunnel</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartFunnel',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartSeriesType: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: ''
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
legendData: [],
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartSeriesType() {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const legendData = []
|
||||
this.localValues.forEach(({ key }) => {
|
||||
legendData.push(key)
|
||||
})
|
||||
const seriesObj = {}
|
||||
rowConditions.forEach((rowCondition, index) => {
|
||||
const seriesName = Object.values(rowCondition).join(this.connector) || ''
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
sort: 'descending',
|
||||
data: []
|
||||
}
|
||||
})
|
||||
// 计算每个series数据
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
const seriesName = Object.values(rowCondition).join(this.connector) || ''
|
||||
const seriesData = []
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const seriesDataValue = { name: '', value: '' }
|
||||
seriesDataValue.name = key
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesDataValue.value = value
|
||||
seriesData.push(seriesDataValue)
|
||||
})
|
||||
})
|
||||
seriesObj[seriesName].data = seriesData
|
||||
})
|
||||
this.calcData.legendData = legendData
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
parseChartSeries(option, series, type) {
|
||||
const b = 100 / (series.length * 9 + 1)
|
||||
if (type === 'funnel') {
|
||||
series.forEach((item, index) => {
|
||||
item.left = b + index * b * 9 + '%'
|
||||
item.width = b * 8 + '%'
|
||||
item.maxSize = '100%'
|
||||
item.label.formatter = (params) => {
|
||||
return params.value + '\n' + params.percent + '%'
|
||||
}
|
||||
})
|
||||
}
|
||||
if (type === 'pyramidfunnel') {
|
||||
series.forEach((item, index) => {
|
||||
item.sort = 'ascending'
|
||||
item.left = b + index * b * 9 + '%'
|
||||
item.width = b * 8 + '%'
|
||||
item.maxSize = '100%'
|
||||
item.label.formatter = (params) => {
|
||||
return params.value + '\n' + params.percent + '%'
|
||||
}
|
||||
})
|
||||
} else if (type === 'contrastfunnel') {
|
||||
let percent = 100
|
||||
series.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
item.label.position = 'outside'
|
||||
} else {
|
||||
item.label.formatter = (params) => {
|
||||
return params.value + '\n' + params.percent + '%'
|
||||
}
|
||||
}
|
||||
item.maxSize = percent + '%'
|
||||
percent *= 0.8
|
||||
})
|
||||
}
|
||||
option.tooltip.formatter = (params) => {
|
||||
return params.seriesName + ' <br/>' + params.name + ' : ' + params.value + '<br>' + params.percent + '%'
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
292
src/views/visual/datachart/components/widgets/ChartGauge.vue
Normal file
292
src/views/visual/datachart/components/widgets/ChartGauge.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartGauge</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartGauge',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
console.log('初始化属性')
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localValues.length) return
|
||||
const seriesObj = {}
|
||||
const localValue = this.localValues[0]
|
||||
const seriesName = localValue.key
|
||||
const seriesData = []
|
||||
seriesData.push({
|
||||
name: seriesName,
|
||||
value: this.localData[0][seriesName]
|
||||
})
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
radius: '100%',
|
||||
detail: { formatter: '{value}%' },
|
||||
data: seriesData
|
||||
}
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
233
src/views/visual/datachart/components/widgets/ChartKpi.vue
Normal file
233
src/views/visual/datachart/components/widgets/ChartKpi.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle" style="max-height: 100%; max-width: 100%;">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-num">{{ calcData.val }}</div>
|
||||
<div class="card-panel-text">{{ calcData.key }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartKpi',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
calcData: { key: '', val: '' }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localValues.length) return
|
||||
const localValue = this.localValues[0]
|
||||
const seriesName = localValue.key
|
||||
this.calcData.key = seriesName
|
||||
this.calcData.val = this.localData[0][seriesName]
|
||||
},
|
||||
mergeChartOption() {},
|
||||
mergeChartTheme() {},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-panel {
|
||||
align-items: center; /*垂直居中*/
|
||||
justify-content: center; /*水平居中*/
|
||||
.card-panel-description {
|
||||
text-align: center;
|
||||
.card-panel-num {
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.card-panel-text {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
412
src/views/visual/datachart/components/widgets/ChartLine.vue
Normal file
412
src/views/visual/datachart/components/widgets/ChartLine.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartLine</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartLine',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartSeriesType: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: ''
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: { trigger: 'axis' }
|
||||
},
|
||||
calcData: {
|
||||
legendData: [],
|
||||
xAxisData: [],
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartSeriesType() {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const xAxisData = []
|
||||
const legendData = []
|
||||
const seriesObj = {}
|
||||
rowConditions.forEach((rowCondition) => {
|
||||
xAxisData.push(Object.values(rowCondition).join(this.connector))
|
||||
})
|
||||
colConditions.forEach((colCondition) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
legendData.push(seriesName)
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
})
|
||||
// 计算每个series数据
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
seriesObj[seriesName].data.push(value)
|
||||
})
|
||||
})
|
||||
})
|
||||
this.calcData.legendData = legendData
|
||||
this.calcData.xAxisData = xAxisData
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
parseChartSeries(option, series, type) {
|
||||
if (type === 'arealine') {
|
||||
series.forEach((item) => {
|
||||
item.areaStyle = {}
|
||||
})
|
||||
option.xAxis.boundaryGap = false
|
||||
} else if (type === 'stackline') {
|
||||
series.forEach((item) => {
|
||||
item.stack = '总量'
|
||||
})
|
||||
option.xAxis.boundaryGap = false
|
||||
} else if (type === 'stackarealine') {
|
||||
series.forEach((item) => {
|
||||
item.stack = '总量'
|
||||
item.areaStyle = {}
|
||||
})
|
||||
option.xAxis.boundaryGap = false
|
||||
} else if (type === 'percentagestackarealine') {
|
||||
const sum_data = []
|
||||
for (let j = 0; j < option.xAxis.data.length; j++) {
|
||||
let sum = 0
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
sum += series[i].data[j] ? Number(series[i].data[j]) : 0
|
||||
}
|
||||
sum_data[j] = sum
|
||||
}
|
||||
series.forEach((item) => {
|
||||
const serieCalcData = item.data.map((data, index) => {
|
||||
return (parseFloat(data) / parseFloat(sum_data[index]) * 100).toFixed(2)
|
||||
})
|
||||
item.data = serieCalcData
|
||||
item.stack = '总量'
|
||||
item.areaStyle = {}
|
||||
})
|
||||
option.yAxis.min = 0
|
||||
option.yAxis.max = 100
|
||||
option.xAxis.boundaryGap = false
|
||||
// option.tooltip.formatter = function(params) {
|
||||
// let s = params[0].name + '</br>'
|
||||
// const sum = params.reduce((total, cur) => total + cur.value, 0)
|
||||
// for (let i = 0; i < params.length; i++) {
|
||||
// s += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>'
|
||||
// s += params[i].seriesName + ' : ' + (100 * parseFloat(params[i].value) / parseFloat(sum)).toFixed(2) + '%<br>'
|
||||
// }
|
||||
// return s
|
||||
// }
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,331 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartLiquidfill</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts-liquidfill')
|
||||
import { SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartLiquidfill',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartSeriesType: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: ''
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartSeriesType() {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localValues.length) return
|
||||
const seriesObj = {}
|
||||
const localValue = this.localValues[0]
|
||||
const seriesName = localValue.key
|
||||
const seriesData = []
|
||||
seriesData.push(this.localData[0][seriesName])
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
label: { fontSize: 20 },
|
||||
data: seriesData
|
||||
}
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
parseChartSeries(option, series, type) {
|
||||
if (type === 'circle') {
|
||||
series.forEach((item) => {
|
||||
item.shape = 'circle'
|
||||
})
|
||||
} else if (type === 'rect') {
|
||||
series.forEach((item) => {
|
||||
item.shape = 'rect'
|
||||
})
|
||||
} else if (type === 'roundRect') {
|
||||
series.forEach((item) => {
|
||||
item.shape = 'roundRect'
|
||||
})
|
||||
} else if (type === 'triangle') {
|
||||
series.forEach((item) => {
|
||||
item.shape = 'triangle'
|
||||
})
|
||||
} else if (type === 'diamond') {
|
||||
series.forEach((item) => {
|
||||
item.shape = 'diamond'
|
||||
})
|
||||
} else if (type === 'pin') {
|
||||
series.forEach((item) => {
|
||||
item.shape = 'pin'
|
||||
})
|
||||
} else if (type === 'arrow') {
|
||||
series.forEach((item) => {
|
||||
item.shape = 'arrow'
|
||||
})
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
364
src/views/visual/datachart/components/widgets/ChartMap.vue
Normal file
364
src/views/visual/datachart/components/widgets/ChartMap.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartGeo</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartGeo',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartSeriesType: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: ''
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
areaCode: '100000',
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartSeriesType() {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const seriesData = []
|
||||
this.localValues.forEach(({ key }) => {
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
if (filterData.length) {
|
||||
// 多个值，多条数据
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesData.push(
|
||||
{ name: Object.values(rowCondition).join(this.connector), value: value }
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
const seriesObj = {}
|
||||
const seriesName = this.localValues[0].key
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
map: this.calcData.areaCode,
|
||||
roam: true,
|
||||
selectedMode: 'single',
|
||||
showLegendSymbol: false,
|
||||
aspectScale: 0.75,
|
||||
zoom: 3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'transparent',
|
||||
borderColor: '#B5B5B5',
|
||||
borderWidth: 1,
|
||||
shadowColor: 'rgba(63, 218, 255, 0.5)',
|
||||
shadowBlur: 30
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
},
|
||||
data: seriesData
|
||||
}
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
const rawGeoJson = require('./maps/' + this.calcData.areaCode + '.json')
|
||||
echarts.registerMap(this.calcData.areaCode, rawGeoJson)
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
parseChartSeries(option, series, type) {
|
||||
if (type === 'visualMap') {
|
||||
option.visualMap = [{
|
||||
type: 'continuous',
|
||||
inRange: {
|
||||
color: ['#e0ffff', '#006edd']
|
||||
},
|
||||
calculable: true,
|
||||
pieces: [
|
||||
{ gt: 100 },
|
||||
{ gt: 10, lte: 99 },
|
||||
{ gt: 0, lte: 9 }
|
||||
]
|
||||
}]
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
365
src/views/visual/datachart/components/widgets/ChartPie.vue
Normal file
365
src/views/visual/datachart/components/widgets/ChartPie.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartPie</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartPie',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartSeriesType: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: ''
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
legendData: [],
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartSeriesType() {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const legendData = []
|
||||
rowConditions.forEach((rowCondition) => {
|
||||
legendData.push(Object.values(rowCondition).join(this.connector))
|
||||
})
|
||||
const seriesObj = {}
|
||||
const b = 100 / (colConditions.length * this.localValues.length * 9 + 1)
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
this.localValues.forEach(({ key }, index) => {
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
center: [5 * b + (colConditionIndex + 1) * index * 9 * b + '%', '50%'],
|
||||
data: []
|
||||
}
|
||||
})
|
||||
})
|
||||
// 计算每个series数据
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
seriesObj[seriesName].data.push(
|
||||
{
|
||||
name: Object.values(rowCondition).join(this.connector),
|
||||
value: value
|
||||
}
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
this.calcData.legendData = legendData
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
parseChartSeries(option, series, type) {
|
||||
if (type === 'roseradiuspie') {
|
||||
series.forEach((item) => {
|
||||
item.roseType = 'radius'
|
||||
item.radius = ['30%', '100%']
|
||||
})
|
||||
} else if (type === 'roseareapie') {
|
||||
series.forEach((item) => {
|
||||
item.roseType = 'area'
|
||||
item.radius = ['30%', '100%']
|
||||
})
|
||||
} else if (type === 'donutpie') {
|
||||
series.forEach((item) => {
|
||||
item.radius = ['70%', '100%']
|
||||
})
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
60
src/views/visual/datachart/components/widgets/ChartPolar.vue
Normal file
60
src/views/visual/datachart/components/widgets/ChartPolar.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartPolar</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartPolar',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
369
src/views/visual/datachart/components/widgets/ChartRadar.vue
Normal file
369
src/views/visual/datachart/components/widgets/ChartRadar.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartRadar</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartRadar',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartSeriesType: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: ''
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
radar: {
|
||||
indicator: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
legendData: [],
|
||||
radarIndicator: [],
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartSeriesType() {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const radarIndicator = []
|
||||
const legendData = []
|
||||
const seriesObj = {}
|
||||
const seriesDataObj = {}
|
||||
rowConditions.forEach((rowCondition) => {
|
||||
radarIndicator.push({ name: Object.values(rowCondition).join(this.connector) })
|
||||
})
|
||||
colConditions.forEach((colCondition) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
legendData.push(seriesName)
|
||||
seriesDataObj[seriesName] = {
|
||||
name: seriesName,
|
||||
value: []
|
||||
}
|
||||
})
|
||||
})
|
||||
seriesObj.radar = {
|
||||
name: 'radar',
|
||||
type: this.chartType,
|
||||
data: []
|
||||
}
|
||||
// 计算每个series数据
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
seriesDataObj[seriesName].value.push(value)
|
||||
})
|
||||
})
|
||||
})
|
||||
seriesObj.radar.data = Object.values(seriesDataObj)
|
||||
this.calcData.legendData = legendData
|
||||
this.calcData.radarIndicator = radarIndicator
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.radar.indicator = this.calcData.radarIndicator
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.radar.indicator = this.calcData.radarIndicator
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.radar.indicator = this.calcData.radarIndicator
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
parseChartSeries(option, series, type) {
|
||||
if (type === 'arearadar') {
|
||||
series.forEach((item) => {
|
||||
item.areaStyle = {}
|
||||
})
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
354
src/views/visual/datachart/components/widgets/ChartSankey.vue
Normal file
354
src/views/visual/datachart/components/widgets/ChartSankey.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartSankey</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartSankey',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const seriesData = []
|
||||
const seriesLinks = []
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
seriesData.push({ name: Object.values(rowCondition).join(this.connector) })
|
||||
})
|
||||
// 判断没传入列的处理
|
||||
if (!this.localColumns.length) {
|
||||
this.localValues.forEach(({ key }) => {
|
||||
seriesData.push({ name: key })
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
if (filterData.length) {
|
||||
// 多个值，多条数据
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesLinks.push(
|
||||
{
|
||||
source: Object.values(rowCondition).join(this.connector),
|
||||
target: key,
|
||||
value: value
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
seriesData.push({ name: Object.values(colCondition).join(this.connector) })
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
if (filterData.length) {
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesLinks.push(
|
||||
{
|
||||
source: Object.values(rowCondition).join(this.connector),
|
||||
target: Object.values(colCondition).join(this.connector),
|
||||
value: value
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const seriesObj = {}
|
||||
const seriesName = 'sankey'
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
layout: 'none',
|
||||
draggable: false,
|
||||
links: seriesLinks,
|
||||
data: seriesData
|
||||
}
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
375
src/views/visual/datachart/components/widgets/ChartScatter.vue
Normal file
375
src/views/visual/datachart/components/widgets/ChartScatter.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartScatter</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartScatter',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
legendData: [],
|
||||
xAxisData: [],
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const xAxisData = []
|
||||
const legendData = []
|
||||
const seriesObj = {}
|
||||
rowConditions.forEach((rowCondition) => {
|
||||
xAxisData.push(Object.values(rowCondition).join(this.connector))
|
||||
})
|
||||
colConditions.forEach((colCondition) => {
|
||||
const seriesName = Object.values(colCondition).join(this.connector) || ''
|
||||
legendData.push(seriesName)
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
// 计算每个series数据
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const seriesName = Object.values(colCondition).join(this.connector) || ''
|
||||
const seriesData = []
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
const seriesDataName = Object.values(rowCondition).join(this.connector)
|
||||
const seriesDataValue = { name: '', value: [] }
|
||||
seriesDataValue.name = seriesDataName
|
||||
seriesDataValue.value.push(seriesDataName)
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesDataValue.value.push(value)
|
||||
})
|
||||
seriesData.push(seriesDataValue)
|
||||
})
|
||||
seriesObj[seriesName].data = seriesData
|
||||
})
|
||||
this.calcData.legendData = legendData
|
||||
this.calcData.xAxisData = xAxisData
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
option.tooltip.formatter = (params) => {
|
||||
let s = params.seriesName + ' ' + params.name + '</br>'
|
||||
this.localValues.forEach(({ key }, index) => {
|
||||
s += key + ' : ' + params.value[index + 1] + '<br>'
|
||||
})
|
||||
return s
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
option.tooltip.formatter = (params) => {
|
||||
let s = params.seriesName + ' ' + params.name + '</br>'
|
||||
this.localValues.forEach(({ key }, index) => {
|
||||
s += key + ' : ' + params.value[index + 1] + '<br>'
|
||||
})
|
||||
return s
|
||||
}
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option.legend.data = this.calcData.legendData
|
||||
option.xAxis.data = this.calcData.xAxisData
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
option.tooltip.formatter = (params) => {
|
||||
let s = params.seriesName + ' ' + params.name + '</br>'
|
||||
this.localValues.forEach(({ key }, index) => {
|
||||
s += key + ' : ' + params.value[index + 1] + '<br>'
|
||||
})
|
||||
return s
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartSunburst</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartSunburst',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
57
src/views/visual/datachart/components/widgets/ChartTable.vue
Normal file
57
src/views/visual/datachart/components/widgets/ChartTable.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle" style="overflow: auto;">
|
||||
<pivot-table
|
||||
ref="pivottable"
|
||||
:data="data"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:values="values"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PivotTable from '@/components/PivotTable'
|
||||
|
||||
export default {
|
||||
name: 'ChartTable',
|
||||
components: {
|
||||
PivotTable
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
60
src/views/visual/datachart/components/widgets/ChartTree.vue
Normal file
60
src/views/visual/datachart/components/widgets/ChartTree.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartTree</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartTree',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
344
src/views/visual/datachart/components/widgets/ChartTreemap.vue
Normal file
344
src/views/visual/datachart/components/widgets/ChartTreemap.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartTreemap</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartTreemap',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c}'
|
||||
}
|
||||
},
|
||||
calcData: {
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const seriesData = this.recursion(0, {}, this.localRows, this.localValues, this.localData)
|
||||
const seriesObj = {}
|
||||
const seriesName = 'treemap'
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
leafDepth: 1,
|
||||
visibleMin: 1,
|
||||
label: { position: 'insideTopLeft' },
|
||||
data: seriesData
|
||||
}
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
// 递归
|
||||
recursion(depth, conditions = {}, rows = [], values = [], data = []) {
|
||||
const _result = []
|
||||
if (depth < rows.length) {
|
||||
const row = rows[depth]
|
||||
row.values.forEach((val) => {
|
||||
conditions[row.key] = val
|
||||
const filters = Object.keys(conditions)
|
||||
.filter((key, index) => index <= depth)
|
||||
.reduce((obj, key) => {
|
||||
obj[key] = conditions[key]
|
||||
return obj
|
||||
}, {})
|
||||
const filterData = data.filter((item) => {
|
||||
let status = true
|
||||
for (const key in filters) {
|
||||
if (filters[key] !== item[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filterData.length) {
|
||||
if (depth === (rows.length - 1)) {
|
||||
values.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
_result.push({
|
||||
name: val,
|
||||
value: value
|
||||
})
|
||||
})
|
||||
} else {
|
||||
_result.push({
|
||||
name: val,
|
||||
children: this.recursion(depth + 1, conditions, rows, values, filterData)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return _result
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
this.parseChartSeries(option, series, this.chartSeriesType)
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
parseChartSeries(option, series, type) {
|
||||
series.forEach((item) => {
|
||||
item.label.formatter = (params) => {
|
||||
return params.name + '\n\nvalue : ' + params.value
|
||||
}
|
||||
})
|
||||
},
|
||||
_combineRowPaths(...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = this.localData.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
328
src/views/visual/datachart/components/widgets/ChartWordCloud.vue
Normal file
328
src/views/visual/datachart/components/widgets/ChartWordCloud.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartWordcloud</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts-wordcloud')
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartWordcloud',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chartTheme: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: 'default'
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
chart: null,
|
||||
calcOption: {
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
calcData: {
|
||||
seriesObj: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
watchAllProps() {
|
||||
const { rows, columns, values, data } = this
|
||||
return { rows, columns, values, data }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchAllProps() {
|
||||
this.init()
|
||||
this.mergeChartOption()
|
||||
},
|
||||
chartTheme() {
|
||||
this.mergeChartTheme()
|
||||
},
|
||||
chartOption: {
|
||||
handler(newValue, oldValue) {
|
||||
this.mergeChartOption()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
this.$on('resized', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.rows.length || this.columns.length || this.values.length) {
|
||||
this.handleDataClone()
|
||||
this.setValuesToColAndRow()
|
||||
this.handleCalcData()
|
||||
} else {
|
||||
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
|
||||
}
|
||||
},
|
||||
// clone data
|
||||
handleDataClone() {
|
||||
this.localRows = JSON.parse(JSON.stringify(this.rows))
|
||||
this.localColumns = JSON.parse(JSON.stringify(this.columns))
|
||||
this.localValues = JSON.parse(JSON.stringify(this.values))
|
||||
this.localData = Object.freeze(this.data)
|
||||
},
|
||||
// set the `values` attribute to rows and columns
|
||||
setValuesToColAndRow() {
|
||||
const rowKeys = this.localRows.map(({ key }) => key)
|
||||
const columnKeys = this.localColumns.map(({ key }) => key)
|
||||
const rowValues = this._findCategory(rowKeys, this.localData)
|
||||
const columnValues = this._findCategory(columnKeys, this.localData)
|
||||
this.localRows.forEach((row) => {
|
||||
const { key, values } = row
|
||||
this.$set(row, 'values', values || rowValues[key] || [])
|
||||
})
|
||||
this.localColumns.forEach((column) => {
|
||||
const { key, values } = column
|
||||
this.$set(column, 'values', values || columnValues[key] || [])
|
||||
})
|
||||
},
|
||||
// 计算值
|
||||
handleCalcData() {
|
||||
if (!this.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...this.localRows.map(({ key, values }) => { return { key, values } })
|
||||
)
|
||||
const _rowKeys = this.localRows.map(({ key }) => key)
|
||||
const _colPaths = this._combineColPaths(
|
||||
...this.localColumns.map(({ values }) => values)
|
||||
)
|
||||
const _colKeys = this.localColumns.map(({ key }) => key)
|
||||
// 行对应的条件
|
||||
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
|
||||
// 列对应的条件
|
||||
const colConditions = convertPathToMap(_colPaths, _colKeys)
|
||||
// 针对没传入行或列的处理
|
||||
!colConditions.length && colConditions.push({})
|
||||
!rowConditions.length && rowConditions.push({})
|
||||
const seriesObj = {}
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
this.localValues.forEach(({ key }, index) => {
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
drawOutOfBound: true,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
})
|
||||
// 计算每个series数据
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const isEmptyCol = !Object.keys(colCondition).length
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
|
||||
seriesObj[seriesName].data.push(
|
||||
{
|
||||
name: Object.values(rowCondition).join(this.connector),
|
||||
value: value
|
||||
}
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.$refs.chart) return
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
setTimeout(() => {
|
||||
if (!this.chart) {
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option)
|
||||
}, 0)
|
||||
},
|
||||
mergeChartTheme() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
if (this.chartTheme !== 'default') {
|
||||
require('./themes/' + this.chartTheme + '.js')
|
||||
}
|
||||
this.chart.dispose()
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mergeChartOption() {
|
||||
if (!this.$refs.chart) return
|
||||
if (this.chart) {
|
||||
let option = Object.assign({}, this.chartOption, this.calcOption)
|
||||
option = JSON.parse(JSON.stringify(option))
|
||||
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
|
||||
option.series = series
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...arrays) {
|
||||
const len = arrays.length
|
||||
let _result = []
|
||||
if (len) {
|
||||
const rowPaths = arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.values.forEach(_prevEl => {
|
||||
const prevKey = prev.key.split(SEPARATOR)
|
||||
curr.values.forEach(_currEl => {
|
||||
const currKey = curr.key
|
||||
const conditions = {}
|
||||
prevKey.forEach((key, i) => {
|
||||
conditions[key] = _prevEl.split(SEPARATOR)[i]
|
||||
})
|
||||
conditions[currKey] = _currEl
|
||||
// 判断数据里是否有该项
|
||||
const filter = data.some((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filter) {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
}
|
||||
})
|
||||
})
|
||||
return { key: prev.key + SEPARATOR + curr.key, values: arr }
|
||||
}) || {}
|
||||
_result = rowPaths.values || []
|
||||
}
|
||||
return _result
|
||||
},
|
||||
_combineColPaths(...arrays) {
|
||||
return arrays.length ? arrays.reduce((prev, curr) => {
|
||||
const arr = []
|
||||
prev.forEach(_prevEl => {
|
||||
curr.forEach(_currEl => {
|
||||
arr.push(_prevEl + SEPARATOR + _currEl)
|
||||
})
|
||||
})
|
||||
return arr
|
||||
}) : arrays
|
||||
},
|
||||
_findCategory(keys = [], data = []) {
|
||||
const _result = {}
|
||||
data.forEach(item => {
|
||||
keys.forEach(key => {
|
||||
// Remove duplicates
|
||||
_result[key] = _result[key] || []
|
||||
_result[key].push(item[key])
|
||||
_result[key] = [...new Set(_result[key])]
|
||||
})
|
||||
})
|
||||
return _result
|
||||
},
|
||||
_reduceValue(data, key) {
|
||||
if (!data.length) return 0
|
||||
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
|
||||
},
|
||||
_filterData(conditions, data) {
|
||||
return data.filter((data) => {
|
||||
let status = true
|
||||
for (const key in conditions) {
|
||||
if (conditions[key] !== data[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
445
src/views/visual/datachart/components/widgets/themes/chalk.js
Normal file
445
src/views/visual/datachart/components/widgets/themes/chalk.js
Normal file
@@ -0,0 +1,445 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('chalk', {
|
||||
'color': [
|
||||
'#fc97af',
|
||||
'#87f7cf',
|
||||
'#f7f494',
|
||||
'#72ccff',
|
||||
'#f7c5a0',
|
||||
'#d4a4eb',
|
||||
'#d2f5a6',
|
||||
'#76f2f2'
|
||||
],
|
||||
'backgroundColor': 'rgba(41,52,65,1)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#ffffff'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#dddddd'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '4'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '0',
|
||||
'symbol': 'circle',
|
||||
'smooth': true
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '4'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '0',
|
||||
'symbol': 'circle',
|
||||
'smooth': true
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#fc97af',
|
||||
'color0': 'transparent',
|
||||
'borderColor': '#fc97af',
|
||||
'borderColor0': '#87f7cf',
|
||||
'borderWidth': '2'
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '1',
|
||||
'color': '#ffffff'
|
||||
},
|
||||
'symbolSize': '0',
|
||||
'symbol': 'circle',
|
||||
'smooth': true,
|
||||
'color': [
|
||||
'#fc97af',
|
||||
'#87f7cf',
|
||||
'#f7f494',
|
||||
'#72ccff',
|
||||
'#f7c5a0',
|
||||
'#d4a4eb',
|
||||
'#d2f5a6',
|
||||
'#76f2f2'
|
||||
],
|
||||
'label': {
|
||||
'color': '#293441'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#f3f3f3',
|
||||
'borderColor': '#999999',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(255,178,72,1)',
|
||||
'borderColor': '#eb8146',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(137,52,72)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#f3f3f3',
|
||||
'borderColor': '#999999',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(255,178,72,1)',
|
||||
'borderColor': '#eb8146',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(137,52,72)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#666666'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#e6e6e6'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#666666'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#e6e6e6'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#666666'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#e6e6e6'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#666666'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#e6e6e6'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#87f7cf',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#87f7cf',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#f7f494'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#87f7cf',
|
||||
'borderColor': '#87f7cf',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#87f7cf',
|
||||
'borderColor': '#87f7cf',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#fc97af',
|
||||
'borderColor': 'rgba(252,151,175,0.3)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#87f7cf'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#87f7cf'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#fc97af',
|
||||
'#87f7cf'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(255,255,255,0)',
|
||||
'dataBackgroundColor': 'rgba(114,204,255,1)',
|
||||
'fillerColor': 'rgba(114,204,255,0.2)',
|
||||
'handleColor': '#72ccff',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#293441'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#293441'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
448
src/views/visual/datachart/components/widgets/themes/dark.js
Normal file
448
src/views/visual/datachart/components/widgets/themes/dark.js
Normal file
@@ -0,0 +1,448 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('dark', {
|
||||
'color': [
|
||||
'#dd6b66',
|
||||
'#759aa0',
|
||||
'#e69d87',
|
||||
'#8dc1a9',
|
||||
'#ea7e53',
|
||||
'#eedd78',
|
||||
'#73a373',
|
||||
'#73b9bc',
|
||||
'#7289ab',
|
||||
'#91ca8c',
|
||||
'#f49f42'
|
||||
],
|
||||
'backgroundColor': 'rgba(51,51,51,1)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'circle',
|
||||
'smooth': false
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'circle',
|
||||
'smooth': false
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#fd1050',
|
||||
'color0': '#0cf49b',
|
||||
'borderColor': '#fd1050',
|
||||
'borderColor0': '#0cf49b',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaaaaa'
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'circle',
|
||||
'smooth': false,
|
||||
'color': [
|
||||
'#dd6b66',
|
||||
'#759aa0',
|
||||
'#e69d87',
|
||||
'#8dc1a9',
|
||||
'#ea7e53',
|
||||
'#eedd78',
|
||||
'#73a373',
|
||||
'#73b9bc',
|
||||
'#7289ab',
|
||||
'#91ca8c',
|
||||
'#f49f42'
|
||||
],
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eee',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(255,215,0,0.8)',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eee',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(255,215,0,0.8)',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#aaaaaa'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#aaaaaa'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#aaaaaa'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#aaaaaa'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee',
|
||||
'width': '1'
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#eeeeee',
|
||||
'width': '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#eeeeee',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#dd6b66',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#a9334c'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#eeeeee',
|
||||
'borderColor': '#eeeeee',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#eeeeee',
|
||||
'borderColor': '#eeeeee',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#e43c59',
|
||||
'borderColor': 'rgba(194,53,49,0.5)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#bf444c',
|
||||
'#d88273',
|
||||
'#f6efa6'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(47,69,84,0)',
|
||||
'dataBackgroundColor': 'rgba(255,255,255,0.3)',
|
||||
'fillerColor': 'rgba(167,183,204,0.4)',
|
||||
'handleColor': '#a7b7cc',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
445
src/views/visual/datachart/components/widgets/themes/essos.js
Normal file
445
src/views/visual/datachart/components/widgets/themes/essos.js
Normal file
@@ -0,0 +1,445 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('essos', {
|
||||
'color': [
|
||||
'#893448',
|
||||
'#d95850',
|
||||
'#eb8146',
|
||||
'#ffb248',
|
||||
'#f2d643',
|
||||
'#ebdba4'
|
||||
],
|
||||
'backgroundColor': 'rgba(242,234,191,0.15)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#d95850'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '2'
|
||||
},
|
||||
'symbolSize': '6',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '2'
|
||||
},
|
||||
'symbolSize': '6',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#eb8146',
|
||||
'color0': 'transparent',
|
||||
'borderColor': '#d95850',
|
||||
'borderColor0': '#58c470',
|
||||
'borderWidth': '2'
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaaaaa'
|
||||
},
|
||||
'symbolSize': '6',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true,
|
||||
'color': [
|
||||
'#893448',
|
||||
'#d95850',
|
||||
'#eb8146',
|
||||
'#ffb248',
|
||||
'#f2d643',
|
||||
'#ebdba4'
|
||||
],
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#f3f3f3',
|
||||
'borderColor': '#999999',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#ffb248',
|
||||
'borderColor': '#eb8146',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#f3f3f3',
|
||||
'borderColor': '#999999',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#ffb248',
|
||||
'borderColor': '#eb8146',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#e6e6e6'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#e6e6e6'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#e6e6e6'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#e6e6e6'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#893448',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#893448',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#ffb248'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#893448',
|
||||
'borderColor': '#893448',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#893448',
|
||||
'borderColor': '#893448',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#eb8146',
|
||||
'borderColor': 'rgba(255,178,72,0.41)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#893448'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#893448',
|
||||
'#d95850',
|
||||
'#eb8146',
|
||||
'#ffb248',
|
||||
'#f2d643',
|
||||
'rgb(247,238,173)'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(255,255,255,0)',
|
||||
'dataBackgroundColor': 'rgba(255,178,72,0.5)',
|
||||
'fillerColor': 'rgba(255,178,72,0.15)',
|
||||
'handleColor': '#ffb248',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
@@ -0,0 +1,459 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('infographic', {
|
||||
'color': [
|
||||
'#c1232b',
|
||||
'#27727b',
|
||||
'#fcce10',
|
||||
'#e87c25',
|
||||
'#b5c334',
|
||||
'#fe8463',
|
||||
'#9bca63',
|
||||
'#fad860',
|
||||
'#f3a43b',
|
||||
'#60c0dd',
|
||||
'#d7504b',
|
||||
'#c6e579',
|
||||
'#f4e001',
|
||||
'#f0805a',
|
||||
'#26c0c0'
|
||||
],
|
||||
'backgroundColor': 'rgba(0,0,0,0)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#27727b'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '5',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '5',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#c1232b',
|
||||
'color0': '#b5c334',
|
||||
'borderColor': '#c1232b',
|
||||
'borderColor0': '#b5c334',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaaaaa'
|
||||
},
|
||||
'symbolSize': '5',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false,
|
||||
'color': [
|
||||
'#c1232b',
|
||||
'#27727b',
|
||||
'#fcce10',
|
||||
'#e87c25',
|
||||
'#b5c334',
|
||||
'#fe8463',
|
||||
'#9bca63',
|
||||
'#fad860',
|
||||
'#f3a43b',
|
||||
'#60c0dd',
|
||||
'#d7504b',
|
||||
'#c6e579',
|
||||
'#f4e001',
|
||||
'#f0805a',
|
||||
'#26c0c0'
|
||||
],
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#dddddd',
|
||||
'borderColor': '#eeeeee',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#fe994e',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#c1232b'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#dddddd',
|
||||
'borderColor': '#eeeeee',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#fe994e',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#c1232b'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#27727b'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#27727b'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#27727b'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#27727b'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#c1232b'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#e87c25'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#27727b',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#27727b',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#293c55',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#27727b',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#72d4e0'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#27727b',
|
||||
'borderColor': '#27727b',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#27727b',
|
||||
'borderColor': '#27727b',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#c1232b',
|
||||
'borderColor': 'rgba(194,53,49,0.5)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#293c55'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#293c55'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#c1232b',
|
||||
'#fcce10'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(0,0,0,0)',
|
||||
'dataBackgroundColor': 'rgba(181,195,52,0.3)',
|
||||
'fillerColor': 'rgba(181,195,52,0.2)',
|
||||
'handleColor': '#27727b',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
469
src/views/visual/datachart/components/widgets/themes/macarons.js
Normal file
469
src/views/visual/datachart/components/widgets/themes/macarons.js
Normal file
@@ -0,0 +1,469 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('macarons', {
|
||||
'color': [
|
||||
'#2ec7c9',
|
||||
'#b6a2de',
|
||||
'#5ab1ef',
|
||||
'#ffb980',
|
||||
'#d87a80',
|
||||
'#8d98b3',
|
||||
'#e5cf0d',
|
||||
'#97b552',
|
||||
'#95706d',
|
||||
'#dc69aa',
|
||||
'#07a2a4',
|
||||
'#9a7fd1',
|
||||
'#588dd5',
|
||||
'#f5994e',
|
||||
'#c05050',
|
||||
'#59678c',
|
||||
'#c9ab00',
|
||||
'#7eb00a',
|
||||
'#6f5553',
|
||||
'#c14089'
|
||||
],
|
||||
'backgroundColor': 'rgba(0,0,0,0)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#008acd'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 3,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 3,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#d87a80',
|
||||
'color0': '#2ec7c9',
|
||||
'borderColor': '#d87a80',
|
||||
'borderColor0': '#2ec7c9',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaaaaa'
|
||||
},
|
||||
'symbolSize': 3,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true,
|
||||
'color': [
|
||||
'#2ec7c9',
|
||||
'#b6a2de',
|
||||
'#5ab1ef',
|
||||
'#ffb980',
|
||||
'#d87a80',
|
||||
'#8d98b3',
|
||||
'#e5cf0d',
|
||||
'#97b552',
|
||||
'#95706d',
|
||||
'#dc69aa',
|
||||
'#07a2a4',
|
||||
'#9a7fd1',
|
||||
'#588dd5',
|
||||
'#f5994e',
|
||||
'#c05050',
|
||||
'#59678c',
|
||||
'#c9ab00',
|
||||
'#7eb00a',
|
||||
'#6f5553',
|
||||
'#c14089'
|
||||
],
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#dddddd',
|
||||
'borderColor': '#eeeeee',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(254,153,78,1)',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#d87a80'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#dddddd',
|
||||
'borderColor': '#eeeeee',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(254,153,78,1)',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#d87a80'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#008acd'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#008acd'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': true,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#008acd'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': true,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#008acd'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#2ec7c9'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#18a4a6'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#008acd',
|
||||
'width': '1'
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#008acd',
|
||||
'width': '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#008acd',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#008acd',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#a9334c'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#008acd',
|
||||
'borderColor': '#008acd',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#008acd',
|
||||
'borderColor': '#008acd',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#2ec7c9',
|
||||
'borderColor': 'rgba(46,199,201,0.4)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#008acd'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#008acd'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#5ab1ef',
|
||||
'#e0ffff'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(47,69,84,0)',
|
||||
'dataBackgroundColor': 'rgba(239,239,255,1)',
|
||||
'fillerColor': 'rgba(182,162,222,0.2)',
|
||||
'handleColor': '#008acd',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
@@ -0,0 +1,446 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('purple-passion', {
|
||||
'color': [
|
||||
'#9b8bba',
|
||||
'#e098c7',
|
||||
'#8fd3e8',
|
||||
'#71669e',
|
||||
'#cc70af',
|
||||
'#7cb4cc'
|
||||
],
|
||||
'backgroundColor': 'rgba(91,92,110,1)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#ffffff'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '7',
|
||||
'symbol': 'circle',
|
||||
'smooth': true
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '7',
|
||||
'symbol': 'circle',
|
||||
'smooth': true
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#e098c7',
|
||||
'color0': 'transparent',
|
||||
'borderColor': '#e098c7',
|
||||
'borderColor0': '#8fd3e8',
|
||||
'borderWidth': '2'
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaaaaa'
|
||||
},
|
||||
'symbolSize': '7',
|
||||
'symbol': 'circle',
|
||||
'smooth': true,
|
||||
'color': [
|
||||
'#9b8bba',
|
||||
'#e098c7',
|
||||
'#8fd3e8',
|
||||
'#71669e',
|
||||
'#cc70af',
|
||||
'#7cb4cc'
|
||||
],
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eee',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#e098c7',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eee',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#e098c7',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee',
|
||||
'#333333'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': true,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee',
|
||||
'#333333'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': true,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee',
|
||||
'#333333'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': true,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee',
|
||||
'#333333'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': true,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#8fd3e8',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#8fd3e8',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#8fd3e8'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#8fd3e8',
|
||||
'borderColor': '#8fd3e8',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#8fd3e8',
|
||||
'borderColor': '#8fd3e8',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#8fd3e8',
|
||||
'borderColor': 'rgba(138,124,168,0.37)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#8fd3e8'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#8fd3e8'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#8a7ca8',
|
||||
'#e098c7',
|
||||
'#cceffa'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(0,0,0,0)',
|
||||
'dataBackgroundColor': 'rgba(255,255,255,0.3)',
|
||||
'fillerColor': 'rgba(167,183,204,0.4)',
|
||||
'handleColor': '#a7b7cc',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
469
src/views/visual/datachart/components/widgets/themes/roma.js
Normal file
469
src/views/visual/datachart/components/widgets/themes/roma.js
Normal file
@@ -0,0 +1,469 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('roma', {
|
||||
'color': [
|
||||
'#e01f54',
|
||||
'#001852',
|
||||
'#f5e8c8',
|
||||
'#b8d2c7',
|
||||
'#c6b38e',
|
||||
'#a4d8c2',
|
||||
'#f3d999',
|
||||
'#d3758f',
|
||||
'#dcc392',
|
||||
'#2e4783',
|
||||
'#82b6e9',
|
||||
'#ff6347',
|
||||
'#a092f1',
|
||||
'#0a915d',
|
||||
'#eaf889',
|
||||
'#6699FF',
|
||||
'#ff6666',
|
||||
'#3cb371',
|
||||
'#d5b158',
|
||||
'#38b6b6'
|
||||
],
|
||||
'backgroundColor': 'rgba(0,0,0,0)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#e01f54',
|
||||
'color0': '#001852',
|
||||
'borderColor': '#f5e8c8',
|
||||
'borderColor0': '#b8d2c7',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaaaaa'
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false,
|
||||
'color': [
|
||||
'#e01f54',
|
||||
'#001852',
|
||||
'#f5e8c8',
|
||||
'#b8d2c7',
|
||||
'#c6b38e',
|
||||
'#a4d8c2',
|
||||
'#f3d999',
|
||||
'#d3758f',
|
||||
'#dcc392',
|
||||
'#2e4783',
|
||||
'#82b6e9',
|
||||
'#ff6347',
|
||||
'#a092f1',
|
||||
'#0a915d',
|
||||
'#eaf889',
|
||||
'#6699FF',
|
||||
'#ff6666',
|
||||
'#3cb371',
|
||||
'#d5b158',
|
||||
'#38b6b6'
|
||||
],
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eeeeee',
|
||||
'borderColor': '#444444',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(255,215,0,0.8)',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eeeeee',
|
||||
'borderColor': '#444444',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(255,215,0,0.8)',
|
||||
'borderColor': '#444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#293c55',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#293c55',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#a9334c'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#293c55',
|
||||
'borderColor': '#293c55',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#293c55',
|
||||
'borderColor': '#293c55',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#e43c59',
|
||||
'borderColor': 'rgba(194,53,49,0.5)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#293c55'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#293c55'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#e01f54',
|
||||
'#e7dbc3'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(47,69,84,0)',
|
||||
'dataBackgroundColor': 'rgba(47,69,84,0.3)',
|
||||
'fillerColor': 'rgba(167,183,204,0.4)',
|
||||
'handleColor': '#a7b7cc',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
445
src/views/visual/datachart/components/widgets/themes/shine.js
Normal file
445
src/views/visual/datachart/components/widgets/themes/shine.js
Normal file
@@ -0,0 +1,445 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('shine', {
|
||||
'color': [
|
||||
'#c12e34',
|
||||
'#e6b600',
|
||||
'#0098d9',
|
||||
'#2b821d',
|
||||
'#005eaa',
|
||||
'#339ca8',
|
||||
'#cda819',
|
||||
'#32a487'
|
||||
],
|
||||
'backgroundColor': 'rgba(0,0,0,0)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#c12e34',
|
||||
'color0': '#2b821d',
|
||||
'borderColor': '#c12e34',
|
||||
'borderColor0': '#2b821d',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaaaaa'
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false,
|
||||
'color': [
|
||||
'#c12e34',
|
||||
'#e6b600',
|
||||
'#0098d9',
|
||||
'#2b821d',
|
||||
'#005eaa',
|
||||
'#339ca8',
|
||||
'#cda819',
|
||||
'#32a487'
|
||||
],
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#ddd',
|
||||
'borderColor': '#eee',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#e6b600',
|
||||
'borderColor': '#ddd',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#c12e34'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#c12e34'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#ddd',
|
||||
'borderColor': '#eee',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#e6b600',
|
||||
'borderColor': '#ddd',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#c12e34'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#c12e34'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#06467c'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#4187c2'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#005eaa',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#005eaa',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#005eaa'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#005eaa',
|
||||
'borderColor': '#005eaa',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#005eaa',
|
||||
'borderColor': '#005eaa',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#005eaa',
|
||||
'borderColor': 'rgba(49,107,194,0.5)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#005eaa'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#005eaa'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#1790cf',
|
||||
'#a2d4e6'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(47,69,84,0)',
|
||||
'dataBackgroundColor': 'rgba(47,69,84,0.3)',
|
||||
'fillerColor': 'rgba(167,183,204,0.4)',
|
||||
'handleColor': '#a7b7cc',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
450
src/views/visual/datachart/components/widgets/themes/vintage.js
Normal file
450
src/views/visual/datachart/components/widgets/themes/vintage.js
Normal file
@@ -0,0 +1,450 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('vintage', {
|
||||
'color': [
|
||||
'#d87c7c',
|
||||
'#919e8b',
|
||||
'#d7ab82',
|
||||
'#6e7074',
|
||||
'#61a0a8',
|
||||
'#efa18d',
|
||||
'#787464',
|
||||
'#cc7e63',
|
||||
'#724e58',
|
||||
'#4b565b'
|
||||
],
|
||||
'backgroundColor': 'rgba(254,248,239,1)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#aaaaaa'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 1
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 2
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#c23531',
|
||||
'color0': '#314656',
|
||||
'borderColor': '#c23531',
|
||||
'borderColor0': '#314656',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaaaaa'
|
||||
},
|
||||
'symbolSize': 4,
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false,
|
||||
'color': [
|
||||
'#d87c7c',
|
||||
'#919e8b',
|
||||
'#d7ab82',
|
||||
'#6e7074',
|
||||
'#61a0a8',
|
||||
'#efa18d',
|
||||
'#787464',
|
||||
'#cc7e63',
|
||||
'#724e58',
|
||||
'#4b565b'
|
||||
],
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eeeeee',
|
||||
'borderColor': '#444444',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(255,215,0,0.8)',
|
||||
'borderColor': '#444444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eeeeee',
|
||||
'borderColor': '#444444',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(255,215,0,0.8)',
|
||||
'borderColor': '#444444',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#ccc'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.3)',
|
||||
'rgba(200,200,200,0.3)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#293c55',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#293c55',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#a9334c'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#293c55',
|
||||
'borderColor': '#293c55',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#293c55',
|
||||
'borderColor': '#293c55',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#e43c59',
|
||||
'borderColor': 'rgba(194,53,49,0.5)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#293c55'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#293c55'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#bf444c',
|
||||
'#d88273',
|
||||
'#f6efa6'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(47,69,84,0)',
|
||||
'dataBackgroundColor': 'rgba(47,69,84,0.3)',
|
||||
'fillerColor': 'rgba(167,183,204,0.4)',
|
||||
'handleColor': '#a7b7cc',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#eeeeee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
441
src/views/visual/datachart/components/widgets/themes/walden.js
Normal file
441
src/views/visual/datachart/components/widgets/themes/walden.js
Normal file
@@ -0,0 +1,441 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('walden', {
|
||||
'color': [
|
||||
'#3fb1e3',
|
||||
'#6be6c1',
|
||||
'#626c91',
|
||||
'#a0a7e6',
|
||||
'#c4ebad',
|
||||
'#96dee8'
|
||||
],
|
||||
'backgroundColor': 'rgba(252,252,252,0)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#666666'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '8',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '8',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#e6a0d2',
|
||||
'color0': 'transparent',
|
||||
'borderColor': '#e6a0d2',
|
||||
'borderColor0': '#3fb1e3',
|
||||
'borderWidth': '2'
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '1',
|
||||
'color': '#cccccc'
|
||||
},
|
||||
'symbolSize': '8',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false,
|
||||
'color': [
|
||||
'#3fb1e3',
|
||||
'#6be6c1',
|
||||
'#626c91',
|
||||
'#a0a7e6',
|
||||
'#c4ebad',
|
||||
'#96dee8'
|
||||
],
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eeeeee',
|
||||
'borderColor': '#aaaaaa',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(63,177,227,0.25)',
|
||||
'borderColor': '#3fb1e3',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#3fb1e3'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eeeeee',
|
||||
'borderColor': '#aaaaaa',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(63,177,227,0.25)',
|
||||
'borderColor': '#3fb1e3',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#3fb1e3'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#626c91',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#626c91',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#626c91'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#626c91',
|
||||
'borderColor': '#626c91',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#626c91',
|
||||
'borderColor': '#626c91',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#3fb1e3',
|
||||
'borderColor': 'rgba(63,177,227,0.15)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#626c91'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#626c91'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#2a99c9',
|
||||
'#afe8ff'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(255,255,255,0)',
|
||||
'dataBackgroundColor': 'rgba(222,222,222,1)',
|
||||
'fillerColor': 'rgba(114,230,212,0.25)',
|
||||
'handleColor': '#cccccc',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
442
src/views/visual/datachart/components/widgets/themes/westeros.js
Normal file
442
src/views/visual/datachart/components/widgets/themes/westeros.js
Normal file
@@ -0,0 +1,442 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('westeros', {
|
||||
'color': [
|
||||
'#516b91',
|
||||
'#59c4e6',
|
||||
'#edafda',
|
||||
'#93b7e3',
|
||||
'#a5e7f0',
|
||||
'#cbb0e3'
|
||||
],
|
||||
'backgroundColor': 'rgba(0,0,0,0)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#516b91'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#93b7e3'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '2'
|
||||
},
|
||||
'symbolSize': '6',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '2'
|
||||
},
|
||||
'symbolSize': '6',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#edafda',
|
||||
'color0': 'transparent',
|
||||
'borderColor': '#d680bc',
|
||||
'borderColor0': '#8fd3e8',
|
||||
'borderWidth': '2'
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': 1,
|
||||
'color': '#aaa'
|
||||
},
|
||||
'symbolSize': '6',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': true,
|
||||
'color': [
|
||||
'#516b91',
|
||||
'#59c4e6',
|
||||
'#edafda',
|
||||
'#93b7e3',
|
||||
'#a5e7f0',
|
||||
'#cbb0e3'
|
||||
],
|
||||
'label': {
|
||||
'color': '#eee'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#f3f3f3',
|
||||
'borderColor': '#516b91',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#a5e7f0',
|
||||
'borderColor': '#516b91',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#516b91'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#f3f3f3',
|
||||
'borderColor': '#516b91',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': '#a5e7f0',
|
||||
'borderColor': '#516b91',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#000'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#516b91'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#8fd3e8',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#8fd3e8',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#8fd3e8'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#8fd3e8',
|
||||
'borderColor': '#8fd3e8',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#8fd3e8',
|
||||
'borderColor': '#8fd3e8',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#8fd3e8',
|
||||
'borderColor': 'rgba(138,124,168,0.37)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#8fd3e8'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#8fd3e8'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#516b91',
|
||||
'#59c4e6',
|
||||
'#a5e7f0'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(0,0,0,0)',
|
||||
'dataBackgroundColor': 'rgba(255,255,255,0.3)',
|
||||
'fillerColor': 'rgba(167,183,204,0.4)',
|
||||
'handleColor': '#a7b7cc',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#333333'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#eee'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#eee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
@@ -0,0 +1,442 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory)
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
}(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
echarts.registerTheme('wonderland', {
|
||||
'color': [
|
||||
'#4ea397',
|
||||
'#22c3aa',
|
||||
'#7bd9a5',
|
||||
'#d0648a',
|
||||
'#f58db2',
|
||||
'#f2b3c9'
|
||||
],
|
||||
'backgroundColor': 'rgba(255,255,255,0)',
|
||||
'textStyle': {},
|
||||
'title': {
|
||||
'textStyle': {
|
||||
'color': '#666666'
|
||||
},
|
||||
'subtextStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'line': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '8',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'radar': {
|
||||
'itemStyle': {
|
||||
'borderWidth': '2'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '3'
|
||||
},
|
||||
'symbolSize': '8',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false
|
||||
},
|
||||
'bar': {
|
||||
'itemStyle': {
|
||||
'barBorderWidth': 0,
|
||||
'barBorderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'pie': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'scatter': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'boxplot': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'parallel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'sankey': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'funnel': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'gauge': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
}
|
||||
},
|
||||
'candlestick': {
|
||||
'itemStyle': {
|
||||
'color': '#d0648a',
|
||||
'color0': 'transparent',
|
||||
'borderColor': '#d0648a',
|
||||
'borderColor0': '#22c3aa',
|
||||
'borderWidth': '1'
|
||||
}
|
||||
},
|
||||
'graph': {
|
||||
'itemStyle': {
|
||||
'borderWidth': 0,
|
||||
'borderColor': '#ccc'
|
||||
},
|
||||
'lineStyle': {
|
||||
'width': '1',
|
||||
'color': '#cccccc'
|
||||
},
|
||||
'symbolSize': '8',
|
||||
'symbol': 'emptyCircle',
|
||||
'smooth': false,
|
||||
'color': [
|
||||
'#4ea397',
|
||||
'#22c3aa',
|
||||
'#7bd9a5',
|
||||
'#d0648a',
|
||||
'#f58db2',
|
||||
'#f2b3c9'
|
||||
],
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
},
|
||||
'map': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eeeeee',
|
||||
'borderColor': '#999999',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(34,195,170,0.25)',
|
||||
'borderColor': '#22c3aa',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#28544e'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#349e8e'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'geo': {
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'areaColor': '#eeeeee',
|
||||
'borderColor': '#999999',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'areaColor': 'rgba(34,195,170,0.25)',
|
||||
'borderColor': '#22c3aa',
|
||||
'borderWidth': 1
|
||||
}
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#28544e'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#349e8e'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'categoryAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'valueAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'logAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeAxis': {
|
||||
'axisLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': '#cccccc'
|
||||
}
|
||||
},
|
||||
'axisTick': {
|
||||
'show': false,
|
||||
'lineStyle': {
|
||||
'color': '#333'
|
||||
}
|
||||
},
|
||||
'axisLabel': {
|
||||
'show': true,
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'splitLine': {
|
||||
'show': true,
|
||||
'lineStyle': {
|
||||
'color': [
|
||||
'#eeeeee'
|
||||
]
|
||||
}
|
||||
},
|
||||
'splitArea': {
|
||||
'show': false,
|
||||
'areaStyle': {
|
||||
'color': [
|
||||
'rgba(250,250,250,0.05)',
|
||||
'rgba(200,200,200,0.02)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
'toolbox': {
|
||||
'iconStyle': {
|
||||
'normal': {
|
||||
'borderColor': '#999999'
|
||||
},
|
||||
'emphasis': {
|
||||
'borderColor': '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
'legend': {
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'tooltip': {
|
||||
'axisPointer': {
|
||||
'lineStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
},
|
||||
'crossStyle': {
|
||||
'color': '#cccccc',
|
||||
'width': 1
|
||||
}
|
||||
}
|
||||
},
|
||||
'timeline': {
|
||||
'lineStyle': {
|
||||
'color': '#4ea397',
|
||||
'width': 1
|
||||
},
|
||||
'itemStyle': {
|
||||
'normal': {
|
||||
'color': '#4ea397',
|
||||
'borderWidth': 1
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#4ea397'
|
||||
}
|
||||
},
|
||||
'controlStyle': {
|
||||
'normal': {
|
||||
'color': '#4ea397',
|
||||
'borderColor': '#4ea397',
|
||||
'borderWidth': 0.5
|
||||
},
|
||||
'emphasis': {
|
||||
'color': '#4ea397',
|
||||
'borderColor': '#4ea397',
|
||||
'borderWidth': 0.5
|
||||
}
|
||||
},
|
||||
'checkpointStyle': {
|
||||
'color': '#4ea397',
|
||||
'borderColor': 'rgba(60,235,210,0.3)'
|
||||
},
|
||||
'label': {
|
||||
'normal': {
|
||||
'textStyle': {
|
||||
'color': '#4ea397'
|
||||
}
|
||||
},
|
||||
'emphasis': {
|
||||
'textStyle': {
|
||||
'color': '#4ea397'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'visualMap': {
|
||||
'color': [
|
||||
'#d0648a',
|
||||
'#22c3aa',
|
||||
'#adfff1'
|
||||
]
|
||||
},
|
||||
'dataZoom': {
|
||||
'backgroundColor': 'rgba(255,255,255,0)',
|
||||
'dataBackgroundColor': 'rgba(222,222,222,1)',
|
||||
'fillerColor': 'rgba(114,230,212,0.25)',
|
||||
'handleColor': '#cccccc',
|
||||
'handleSize': '100%',
|
||||
'textStyle': {
|
||||
'color': '#999999'
|
||||
}
|
||||
},
|
||||
'markPoint': {
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
},
|
||||
'emphasis': {
|
||||
'label': {
|
||||
'color': '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
33
src/views/visual/datachart/index.vue
Normal file
33
src/views/visual/datachart/index.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="el-zoom-in-center">
|
||||
<data-chart-list v-if="options.showList" @showCard="showCard" />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataChartList from './DataChartList'
|
||||
|
||||
export default {
|
||||
name: 'DataChart',
|
||||
components: { DataChartList },
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
data: {},
|
||||
showList: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCard(data) {
|
||||
Object.assign(this.options, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
563
src/views/visual/datascreen/DataScreenBuild.vue
Normal file
563
src/views/visual/datascreen/DataScreenBuild.vue
Normal file
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<div class="screen-container">
|
||||
<div class="widget-left-container">
|
||||
<div class="widget-left-header">
|
||||
<span>{{ dataScreen.screenName }}</span>
|
||||
</div>
|
||||
<div class="widget-left-wrapper">
|
||||
<ul class="list-group">
|
||||
<li v-for="(item, index) in dataChartList" :key="item.id" class="list-group-item">
|
||||
<div class="list-group-item-text">{{ item.chartName }}</div>
|
||||
<div class="list-group-item-button"><el-button icon="el-icon-plus" type="text" size="mini" :disabled="item.disabled" @click="handleAddChart(item)" /></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-center-container">
|
||||
<div class="widget-center-header">
|
||||
<div class="widget-center-header-button">
|
||||
<el-button icon="el-icon-view" type="text" @click="handlePreview">
|
||||
预览
|
||||
</el-button>
|
||||
<el-button icon="el-icon-delete" type="text" @click="handleReset">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-hasPerm="['visual:screen:build']" icon="el-icon-plus" type="text" @click="handleSubmit">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button icon="el-icon-close" type="text" @click="handleCancel">
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="widgetCenterSection" class="widget-center-section">
|
||||
<div class="widget-center-content" :style="{ width: contentStyle.width + 'px', height: contentStyle.height + 'px' }">
|
||||
<div class="widget-center-wrapper" :style="{ width: widget.width + 'px', height: widget.height + 'px', transform: `scale(${widget.scale / 100})`, background: 'url('+ publicPath + widget.backgroundImage +') 0% 0% / 100% 100%' }" @click="handleLayoutClick">
|
||||
<vdr
|
||||
v-for="item in widget.layout"
|
||||
:key="item.i"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:parent="true"
|
||||
:draggable="true"
|
||||
:resizable="true"
|
||||
:is-conflict-check="true"
|
||||
:grid="[20,20]"
|
||||
@dragstop="onDragStop(arguments, item)"
|
||||
@resizestop="onResizeStop(arguments, item)"
|
||||
>
|
||||
<screen-border :border-box="`${getChartProperty(item.i) ? getChartProperty(item.i).border : 'BorderBox0'}`" :border-title="getChartItem(item.i).chartName" :border-style="{ height: `${item.h}`, width: `${item.w}` }">
|
||||
<div v-loading="getChartItem(item.i).loading" :style="{backgroundColor: `${getChartProperty(item.i) ? getChartProperty(item.i).backgroundColor : 'rgba(255, 255, 255, 0.1)'}`}" @click.stop="handleItemClick(item.i)">
|
||||
<chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{ height: `${item.h}px`, width: `${item.w}px` }" />
|
||||
<div v-else :style="{ height: `${item.h}px`, width: `${item.w}px` }" />
|
||||
</div>
|
||||
</screen-border>
|
||||
</vdr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-right-container">
|
||||
<el-tabs v-model="activeTabName" type="border-card" stretch class="widget-right-tab">
|
||||
<el-tab-pane label="酷屏属性" name="first">
|
||||
<div class="widget-right-pane-screen">
|
||||
<el-form size="mini" label-position="top">
|
||||
<el-form-item label="酷屏宽度">
|
||||
<el-input-number v-model="widget.width" controls-position="right" :min="1280" />
|
||||
</el-form-item>
|
||||
<el-form-item label="酷屏高度">
|
||||
<el-input-number v-model="widget.height" controls-position="right" :min="800" />
|
||||
</el-form-item>
|
||||
<el-form-item label="缩放">
|
||||
<el-slider v-model="widget.scale" :format-tooltip="formatTooltip" />
|
||||
</el-form-item>
|
||||
<el-form-item label="背景图片">
|
||||
<el-select v-model="widget.backgroundImage">
|
||||
<el-option
|
||||
v-for="(banner, index) in banners"
|
||||
:key="index"
|
||||
:label="banner.src"
|
||||
:value="banner.src"
|
||||
/>
|
||||
</el-select>
|
||||
<el-image :src="publicPath + widget.backgroundImage" style="width: 250px; height: 150px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="缩略图">
|
||||
<el-upload
|
||||
action="#"
|
||||
accept=".png, .jpg, .jpeg"
|
||||
list-type="picture-card"
|
||||
:limit="1"
|
||||
:auto-upload="false"
|
||||
:before-upload="beforeUpload"
|
||||
:on-change="handleChange"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
:class="{ hideUpload: hideUpload }"
|
||||
>
|
||||
<i slot="default" class="el-icon-plus" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图表属性" name="second" :disabled="true">
|
||||
<div class="widget-right-pane-chart">
|
||||
<el-form size="mini" label-position="top">
|
||||
<el-form-item label="图表名称">
|
||||
<el-input v-model="currentChartProperty.chartName" :disabled="true" style="width: 89%;" />
|
||||
<el-button v-if="currentChartProperty.id" type="danger" icon="el-icon-delete" circle @click="handleDeleteChart(currentChartProperty.id)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图表边框">
|
||||
<el-select v-model="currentChartProperty.border">
|
||||
<el-option
|
||||
v-for="(border, index) in borders"
|
||||
:key="index"
|
||||
:label="border.label"
|
||||
:value="border.component"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色">
|
||||
<el-color-picker v-model="currentChartProperty.backgroundColor" show-alpha />
|
||||
</el-form-item>
|
||||
<el-form-item label="图表定时时间间隔">
|
||||
<el-input-number v-model="currentChartProperty.milliseconds" controls-position="right" :min="0" :step="1000" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDataScreen, buildDataScreen } from '@/api/visual/datascreen'
|
||||
import { listDataChart, getDataChart, dataParser } from '@/api/visual/datachart'
|
||||
import ChartPanel from '../datachart/components/ChartPanel'
|
||||
import { compressImg, dataURLtoBlob } from '@/utils/compressImage'
|
||||
import vdr from 'vue-draggable-resizable-gorkys'
|
||||
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
|
||||
import ScreenBorder from './components/ScreenBorder'
|
||||
|
||||
export default {
|
||||
name: 'DataScreenBuild',
|
||||
components: {
|
||||
vdr,
|
||||
ChartPanel,
|
||||
ScreenBorder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataScreen: {},
|
||||
dataChartList: [],
|
||||
widget: {
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
scale: 100,
|
||||
backgroundImage: 'images/bg8.jpg',
|
||||
layout: [],
|
||||
property: []
|
||||
},
|
||||
currentChartProperty: {},
|
||||
charts: [],
|
||||
contentStyle: {
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
// 文件上传
|
||||
fileList: [],
|
||||
hideUpload: false,
|
||||
// 背景图片
|
||||
publicPath: process.env.BASE_URL,
|
||||
activeTabName: 'first',
|
||||
banners: [
|
||||
{ src: 'images/bg1.png' },
|
||||
{ src: 'images/bg2.png' },
|
||||
{ src: 'images/bg3.png' },
|
||||
{ src: 'images/bg4.jpg' },
|
||||
{ src: 'images/bg5.jpg' },
|
||||
{ src: 'images/bg6.jpg' },
|
||||
{ src: 'images/bg7.jpg' },
|
||||
{ src: 'images/bg8.jpg' },
|
||||
{ src: 'images/bg9.jpg' },
|
||||
{ src: 'images/bg10.jpg' }
|
||||
],
|
||||
borders: [
|
||||
{ label: 'dv-border-box-0', component: 'BorderBox0' },
|
||||
{ label: 'dv-border-box-1', component: 'BorderBox1' },
|
||||
{ label: 'dv-border-box-2', component: 'BorderBox2' },
|
||||
{ label: 'dv-border-box-3', component: 'BorderBox3' },
|
||||
{ label: 'dv-border-box-4', component: 'BorderBox4' }, { label: 'dv-border-box-4-reverse', component: 'BorderBox4Reverse' },
|
||||
{ label: 'dv-border-box-5', component: 'BorderBox5' }, { label: 'dv-border-box-5-reverse', component: 'BorderBox5Reverse' },
|
||||
{ label: 'dv-border-box-6', component: 'BorderBox6' },
|
||||
{ label: 'dv-border-box-7', component: 'BorderBox7' },
|
||||
{ label: 'dv-border-box-8', component: 'BorderBox8' }, { label: 'dv-border-box-8-reverse', component: 'BorderBox8Reverse' },
|
||||
{ label: 'dv-border-box-9', component: 'BorderBox9' },
|
||||
{ label: 'dv-border-box-10', component: 'BorderBox10' },
|
||||
{ label: 'dv-border-box-11', component: 'BorderBox11' },
|
||||
{ label: 'dv-border-box-12', component: 'BorderBox12' },
|
||||
{ label: 'dv-border-box-13', component: 'BorderBox13' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maxRows() {
|
||||
return Math.floor(this.widget.height / 30)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDataScreen(this.$route.params.id)
|
||||
this.getDataChartList()
|
||||
},
|
||||
mounted() {
|
||||
const width = this.$refs.widgetCenterSection.clientWidth
|
||||
const height = this.$refs.widgetCenterSection.clientHeight
|
||||
this.contentStyle.width = width
|
||||
this.contentStyle.height = height
|
||||
},
|
||||
methods: {
|
||||
getDataScreen(id) {
|
||||
getDataScreen(id).then(response => {
|
||||
if (response.success) {
|
||||
this.dataScreen = response.data
|
||||
console.log(this.dataScreen)
|
||||
if (this.dataScreen.screenThumbnail) {
|
||||
const blob = dataURLtoBlob(this.dataScreen.screenThumbnail)
|
||||
const fileUrl = URL.createObjectURL(blob)
|
||||
this.fileList.push({ url: fileUrl })
|
||||
this.hideUpload = true
|
||||
}
|
||||
// zrx add
|
||||
if (this.dataScreen.screenConfig) {
|
||||
this.widget.width = this.dataScreen.screenConfig.width
|
||||
this.widget.height = this.dataScreen.screenConfig.height
|
||||
this.widget.scale = this.dataScreen.screenConfig.scale
|
||||
this.widget.backgroundImage = this.dataScreen.screenConfig.backgroundImage
|
||||
}
|
||||
this.widget.layout = this.dataScreen.screenConfig ? JSON.parse(JSON.stringify(this.dataScreen.screenConfig.layout)) : []
|
||||
this.widget.property = this.dataScreen.screenConfig ? JSON.parse(JSON.stringify(this.dataScreen.screenConfig.property)) : []
|
||||
const charts = this.dataScreen.charts ? JSON.parse(JSON.stringify(this.dataScreen.charts)) : []
|
||||
charts.forEach((item, index, arr) => {
|
||||
this.parserChart(item)
|
||||
})
|
||||
this.charts = charts
|
||||
}
|
||||
})
|
||||
},
|
||||
parserChart(chart) {
|
||||
this.$set(chart, 'loading', true)
|
||||
if (chart.chartConfig) {
|
||||
dataParser(JSON.parse(chart.chartConfig)).then(response => {
|
||||
if (response.success) {
|
||||
this.$set(chart, 'data', response.data.data)
|
||||
this.$set(chart, 'chartSchema', JSON.parse(chart.chartConfig))
|
||||
this.$set(chart, 'loading', false)
|
||||
this.$set(chart, 'visible', true)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$set(chart, 'loading', false)
|
||||
}
|
||||
},
|
||||
getChartItem(id) {
|
||||
return this.charts.find(chart => chart.id === id)
|
||||
},
|
||||
getDataChartList() {
|
||||
listDataChart().then(response => {
|
||||
if (response.success) {
|
||||
this.dataChartList = response.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAddChart(chart) {
|
||||
const index = this.widget.layout.findIndex(item => item.i === chart.id)
|
||||
if (index !== -1) {
|
||||
this.$set(chart, 'disabled', true)
|
||||
return
|
||||
}
|
||||
getDataChart(chart.id).then(response => {
|
||||
if (response.success) {
|
||||
const obj = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 200,
|
||||
h: 200,
|
||||
i: chart.id
|
||||
}
|
||||
this.widget.layout.push(obj)
|
||||
const data = response.data
|
||||
this.parserChart(data)
|
||||
this.charts.push(data)
|
||||
this.$set(chart, 'disabled', true)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDeleteChart(id) {
|
||||
this.widget.layout.splice(this.widget.layout.findIndex(item => item.i === id), 1)
|
||||
this.widget.property.splice(this.widget.property.findIndex(item => item.i === id), 1)
|
||||
this.charts.splice(this.charts.findIndex(item => item.id === id), 1)
|
||||
this.$set(this.dataChartList.find(item => item.id === id), 'disabled', false)
|
||||
this.currentChartProperty = {}
|
||||
this.activeTabName = 'first'
|
||||
},
|
||||
handlePreview() {
|
||||
const route = this.$router.resolve({ path: `/visual/screen/view/${this.dataScreen.id}` })
|
||||
window.open(route.href, '_blank')
|
||||
},
|
||||
handleReset() {
|
||||
this.widget.layout = this.dataScreen.screenConfig ? JSON.parse(JSON.stringify(this.dataScreen.screenConfig.layout)) : []
|
||||
this.widget.property = this.dataScreen.screenConfig ? JSON.parse(JSON.stringify(this.dataScreen.screenConfig.property)) : []
|
||||
const charts = this.dataScreen.charts ? JSON.parse(JSON.stringify(this.dataScreen.charts)) : []
|
||||
charts.forEach((item, index, arr) => {
|
||||
this.parserChart(item)
|
||||
})
|
||||
this.charts = charts
|
||||
this.dataChartList.forEach((item, index, arr) => {
|
||||
if (charts.findIndex(chart => chart.id === item.id) === -1) {
|
||||
this.$set(item, 'disabled', false)
|
||||
} else {
|
||||
this.$set(item, 'disabled', true)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
const data = {
|
||||
id: this.dataScreen.id,
|
||||
screenThumbnail: this.dataScreen.screenThumbnail,
|
||||
screenConfig: this.widget
|
||||
}
|
||||
buildDataScreen(data).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
window.location.href = 'about:blank'
|
||||
window.close()
|
||||
},
|
||||
handleResize(i, newH, newW, newHPx, newWPx) {
|
||||
if (this.charts.find(chart => chart.id === i).visible) {
|
||||
this.$refs[`charts${i}`][0].$children[0].$emit('resized')
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB')
|
||||
}
|
||||
return isLt2M
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
this.hideUpload = fileList.length >= 1
|
||||
const config = {
|
||||
width: 250, // 压缩后图片的宽
|
||||
height: 150, // 压缩后图片的高
|
||||
quality: 0.8 // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
|
||||
}
|
||||
compressImg(file.raw, config).then(result => {
|
||||
// result 为压缩后二进制文件
|
||||
this.$set(this.dataScreen, 'screenThumbnail', result)
|
||||
})
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.hideUpload = fileList.length >= 1
|
||||
this.$set(this.dataScreen, 'screenThumbnail', 'x')
|
||||
},
|
||||
handleLayoutClick() {
|
||||
this.activeTabName = 'first'
|
||||
},
|
||||
handleItemClick(id) {
|
||||
const chart = this.charts.find(chart => chart.id === id)
|
||||
let property = this.widget.property.find(item => item.id === id)
|
||||
if (!property) {
|
||||
property = {
|
||||
id: id,
|
||||
chartName: chart.chartName,
|
||||
border: 'BorderBox0',
|
||||
milliseconds: 0,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)'
|
||||
}
|
||||
this.widget.property.push(property)
|
||||
}
|
||||
this.currentChartProperty = property
|
||||
this.activeTabName = 'second'
|
||||
},
|
||||
getChartProperty(id) {
|
||||
return this.widget.property.find(property => property.id === id)
|
||||
},
|
||||
onDragStop([x, y], item) {
|
||||
this.$set(item, 'x', x)
|
||||
this.$set(item, 'y', y)
|
||||
},
|
||||
onResizeStop([x, y, w, h], item) {
|
||||
this.$set(item, 'x', x)
|
||||
this.$set(item, 'y', y)
|
||||
this.$set(item, 'w', w)
|
||||
this.$set(item, 'h', h)
|
||||
if (this.charts.find(chart => chart.id === item.i).visible) {
|
||||
this.$refs[`charts${item.i}`][0].$children[0].$emit('resized')
|
||||
}
|
||||
},
|
||||
formatTooltip(val) {
|
||||
return val / 100
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.screen-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.widget-left-container {
|
||||
width: 250px;
|
||||
box-sizing: border-box;
|
||||
.widget-left-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.widget-left-wrapper {
|
||||
height: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
.list-group {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
.list-group-item-text {
|
||||
width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.list-group-item-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-center-container {
|
||||
width: calc(100% - 550px);
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #e4e7ed;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
.widget-center-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
.widget-center-header-button {
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
.widget-center-section {
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
.widget-center-content{
|
||||
transform-origin: 0 0;
|
||||
.widget-center-wrapper {
|
||||
overflow: auto;
|
||||
user-select: none;
|
||||
transform-origin: 0 0;
|
||||
position: relative;
|
||||
::v-deep .vdr {
|
||||
border: none;
|
||||
// 活动状态下
|
||||
&.active {
|
||||
border: 1px dashed #09f;
|
||||
}
|
||||
.handle {
|
||||
border-radius: 100%;
|
||||
background-color: #09f;
|
||||
}
|
||||
}
|
||||
.widget-center-card {
|
||||
::v-deep .el-card__header {
|
||||
padding: 0;
|
||||
.widget-center-card-header {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-right-container {
|
||||
width: 300px;
|
||||
box-sizing: border-box;
|
||||
.widget-right-pane-screen {
|
||||
height: calc(100vh - 40px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.hideUpload ::v-deep {
|
||||
.el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.el-upload-list__item {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-slider__runway {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-right-pane-chart {
|
||||
height: calc(100vh - 40px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
232
src/views/visual/datascreen/DataScreenList.vue
Normal file
232
src/views/visual/datascreen/DataScreenList.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="screen-container">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-pagination
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page.sync="queryParams.pageNum"
|
||||
:page-size.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row :gutter="20">
|
||||
<el-col v-hasPerm="['visual:screen:add']" :span="6" class="box-card-col">
|
||||
<el-card :body-style="{ padding: '0px' }" class="box-card-item">
|
||||
<div class="box-card-item-add" @click="handleAdd">
|
||||
<div class="icon-block">
|
||||
<i class="el-icon-plus" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6" class="box-card-col">
|
||||
<el-card :body-style="{ padding: '0px' }" class="box-card-item">
|
||||
<div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)">
|
||||
<el-image :src="item.screenThumbnail ? item.screenThumbnail : ''">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline" />
|
||||
</div>
|
||||
</el-image>
|
||||
<div class="box-card-item-edit" :style="{display: (item.show ? 'block' : 'none')}">
|
||||
<el-button v-hasPerm="['visual:screen:build']" type="primary" @click="handleConfig(item)">编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-card-item-footer">
|
||||
<div class="box-card-item-footer-text">{{ item.screenName }}</div>
|
||||
<div class="clearfix">
|
||||
<i v-hasPerm="['visual:screen:edit']" class="el-icon-edit-outline" @click="handleEdit(item)" />
|
||||
<i v-hasPerm="['visual:screen:preview']" class="el-icon-view" @click="handleView(item)" />
|
||||
<i v-hasPerm="['visual:screen:remove']" class="el-icon-delete" @click="handleDelete(item)" />
|
||||
<i v-hasPerm="['visual:screen:copy']" class="el-icon-copy-document" @click="handleCopy(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<screen-form v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :data="currentScreen" @handleScreenFormFinished="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pageDataScreen, delDataScreen, copyDataScreen } from '@/api/visual/datascreen'
|
||||
import ScreenForm from './components/ScreenForm'
|
||||
|
||||
export default {
|
||||
name: 'DataScreenList',
|
||||
components: { ScreenForm },
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
tableDataList: [],
|
||||
// 总数据条数
|
||||
total: 0,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
currentScreen: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询数据列表 */
|
||||
getList() {
|
||||
pageDataScreen(this.queryParams).then(response => {
|
||||
if (response.success) {
|
||||
const { data } = response
|
||||
this.tableDataList = data.data
|
||||
this.total = data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
this.queryParams.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
mouseEnter(data) {
|
||||
this.$set(data, 'show', true)
|
||||
},
|
||||
mouseLeave(data) {
|
||||
this.$set(data, 'show', false)
|
||||
},
|
||||
handleAdd() {
|
||||
this.dialogFormVisible = true
|
||||
this.currentScreen = {}
|
||||
},
|
||||
handleConfig(data) {
|
||||
const route = this.$router.resolve({ path: `/visual/screen/build/${data.id}` })
|
||||
window.open(route.href, '_blank')
|
||||
},
|
||||
handleEdit(data) {
|
||||
this.dialogFormVisible = true
|
||||
this.currentScreen = Object.assign({}, data)
|
||||
},
|
||||
handleView(data) {
|
||||
const route = this.$router.resolve({ path: `/visual/screen/view/${data.id}` })
|
||||
window.open(route.href, '_blank')
|
||||
},
|
||||
handleDelete(data) {
|
||||
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDataScreen(data.id).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
handleCopy(data) {
|
||||
this.$confirm('确认拷贝当前酷屏, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
copyDataScreen(data.id).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('拷贝成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
}
|
||||
.box-card-col {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
.box-card-item {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
.box-card-item-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.box-card-item-edit {
|
||||
width: 260px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: rgba(4, 11, 28, 0.7);
|
||||
opacity: 0.8;
|
||||
button {
|
||||
margin-top: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-image{
|
||||
width: 260px;
|
||||
height: 150px;
|
||||
display: block;
|
||||
::v-deep .image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.box-card-item-add {
|
||||
width: 260px;
|
||||
height: 185px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.box-card-item-footer {
|
||||
padding: 8px 5px;
|
||||
background-color: #dcdcdc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.box-card-item-footer-text {
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
160
src/views/visual/datascreen/DataScreenView.vue
Normal file
160
src/views/visual/datascreen/DataScreenView.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="screen-container">
|
||||
<div class="widget-center-wrapper" :style="{ background: 'url('+ publicPath + widget.backgroundImage +') 0% 0% / 100% 100%' }">
|
||||
<vdr
|
||||
v-for="item in widget.layout"
|
||||
:key="item.i"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:parent="true"
|
||||
:draggable="false"
|
||||
:resizable="false"
|
||||
:is-conflict-check="true"
|
||||
:grid="[20,20]"
|
||||
>
|
||||
<screen-border :border-box="`${getChartProperty(item.i) ? getChartProperty(item.i).border : 'BorderBox0'}`" :border-title="getChartItem(item.i).chartName" :border-style="{ height: `${item.h}`, width: `${item.w}` }">
|
||||
<div v-loading="getChartItem(item.i).loading" :style="{backgroundColor: `${getChartProperty(item.i) ? getChartProperty(item.i).backgroundColor : 'rgba(255, 255, 255, 0.1)'}`}">
|
||||
<chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{ height: `${item.h}px`, width: `${item.w}px` }" />
|
||||
<div v-else :style="{height: `${item.h}px`, width: `${item.w}px` }" />
|
||||
</div>
|
||||
</screen-border>
|
||||
</vdr>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDataScreen } from '@/api/visual/datascreen'
|
||||
import { dataParser } from '@/api/visual/datachart'
|
||||
import vdr from 'vue-draggable-resizable-gorkys'
|
||||
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
|
||||
import ChartPanel from '../datachart/components/ChartPanel'
|
||||
import ScreenBorder from './components/ScreenBorder'
|
||||
|
||||
export default {
|
||||
name: 'DataScreenView',
|
||||
components: {
|
||||
vdr,
|
||||
ChartPanel,
|
||||
ScreenBorder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataScreen: {},
|
||||
widget: {
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
scale: 100,
|
||||
backgroundImage: 'images/bg8.jpg',
|
||||
layout: [],
|
||||
property: []
|
||||
},
|
||||
charts: [],
|
||||
timers: [],
|
||||
publicPath: process.env.BASE_URL
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDataScreen(this.$route.params.id)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.timers.map((item) => {
|
||||
clearInterval(item)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getDataScreen(id) {
|
||||
getDataScreen(id).then(response => {
|
||||
if (response.success) {
|
||||
this.dataScreen = response.data
|
||||
// zrx add
|
||||
if (this.dataScreen.screenConfig) {
|
||||
this.widget.width = this.dataScreen.screenConfig.width
|
||||
this.widget.height = this.dataScreen.screenConfig.height
|
||||
this.widget.scale = this.dataScreen.screenConfig.scale
|
||||
this.widget.backgroundImage = this.dataScreen.screenConfig.backgroundImage
|
||||
}
|
||||
this.widget.layout = this.dataScreen.screenConfig ? JSON.parse(JSON.stringify(this.dataScreen.screenConfig.layout)) : []
|
||||
this.widget.property = this.dataScreen.screenConfig ? JSON.parse(JSON.stringify(this.dataScreen.screenConfig.property)) : []
|
||||
const charts = this.dataScreen.charts ? JSON.parse(JSON.stringify(this.dataScreen.charts)) : []
|
||||
charts.forEach((item, index, arr) => {
|
||||
this.parserChart(item)
|
||||
})
|
||||
this.charts = charts
|
||||
this.$nextTick(() => {
|
||||
this.initTimer()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
parserChart(chart) {
|
||||
this.$set(chart, 'loading', true)
|
||||
if (chart.chartConfig) {
|
||||
dataParser(JSON.parse(chart.chartConfig)).then(response => {
|
||||
if (response.success) {
|
||||
this.$set(chart, 'data', response.data.data)
|
||||
this.$set(chart, 'chartSchema', JSON.parse(chart.chartConfig))
|
||||
this.$set(chart, 'loading', false)
|
||||
this.$set(chart, 'visible', true)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$set(chart, 'loading', false)
|
||||
}
|
||||
},
|
||||
getChartItem(id) {
|
||||
return this.charts.find(chart => chart.id === id)
|
||||
},
|
||||
getChartProperty(id) {
|
||||
return this.widget.property.find(property => property.id === id)
|
||||
},
|
||||
initTimer() {
|
||||
this.widget.property.forEach((item, index) => {
|
||||
if (item.milliseconds && item.milliseconds > 0) {
|
||||
const timer = setInterval(() => {
|
||||
const chart = this.charts.find(chart => chart.id === item.id)
|
||||
if (chart.chartConfig) {
|
||||
dataParser(JSON.parse(chart.chartConfig)).then(response => {
|
||||
if (response.success) {
|
||||
this.$set(chart, 'data', response.data.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
}, item.milliseconds)
|
||||
this.timers.push(timer)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.screen-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.widget-center-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
::v-deep .vdr {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
src/views/visual/datascreen/components/ScreenBorder.vue
Normal file
69
src/views/visual/datascreen/components/ScreenBorder.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<component :is="borderBox" :title="borderTitle" :width="Number(borderStyle.width)" :height="Number(borderStyle.height)">
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BorderBox0 from './borders/BorderBox0'
|
||||
import BorderBox1 from './borders/BorderBox1'
|
||||
import BorderBox2 from './borders/BorderBox2'
|
||||
import BorderBox3 from './borders/BorderBox3'
|
||||
import BorderBox4 from './borders/BorderBox4'
|
||||
import BorderBox4Reverse from './borders/BorderBox4Reverse'
|
||||
import BorderBox5 from './borders/BorderBox5'
|
||||
import BorderBox5Reverse from './borders/BorderBox5Reverse'
|
||||
import BorderBox6 from './borders/BorderBox6'
|
||||
import BorderBox7 from './borders/BorderBox7'
|
||||
import BorderBox8 from './borders/BorderBox8'
|
||||
import BorderBox8Reverse from './borders/BorderBox8Reverse'
|
||||
import BorderBox9 from './borders/BorderBox9'
|
||||
import BorderBox10 from './borders/BorderBox10'
|
||||
import BorderBox11 from './borders/BorderBox11'
|
||||
import BorderBox12 from './borders/BorderBox12'
|
||||
import BorderBox13 from './borders/BorderBox13'
|
||||
|
||||
export default {
|
||||
name: 'ScreenBorder',
|
||||
components: {
|
||||
BorderBox0,
|
||||
BorderBox1,
|
||||
BorderBox2,
|
||||
BorderBox3,
|
||||
BorderBox4, BorderBox4Reverse,
|
||||
BorderBox5, BorderBox5Reverse,
|
||||
BorderBox6,
|
||||
BorderBox7,
|
||||
BorderBox8, BorderBox8Reverse,
|
||||
BorderBox9,
|
||||
BorderBox10,
|
||||
BorderBox11,
|
||||
BorderBox12,
|
||||
BorderBox13
|
||||
},
|
||||
props: {
|
||||
borderBox: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: 'BorderBox0'
|
||||
},
|
||||
borderTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
borderStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
width: '0',
|
||||
height: '0'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
93
src/views/visual/datascreen/components/ScreenForm.vue
Normal file
93
src/views/visual/datascreen/components/ScreenForm.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<el-dialog title="酷屏" width="50%" :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="酷屏名称" prop="screenName">
|
||||
<el-input v-model="form.screenName" placeholder="请输入酷屏名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addDataScreen, updateDataScreen } from '@/api/visual/datascreen'
|
||||
|
||||
export default {
|
||||
name: 'ScreenForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return false
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
screenName: undefined
|
||||
},
|
||||
rules: {
|
||||
screenName: [
|
||||
{ required: true, message: '酷屏名称不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form = this.data
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id) {
|
||||
updateDataScreen(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.$emit('handleScreenFormFinished')
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(error.msg || '保存失败')
|
||||
})
|
||||
} else {
|
||||
addDataScreen(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.$emit('handleScreenFormFinished')
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(error.msg || '保存失败')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox0'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
125
src/views/visual/datascreen/components/borders/BorderBox1.vue
Normal file
125
src/views/visual/datascreen/components/borders/BorderBox1.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-1">
|
||||
<svg class="border" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
|
||||
38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
|
||||
85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
|
||||
${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
|
||||
${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
|
||||
${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
|
||||
${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
|
||||
${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-for="item in border"
|
||||
:key="item"
|
||||
width="150px"
|
||||
height="150px"
|
||||
:class="`${item} border`"
|
||||
>
|
||||
<polygon
|
||||
:fill="mergedColor[0]"
|
||||
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
|
||||
dur="0.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
<polygon
|
||||
:fill="mergedColor[1]"
|
||||
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
|
||||
dur="0.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
<polygon
|
||||
:fill="mergedColor[0]"
|
||||
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[0]};${mergedColor[1]};transparent`"
|
||||
dur="1s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox1',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-1',
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#4fd2dd', '#235fa7']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-1 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.border {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
right: 0px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
bottom: 0px;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
|
||||
4, ${height} 0, ${height - 4} 0, 4
|
||||
`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-for="item in border"
|
||||
:key="item"
|
||||
width="150px"
|
||||
height="150px"
|
||||
:class="`${item} dv-border-svg-container`"
|
||||
>
|
||||
<polygon
|
||||
:fill="mergedColor[1]"
|
||||
points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox10',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-10',
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#1d48c4', '#d3e1f8']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-10 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
right: 0px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
bottom: 0px;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
277
src/views/visual/datascreen/components/borders/BorderBox11.vue
Normal file
277
src/views/visual/datascreen/components/borders/BorderBox11.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-11">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
|
||||
<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
|
||||
<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
|
||||
<feFlood :flood-color="mergedColor[1]" result="glowColor" />
|
||||
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
|
||||
<feMerge>
|
||||
<feMergeNode in="softGlowColored" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
|
||||
${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
|
||||
${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
|
||||
20, ${height - 8} 8, ${height - 25} 8, 50
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2}, 30
|
||||
20, 30 7, 50 7, ${50 + (height - 167) / 2}
|
||||
13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
|
||||
7, ${140 + (height - 167) / 2} 7, ${height - 27}
|
||||
20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
|
||||
${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
|
||||
${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
|
||||
${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
|
||||
${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
|
||||
${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
|
||||
${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:stroke="mergedColor[0]"
|
||||
fill="transparent"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
|
||||
${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:stroke="mergedColor[0]"
|
||||
fill="transparent"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
|
||||
${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:stroke="mergedColor[0]"
|
||||
:fill="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
|
||||
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
|
||||
${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="1"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
|
||||
${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0.7;1"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="0.7"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
|
||||
${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.7;0.4;0.7"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="0.5"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
|
||||
${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.5;0.2;0.5"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="1"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
|
||||
${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0.7;1"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="0.7"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
|
||||
${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.7;0.4;0.7"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="0.5"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
|
||||
${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.5;0.2;0.5"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<text
|
||||
class="dv-border-box-11-title"
|
||||
:x="`${width / 2}`"
|
||||
y="32"
|
||||
fill="#fff"
|
||||
font-size="18"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
>
|
||||
{{ title }}
|
||||
</text>
|
||||
|
||||
<polygon
|
||||
:fill="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
|
||||
11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:fill="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
|
||||
${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
|
||||
`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox11',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
titleWidth: {
|
||||
type: Number,
|
||||
default: 250
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const id = new Date().getTime()
|
||||
return {
|
||||
ref: 'border-box-11',
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#8aaafb', '#1f33a2'],
|
||||
filterId: `border-box-11-filterId-${id}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-11 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/views/visual/datascreen/components/borders/BorderBox12.vue
Normal file
138
src/views/visual/datascreen/components/borders/BorderBox12.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-12">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
|
||||
<feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
|
||||
<feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
|
||||
<feFlood flood-color="rgba(124, 231, 253, 0.7)" result="glowColor">
|
||||
<animate
|
||||
attributeName="flood-color"
|
||||
values="
|
||||
rgba(124,231,253,0.7);
|
||||
rgba(124,231,253,0.3);
|
||||
rgba(124,231,253,0.7);
|
||||
"
|
||||
dur="3s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</feFlood>
|
||||
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
|
||||
<feMerge>
|
||||
<feMergeNode in="softGlowColored" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
v-if="width && height"
|
||||
:fill="backgroundColor"
|
||||
stroke-width="2"
|
||||
:stroke="mergedColor[0]"
|
||||
:d="`
|
||||
M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
|
||||
L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
|
||||
L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
|
||||
Q 5 5 15 5
|
||||
`"
|
||||
/>
|
||||
|
||||
<path
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke-linecap="round"
|
||||
:filter="`url(#${filterId})`"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
|
||||
/>
|
||||
|
||||
<path
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke-linecap="round"
|
||||
:filter="`url(#${filterId})`"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
|
||||
/>
|
||||
|
||||
<path
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke-linecap="round"
|
||||
:filter="`url(#${filterId})`"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`
|
||||
M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
|
||||
Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
|
||||
L ${width - 5} ${height - 20}
|
||||
`"
|
||||
/>
|
||||
|
||||
<path
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke-linecap="round"
|
||||
:filter="`url(#${filterId})`"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`
|
||||
M 20 ${height - 5} L 15 ${height - 5}
|
||||
Q 5 ${height - 5} 5 ${height - 15}
|
||||
L 5 ${height - 20}
|
||||
`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox12',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const id = new Date().getTime()
|
||||
return {
|
||||
ref: 'border-box-12',
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#2e6099', '#7ce7fd'],
|
||||
filterId: `borderr-box-12-filterId-${id}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-12 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-13">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<path
|
||||
:fill="backgroundColor"
|
||||
:stroke="mergedColor[0]"
|
||||
:d="`
|
||||
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
|
||||
L ${width - 20} 10 L ${width - 5} 25
|
||||
L ${width - 5} ${height - 5} L 20 ${height - 5}
|
||||
L 5 ${height - 20} L 5 20
|
||||
`"
|
||||
/>
|
||||
|
||||
<path
|
||||
fill="transparent"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-dasharray="10, 5"
|
||||
:stroke="mergedColor[0]"
|
||||
:d="`M 16 9 L 61 9`"
|
||||
/>
|
||||
|
||||
<path
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
|
||||
/>
|
||||
|
||||
<path
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox13',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-13',
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#6586ec', '#2cf7fe']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-13 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-2">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
|
||||
/>
|
||||
<circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
|
||||
<circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
|
||||
<circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
|
||||
<circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox2',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-2',
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#fff', 'rgba(255, 255, 255, 0.6)']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-3">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
class="dv-bb3-line1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
|
||||
/>
|
||||
<polyline
|
||||
class="dv-bb3-line2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
|
||||
/>
|
||||
<polyline
|
||||
class="dv-bb3-line2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
|
||||
/>
|
||||
<polyline
|
||||
class="dv-bb3-line2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox3',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-3',
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#2862b7', '#2862b7']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-3 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dv-bb3-line1 {
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.dv-bb3-line2 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
src/views/visual/datascreen/components/borders/BorderBox4.vue
Normal file
148
src/views/visual/datascreen/components/borders/BorderBox4.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-4">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
|
||||
16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
class="dv-bb4-line-1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
|
||||
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="mergedColor[1]"
|
||||
class="dv-bb4-line-2"
|
||||
:points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
|
||||
14, ${height - 100}`"
|
||||
/>
|
||||
|
||||
<polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
|
||||
<polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
|
||||
<polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
|
||||
<polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
|
||||
<polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
|
||||
<polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
|
||||
<polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
|
||||
<polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox4',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-4',
|
||||
reverse: false,
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['red', 'rgba(0,0,255,0.8)']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-4 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-reverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sw1 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.sw3 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dv-bb4-line-1 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-2 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-3 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dv-bb4-line-4 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dv-bb4-line-5 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-6 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-7 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-8 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dv-bb4-line-9 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 100, 250;
|
||||
}
|
||||
|
||||
.dv-bb4-line-10 {
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 80, 270;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-4-reverse">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
|
||||
16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
class="dv-bb4-line-1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
|
||||
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="mergedColor[1]"
|
||||
class="dv-bb4-line-2"
|
||||
:points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
|
||||
14, ${height - 100}`"
|
||||
/>
|
||||
|
||||
<polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
|
||||
<polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
|
||||
<polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
|
||||
<polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
|
||||
<polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
|
||||
<polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
|
||||
<polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
|
||||
<polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox4Reverse',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-4-reverse',
|
||||
reverse: true,
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['red', 'rgba(0,0,255,0.8)']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-4-reverse {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-reverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sw1 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.sw3 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dv-bb4-line-1 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-2 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-3 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dv-bb4-line-4 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dv-bb4-line-5 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-6 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-7 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb4-line-8 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dv-bb4-line-9 {
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 100, 250;
|
||||
}
|
||||
|
||||
.dv-bb4-line-10 {
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 80, 270;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-5">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
class="dv-bb5-line-1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
|
||||
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
|
||||
/>
|
||||
<polyline
|
||||
class="dv-bb5-line-2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
|
||||
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
|
||||
/>
|
||||
<polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
|
||||
<polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
|
||||
<polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
|
||||
<polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox5',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-5',
|
||||
reverse: false,
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-5 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-reverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dv-bb5-line-1, .dv-bb5-line-2 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb5-line-3, .dv-bb5-line-6 {
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
.dv-bb5-line-4, .dv-bb5-line-5 {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-5-reverse">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
class="dv-bb5-line-1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
|
||||
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
|
||||
/>
|
||||
<polyline
|
||||
class="dv-bb5-line-2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
|
||||
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
|
||||
/>
|
||||
<polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
|
||||
<polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
|
||||
<polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
|
||||
<polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox5Reverse',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-5-reverse',
|
||||
reverse: true,
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-5-reverse {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-reverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dv-bb5-line-1, .dv-bb5-line-2 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.dv-bb5-line-3, .dv-bb5-line-6 {
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
.dv-bb5-line-4, .dv-bb5-line-5 {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-6">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<circle :fill="mergedColor[1]" cx="5" cy="5" r="2" />
|
||||
<circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
|
||||
<circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
|
||||
<circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox6',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-6',
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['rgba(255, 255, 255, 0.35)', 'gray']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-6 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div
|
||||
:ref="ref"
|
||||
class="dv-border-box-7"
|
||||
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
|
||||
>
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
|
||||
|
||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
|
||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
|
||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
|
||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox7',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: 'border-box-7',
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-7 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > polyline {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
|
||||
.dv-bb7-line-width-2 {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.dv-bb7-line-width-5 {
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
src/views/visual/datascreen/components/borders/BorderBox8.vue
Normal file
130
src/views/visual/datascreen/components/borders/BorderBox8.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-8">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<path
|
||||
:id="path"
|
||||
:d="pathD"
|
||||
fill="transparent"
|
||||
/>
|
||||
<radialGradient
|
||||
:id="gradient"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<mask :id="mask">
|
||||
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||
<animateMotion
|
||||
:dur="`${dur}s`"
|
||||
:path="pathD"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
|
||||
|
||||
<use
|
||||
:stroke="mergedColor[0]"
|
||||
stroke-width="1"
|
||||
:xlink:href="`#${path}`"
|
||||
/>
|
||||
|
||||
<use
|
||||
:stroke="mergedColor[1]"
|
||||
stroke-width="3"
|
||||
:xlink:href="`#${path}`"
|
||||
:mask="`url(#${mask})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:from="`0, ${length}`"
|
||||
:to="`${length}, 0`"
|
||||
:dur="`${dur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox8',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const id = new Date().getTime()
|
||||
return {
|
||||
ref: 'border-box-8',
|
||||
dur: 3,
|
||||
reverse: false,
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#235fa7', '#4fd2dd'],
|
||||
path: `border-box-8-path-${id}`,
|
||||
gradient: `border-box-8-gradient-${id}`,
|
||||
mask: `border-box-8-mask-${id}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
length() {
|
||||
const { width, height } = this
|
||||
return (width + height - 5) * 2
|
||||
},
|
||||
pathD() {
|
||||
const { reverse, width, height } = this
|
||||
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
|
||||
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-8 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-8-reverse">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<path
|
||||
:id="path"
|
||||
:d="pathD"
|
||||
fill="transparent"
|
||||
/>
|
||||
<radialGradient
|
||||
:id="gradient"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<mask :id="mask">
|
||||
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||
<animateMotion
|
||||
:dur="`${dur}s`"
|
||||
:path="pathD"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
|
||||
|
||||
<use
|
||||
:stroke="mergedColor[0]"
|
||||
stroke-width="1"
|
||||
:xlink:href="`#${path}`"
|
||||
/>
|
||||
|
||||
<use
|
||||
:stroke="mergedColor[1]"
|
||||
stroke-width="3"
|
||||
:xlink:href="`#${path}`"
|
||||
:mask="`url(#${mask})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:from="`0, ${length}`"
|
||||
:to="`${length}, 0`"
|
||||
:dur="`${dur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox8Reverse',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const id = new Date().getTime()
|
||||
return {
|
||||
ref: 'border-box-8-reverse',
|
||||
dur: 3,
|
||||
reverse: true,
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#235fa7', '#4fd2dd'],
|
||||
path: `border-box-8-reverse-path-${id}`,
|
||||
gradient: `border-box-8-reverse-gradient-${id}`,
|
||||
mask: `border-box-8-reverse-mask-${id}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
length() {
|
||||
const { width, height } = this
|
||||
return (width + height - 5) * 2
|
||||
},
|
||||
pathD() {
|
||||
const { reverse, width, height } = this
|
||||
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
|
||||
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-8-reverse {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
175
src/views/visual/datascreen/components/borders/BorderBox9.vue
Normal file
175
src/views/visual/datascreen/components/borders/BorderBox9.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div :ref="ref" class="dv-border-box-9">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<animate
|
||||
attributeName="x1"
|
||||
values="0%;100%;0%"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
||||
<animate
|
||||
attributeName="x2"
|
||||
values="100%;0%;100%"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
||||
<stop offset="0%" :stop-color="mergedColor[0]">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
<stop offset="100%" :stop-color="mergedColor[1]">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<mask :id="maskId">
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="
|
||||
`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
|
||||
${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${width * 0.52}, 3 ${width * 0.58}, 3
|
||||
${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
|
||||
`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
|
||||
${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
8, ${height * 0.55} 8, ${height * 0.7}
|
||||
2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
|
||||
${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
|
||||
`"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
|
||||
${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
|
||||
${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
|
||||
${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
|
||||
${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10} ${width * 0.92 + 2}, ${height - 6}
|
||||
11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BorderBox9',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const id = new Date().getTime()
|
||||
return {
|
||||
ref: 'border-box-9',
|
||||
backgroundColor: 'transparent',
|
||||
mergedColor: ['#11eefd', '#0078d2'],
|
||||
gradientId: `border-box-9-gradient-${id}`,
|
||||
maskId: `border-box-9-mask-${id}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dv-border-box-9 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
src/views/visual/datascreen/index.vue
Normal file
33
src/views/visual/datascreen/index.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="el-zoom-in-center">
|
||||
<data-screen-list v-if="options.showList" @showCard="showCard" />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataScreenList from './DataScreenList'
|
||||
|
||||
export default {
|
||||
name: 'DataScreen',
|
||||
components: { DataScreenList },
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
data: {},
|
||||
showList: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCard(data) {
|
||||
Object.assign(this.options, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
393
src/views/visual/dataset/DataSetAdd.vue
Normal file
393
src/views/visual/dataset/DataSetAdd.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ title }}</span>
|
||||
<el-button-group style="float: right;">
|
||||
<el-button v-hasPerm="['visual:chart:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
|
||||
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="数据源" prop="sourceId">
|
||||
<el-select v-model="form.sourceId" placeholder="请选择数据源">
|
||||
<el-option
|
||||
v-for="source in sourceOptions"
|
||||
:key="source.id"
|
||||
:label="source.sourceName"
|
||||
:value="source.id"
|
||||
:disabled="source.status === '0'"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据集名称" prop="setName">
|
||||
<el-input v-model="form.setName" placeholder="请输入数据集名称" />
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">数据集</el-divider>
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 0 20px;">
|
||||
<sql-editor
|
||||
ref="sqleditor"
|
||||
:value="form.setSql"
|
||||
style="height: 300px;"
|
||||
@changeTextarea="changeTextarea($event)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button size="mini" type="primary" @click="formaterSql">Sql格式化</el-button>
|
||||
<el-button size="mini" type="primary" @click="analyseSql">Sql解析</el-button>
|
||||
<el-button v-hasPerm="['visual:set:preview']" size="mini" type="primary" @click="dataPreview">数据预览</el-button>
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">数据模型定义</el-divider>
|
||||
<el-row style="height: 300px;padding: 0 20px;">
|
||||
<el-col :span="12" style="border: 1px dashed #999;height: 100%;">
|
||||
<div class="tag-group">
|
||||
<draggable v-model="columnList" :options="{sort: false, group: {name: 'col', pull:'clone', put: false}}">
|
||||
<el-tag v-for="(item, index) in columnList" :key="index" class="draggable-tag">
|
||||
{{ item.col }}
|
||||
</el-tag>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="box-shadow: 0 0 1px 1px #ccc;height: 100%;">
|
||||
<el-row>
|
||||
<el-divider content-position="left">维度列</el-divider>
|
||||
<el-col>
|
||||
<draggable group="col" :list="dimensionList" class="draggable-wrapper">
|
||||
<div v-for="(item, index) in dimensionList" :key="index" class="draggable-item">
|
||||
<el-tag>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</el-tag>
|
||||
<span v-if="item.input" class="draggable-item-handle">
|
||||
<el-input v-model="item.alias" size="mini" placeholder="请输入内容" @blur="handleDelTagLabel(index, item)" />
|
||||
</span>
|
||||
<span v-else class="draggable-item-handle" @click="handleTagLabel(index, item)"><i class="el-icon-edit-outline" /></span>
|
||||
<span class="draggable-item-handle" @click="handleDimensionTagClose(index, item)"><i class="el-icon-delete" /></span>
|
||||
</div>
|
||||
</draggable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-divider content-position="left">指标列</el-divider>
|
||||
<el-col>
|
||||
<draggable group="col" :list="measureList" class="draggable-wrapper">
|
||||
<div v-for="(item, index) in measureList" :key="index" class="draggable-item">
|
||||
<el-tag>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</el-tag>
|
||||
<span v-if="item.input" class="draggable-item-handle">
|
||||
<el-input v-model="item.alias" size="mini" placeholder="请输入内容" @blur="handleDelTagLabel(index, item)" />
|
||||
</span>
|
||||
<span v-else class="draggable-item-handle" @click="handleTagLabel(index, item)"><i class="el-icon-edit-outline" /></span>
|
||||
<span class="draggable-item-handle" @click="handleMeasureTagClose(index, item)"><i class="el-icon-delete" /></span>
|
||||
</div>
|
||||
</draggable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.id"
|
||||
:label="dict.itemText"
|
||||
>{{ dict.itemValue }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-drawer
|
||||
:visible.sync="drawer"
|
||||
direction="btt"
|
||||
:with-header="false"
|
||||
>
|
||||
<el-table
|
||||
:data="previewData.dataList"
|
||||
stripe
|
||||
border
|
||||
:max-height="200"
|
||||
style="width: 100%; margin: 15px 0;"
|
||||
>
|
||||
<el-table-column label="序号" width="55" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="(column, index) in previewData.columnList">
|
||||
<el-table-column
|
||||
:key="index"
|
||||
:prop="column"
|
||||
:label="column"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</template>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page.sync="previewData.pageNum"
|
||||
:page-size.sync="previewData.pageSize"
|
||||
:total="previewData.dataTotal"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-drawer>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addDataSet, sqlAnalyse } from '@/api/visual/dataset'
|
||||
import { listDataSource, queryByPage } from '@/api/metadata/datasource'
|
||||
import sqlFormatter from 'sql-formatter'
|
||||
import SqlEditor from '@/components/SqlEditor'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'DataSetAdd',
|
||||
components: {
|
||||
SqlEditor,
|
||||
draggable
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '数据集新增',
|
||||
// 展示切换
|
||||
showOptions: {
|
||||
data: {},
|
||||
showList: true,
|
||||
showAdd: false,
|
||||
showEdit: false,
|
||||
showDetail: false
|
||||
},
|
||||
// 保存按钮
|
||||
loadingOptions: {
|
||||
loading: false,
|
||||
loadingText: '保存',
|
||||
isDisabled: false
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
id: undefined,
|
||||
sourceId: undefined,
|
||||
setSql: undefined,
|
||||
status: '1',
|
||||
remark: undefined
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
sourceId: [
|
||||
{ required: true, message: '数据源不能为空', trigger: 'change' }
|
||||
],
|
||||
setName: [
|
||||
{ required: true, message: '数据集名称不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
// 状态数据字典
|
||||
statusOptions: [],
|
||||
// 数据源数据字典
|
||||
sourceOptions: [],
|
||||
// 解析字段
|
||||
columns: [],
|
||||
columnList: [],
|
||||
dimensionList: [],
|
||||
measureList: [],
|
||||
drawer: false,
|
||||
previewData: {
|
||||
dataList: [],
|
||||
columnList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
dataTotal: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDicts('sys_common_status').then(response => {
|
||||
if (response.success) {
|
||||
this.statusOptions = response.data
|
||||
}
|
||||
})
|
||||
this.getDataSourceList()
|
||||
},
|
||||
methods: {
|
||||
showCard() {
|
||||
this.$emit('showCard', this.showOptions)
|
||||
},
|
||||
getDataSourceList() {
|
||||
listDataSource().then(response => {
|
||||
if (response.success) {
|
||||
this.sourceOptions = response.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 绑定编辑器value值的变化
|
||||
changeTextarea(val) {
|
||||
this.$set(this.form, 'setSql', val)
|
||||
},
|
||||
formaterSql() {
|
||||
if (!this.form.setSql) {
|
||||
return
|
||||
}
|
||||
this.$refs.sqleditor.editor.setValue(sqlFormatter.format(this.$refs.sqleditor.editor.getValue()))
|
||||
},
|
||||
analyseSql() {
|
||||
if (!this.form.setSql) {
|
||||
return
|
||||
}
|
||||
const data = {}
|
||||
data.sqlText = this.form.setSql
|
||||
sqlAnalyse(data).then(response => {
|
||||
if (response.success) {
|
||||
this.columns = response.data
|
||||
this.columnList = this.columns.map(function(item) {
|
||||
const json = {}
|
||||
json.col = item
|
||||
json.alias = ''
|
||||
return json
|
||||
})
|
||||
this.dimensionList = []
|
||||
this.measureList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDimensionTagClose(index, tag) {
|
||||
this.dimensionList.splice(index, 1)
|
||||
tag.alias = ''
|
||||
this.columnList.push(tag)
|
||||
},
|
||||
handleMeasureTagClose(index, tag) {
|
||||
this.measureList.splice(index, 1)
|
||||
tag.alias = ''
|
||||
this.columnList.push(tag)
|
||||
},
|
||||
handleTagLabel(index, tag) {
|
||||
this.$set(tag, 'input', true)
|
||||
},
|
||||
handleDelTagLabel(index, tag) {
|
||||
this.$delete(tag, 'input')
|
||||
},
|
||||
dataPreview() {
|
||||
if (!this.form.sourceId) {
|
||||
return
|
||||
}
|
||||
if (!this.form.setSql) {
|
||||
return
|
||||
}
|
||||
const data = {}
|
||||
data.dataSourceId = this.form.sourceId
|
||||
data.sql = this.form.setSql
|
||||
data.pageNum = this.previewData.pageNum
|
||||
data.pageSize = this.previewData.pageSize
|
||||
queryByPage(data).then(response => {
|
||||
if (response.success) {
|
||||
const { data } = response
|
||||
const dataList = data.data || []
|
||||
let columnList = []
|
||||
if (dataList.length > 0) {
|
||||
columnList = Object.keys(dataList[0])
|
||||
}
|
||||
this.previewData.dataList = dataList
|
||||
this.previewData.columnList = columnList
|
||||
this.previewData.dataTotal = data.total
|
||||
this.drawer = true
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.previewData.pageNum = 1
|
||||
this.previewData.pageSize = val
|
||||
this.dataPreview()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.previewData.pageNum = val
|
||||
this.dataPreview()
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
const schema = {}
|
||||
schema.columns = this.columns || []
|
||||
schema.dimensions = this.dimensionList || []
|
||||
schema.measures = this.measureList || []
|
||||
this.form.schemaConfig = schema
|
||||
this.loadingOptions.loading = true
|
||||
this.loadingOptions.loadingText = '保存中...'
|
||||
this.loadingOptions.isDisabled = true
|
||||
addDataSet(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
setTimeout(() => {
|
||||
// 2秒后跳转列表页
|
||||
this.$emit('showCard', this.showOptions)
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$message.error('保存失败')
|
||||
this.loadingOptions.loading = false
|
||||
this.loadingOptions.loadingText = '保存'
|
||||
this.loadingOptions.isDisabled = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loadingOptions.loading = false
|
||||
this.loadingOptions.loadingText = '保存'
|
||||
this.loadingOptions.isDisabled = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-card ::v-deep .el-card__body {
|
||||
height: calc(100vh - 230px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.draggable-tag {
|
||||
margin: 10px;
|
||||
cursor: move;
|
||||
}
|
||||
.draggable-wrapper {
|
||||
height: 90px;
|
||||
border: 1px dashed #999;
|
||||
margin: 0 10px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.draggable-item {
|
||||
cursor: move;
|
||||
margin: 5px 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ebecef;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
.draggable-item-handle {
|
||||
background-color: #ecf5ff;
|
||||
border-color: #d9ecff;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: #409EFF;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
301
src/views/visual/dataset/DataSetDetail.vue
Normal file
301
src/views/visual/dataset/DataSetDetail.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ title }}</span>
|
||||
<el-button-group style="float: right;">
|
||||
<el-button v-hasPerm="['visual:set:preview']" size="mini" icon="el-icon-s-data" round @click="dataPreview">数据预览</el-button>
|
||||
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<el-form ref="form" :model="form" label-width="80px" disabled>
|
||||
<el-form-item label="数据源" prop="sourceId">
|
||||
<el-select v-model="form.sourceId" placeholder="请选择数据源">
|
||||
<el-option
|
||||
v-for="source in sourceOptions"
|
||||
:key="source.id"
|
||||
:label="source.sourceName"
|
||||
:value="source.id"
|
||||
:disabled="source.status === '0'"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据集名称" prop="setName">
|
||||
<el-input v-model="form.setName" placeholder="请输入数据集名称" />
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">数据集</el-divider>
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 0 20px;">
|
||||
<sql-editor
|
||||
ref="sqleditor"
|
||||
:value="form.setSql"
|
||||
:read-only="true"
|
||||
style="height: 300px;"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="left">数据模型定义</el-divider>
|
||||
<el-row style="height: 300px;padding: 0 20px;">
|
||||
<el-col :span="12" style="border: 1px dashed #999;height: 100%;">
|
||||
<div class="tag-group">
|
||||
<el-tag v-for="(item, index) in columnList" :key="index" class="draggable-tag">
|
||||
{{ item.col }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="box-shadow: 0 0 1px 1px #ccc;height: 100%;">
|
||||
<el-row>
|
||||
<el-divider content-position="left">维度列</el-divider>
|
||||
<el-col>
|
||||
<div class="draggable-wrapper">
|
||||
<el-tag v-for="(item, index) in dimensionList" :key="index" class="draggable-item">
|
||||
{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-divider content-position="left">指标列</el-divider>
|
||||
<el-col>
|
||||
<div class="draggable-wrapper">
|
||||
<el-tag v-for="(item, index) in measureList" :key="index" class="draggable-item">
|
||||
{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.id"
|
||||
:label="dict.itemText"
|
||||
>{{ dict.itemValue }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-drawer
|
||||
:visible.sync="drawer"
|
||||
direction="btt"
|
||||
:with-header="false"
|
||||
>
|
||||
<el-table
|
||||
:data="previewData.dataList"
|
||||
stripe
|
||||
border
|
||||
:max-height="200"
|
||||
style="width: 100%; margin: 15px 0;"
|
||||
>
|
||||
<el-table-column label="序号" width="55" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="(column, index) in previewData.columnList">
|
||||
<el-table-column
|
||||
:key="index"
|
||||
:prop="column"
|
||||
:label="column"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</template>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page.sync="previewData.pageNum"
|
||||
:page-size.sync="previewData.pageSize"
|
||||
:total="previewData.dataTotal"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDataSet } from '@/api/visual/dataset'
|
||||
import { listDataSource, queryByPage } from '@/api/metadata/datasource'
|
||||
import SqlEditor from '@/components/SqlEditor'
|
||||
|
||||
export default {
|
||||
name: 'DataSetDetail',
|
||||
components: {
|
||||
SqlEditor
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classCardbody: {
|
||||
overflow: 'auto',
|
||||
height: document.body.offsetHeight - 240 + 'px'
|
||||
},
|
||||
title: '数据集详情',
|
||||
// 展示切换
|
||||
showOptions: {
|
||||
data: {},
|
||||
showList: true,
|
||||
showAdd: false,
|
||||
showEdit: false,
|
||||
showDetail: false
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 状态数据字典
|
||||
statusOptions: [],
|
||||
// 数据源数据字典
|
||||
sourceOptions: [],
|
||||
// 解析字段
|
||||
columns: [],
|
||||
columnList: [],
|
||||
dimensionList: [],
|
||||
measureList: [],
|
||||
drawer: false,
|
||||
previewData: {
|
||||
dataList: [],
|
||||
columnList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
dataTotal: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('id:' + this.data.id)
|
||||
this.getDicts('sys_common_status').then(response => {
|
||||
if (response.success) {
|
||||
this.statusOptions = response.data
|
||||
}
|
||||
})
|
||||
this.getDataSourceList()
|
||||
},
|
||||
mounted() {
|
||||
this.getDataSet(this.data.id)
|
||||
},
|
||||
methods: {
|
||||
showCard() {
|
||||
this.$emit('showCard', this.showOptions)
|
||||
},
|
||||
getDataSourceList() {
|
||||
listDataSource().then(response => {
|
||||
if (response.success) {
|
||||
this.sourceOptions = response.data
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 获取详情 */
|
||||
getDataSet: function(id) {
|
||||
getDataSet(id).then(response => {
|
||||
if (response.success) {
|
||||
this.form = response.data
|
||||
this.columns = this.form.schemaConfig.columns || []
|
||||
if (this.columns && this.columns.length > 0) {
|
||||
this.dimensionList = this.form.schemaConfig.dimensions || []
|
||||
this.measureList = this.form.schemaConfig.measures || []
|
||||
this.columnList = this.columns.filter(x => [...this.dimensionList, ...this.measureList].every(y => y.col !== x)).map(function(item) {
|
||||
const json = {}
|
||||
json.col = item
|
||||
json.alias = ''
|
||||
return json
|
||||
})
|
||||
}
|
||||
this.$refs.sqleditor.editor.setValue(this.form.setSql)
|
||||
}
|
||||
})
|
||||
},
|
||||
dataPreview() {
|
||||
if (!this.form.sourceId) {
|
||||
return
|
||||
}
|
||||
if (!this.form.setSql) {
|
||||
return
|
||||
}
|
||||
const data = {}
|
||||
data.dataSourceId = this.form.sourceId
|
||||
data.sql = this.form.setSql
|
||||
data.pageNum = this.previewData.pageNum
|
||||
data.pageSize = this.previewData.pageSize
|
||||
queryByPage(data).then(response => {
|
||||
if (response.success) {
|
||||
const { data } = response
|
||||
const dataList = data.data || []
|
||||
let columnList = []
|
||||
if (dataList.length > 0) {
|
||||
columnList = Object.keys(dataList[0])
|
||||
}
|
||||
this.previewData.dataList = dataList
|
||||
this.previewData.columnList = columnList
|
||||
this.previewData.dataTotal = data.total
|
||||
this.drawer = true
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.previewData.pageNum = 1
|
||||
this.previewData.pageSize = val
|
||||
this.dataPreview()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.previewData.pageNum = val
|
||||
this.dataPreview()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-card ::v-deep .el-card__body {
|
||||
height: calc(100vh - 230px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.draggable-tag {
|
||||
margin: 10px;
|
||||
cursor: move;
|
||||
}
|
||||
.draggable-wrapper {
|
||||
height: 90px;
|
||||
border: 1px dashed #999;
|
||||
margin: 0 10px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.draggable-item {
|
||||
cursor: move;
|
||||
margin: 5px 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ebecef;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
.draggable-item-handle {
|
||||
background-color: #ecf5ff;
|
||||
border-color: #d9ecff;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: #409EFF;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
412
src/views/visual/dataset/DataSetEdit.vue
Normal file
412
src/views/visual/dataset/DataSetEdit.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ title }}</span>
|
||||
<el-button-group style="float: right;">
|
||||
<el-button v-hasPerm="['visual:chart:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
|
||||
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="数据源" prop="sourceId">
|
||||
<el-select v-model="form.sourceId" placeholder="请选择数据源">
|
||||
<el-option
|
||||
v-for="source in sourceOptions"
|
||||
:key="source.id"
|
||||
:label="source.sourceName"
|
||||
:value="source.id"
|
||||
:disabled="source.status === '0'"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据集名称" prop="setName">
|
||||
<el-input v-model="form.setName" placeholder="请输入数据集名称" />
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">数据集</el-divider>
|
||||
<el-row style="padding: 0 20px;">
|
||||
<el-col :span="24">
|
||||
<sql-editor
|
||||
ref="sqleditor"
|
||||
:value="form.setSql"
|
||||
style="height: 300px;"
|
||||
@changeTextarea="changeTextarea($event)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button size="mini" type="primary" @click="formaterSql">Sql格式化</el-button>
|
||||
<el-button size="mini" type="primary" @click="analyseSql">Sql解析</el-button>
|
||||
<el-button v-hasPerm="['visual:set:preview']" size="mini" type="primary" @click="dataPreview">数据预览</el-button>
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">数据模型定义</el-divider>
|
||||
<el-row style="height: 300px;padding: 0 20px;">
|
||||
<el-col :span="12" style="border: 1px dashed #999;height: 100%;">
|
||||
<div class="tag-group">
|
||||
<draggable v-model="columnList" :options="{sort: false, group: {name: 'col', pull: true, put: false}}">
|
||||
<el-tag v-for="(item, index) in columnList" :key="index" class="draggable-tag">
|
||||
{{ item.col }}
|
||||
</el-tag>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="box-shadow: 0 0 1px 1px #ccc;height: 100%;">
|
||||
<el-row>
|
||||
<el-divider content-position="left">维度列</el-divider>
|
||||
<el-col>
|
||||
<draggable group="col" :list="dimensionList" class="draggable-wrapper">
|
||||
<div v-for="(item, index) in dimensionList" :key="index" class="draggable-item">
|
||||
<el-tag>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</el-tag>
|
||||
<span v-if="item.input" class="draggable-item-handle">
|
||||
<el-input v-model="item.alias" size="mini" placeholder="请输入内容" @blur="handleDelTagLabel(index, item)" />
|
||||
</span>
|
||||
<span v-else class="draggable-item-handle" @click="handleTagLabel(index, item)"><i class="el-icon-edit-outline" /></span>
|
||||
<span class="draggable-item-handle" @click="handleDimensionTagClose(index, item)"><i class="el-icon-delete" /></span>
|
||||
</div>
|
||||
</draggable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-divider content-position="left">指标列</el-divider>
|
||||
<el-col>
|
||||
<draggable group="col" :list="measureList" class="draggable-wrapper">
|
||||
<div v-for="(item, index) in measureList" :key="index" class="draggable-item">
|
||||
<el-tag>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</el-tag>
|
||||
<span v-if="item.input" class="draggable-item-handle">
|
||||
<el-input v-model="item.alias" size="mini" placeholder="请输入内容" @blur="handleDelTagLabel(index, item)" />
|
||||
</span>
|
||||
<span v-else class="draggable-item-handle" @click="handleTagLabel(index, item)"><i class="el-icon-edit-outline" /></span>
|
||||
<span class="draggable-item-handle" @click="handleMeasureTagClose(index, item)"><i class="el-icon-delete" /></span>
|
||||
</div>
|
||||
</draggable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.id"
|
||||
:label="dict.itemText"
|
||||
>{{ dict.itemValue }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-drawer
|
||||
:visible.sync="drawer"
|
||||
direction="btt"
|
||||
:with-header="false"
|
||||
>
|
||||
<el-table
|
||||
:data="previewData.dataList"
|
||||
stripe
|
||||
border
|
||||
:max-height="200"
|
||||
style="width: 100%; margin: 15px 0;"
|
||||
>
|
||||
<el-table-column label="序号" width="55" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="(column, index) in previewData.columnList">
|
||||
<el-table-column
|
||||
:key="index"
|
||||
:prop="column"
|
||||
:label="column"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</template>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page.sync="previewData.pageNum"
|
||||
:page-size.sync="previewData.pageSize"
|
||||
:total="previewData.dataTotal"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDataSet, updateDataSet, sqlAnalyse } from '@/api/visual/dataset'
|
||||
import { listDataSource, queryByPage } from '@/api/metadata/datasource'
|
||||
import sqlFormatter from 'sql-formatter'
|
||||
import SqlEditor from '@/components/SqlEditor'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'DataSetEdit',
|
||||
components: {
|
||||
SqlEditor,
|
||||
draggable
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classCardbody: {
|
||||
overflow: 'auto',
|
||||
height: document.body.offsetHeight - 240 + 'px'
|
||||
},
|
||||
title: '数据集编辑',
|
||||
// 展示切换
|
||||
showOptions: {
|
||||
data: {},
|
||||
showList: true,
|
||||
showAdd: false,
|
||||
showEdit: false,
|
||||
showDetail: false
|
||||
},
|
||||
// 保存按钮
|
||||
loadingOptions: {
|
||||
loading: false,
|
||||
loadingText: '保存',
|
||||
isDisabled: false
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
sourceId: [
|
||||
{ required: true, message: '数据源不能为空', trigger: 'change' }
|
||||
],
|
||||
setName: [
|
||||
{ required: true, message: '数据集名称不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
// 状态数据字典
|
||||
statusOptions: [],
|
||||
// 数据源数据字典
|
||||
sourceOptions: [],
|
||||
// 解析字段
|
||||
columns: [],
|
||||
columnList: [],
|
||||
dimensionList: [],
|
||||
measureList: [],
|
||||
drawer: false,
|
||||
previewData: {
|
||||
dataList: [],
|
||||
columnList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
dataTotal: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('id:' + this.data.id)
|
||||
this.getDicts('sys_common_status').then(response => {
|
||||
if (response.success) {
|
||||
this.statusOptions = response.data
|
||||
}
|
||||
})
|
||||
this.getDataSourceList()
|
||||
},
|
||||
mounted() {
|
||||
this.getDataSet(this.data.id)
|
||||
},
|
||||
methods: {
|
||||
showCard() {
|
||||
this.$emit('showCard', this.showOptions)
|
||||
},
|
||||
getDataSourceList() {
|
||||
listDataSource().then(response => {
|
||||
if (response.success) {
|
||||
this.sourceOptions = response.data
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 获取详情 */
|
||||
getDataSet: function(id) {
|
||||
getDataSet(id).then(response => {
|
||||
if (response.success) {
|
||||
this.form = response.data
|
||||
this.columns = this.form.schemaConfig.columns || []
|
||||
if (this.columns && this.columns.length > 0) {
|
||||
this.dimensionList = this.form.schemaConfig.dimensions || []
|
||||
this.measureList = this.form.schemaConfig.measures || []
|
||||
this.columnList = this.columns.filter(x => [...this.dimensionList, ...this.measureList].every(y => y.col !== x)).map(function(item) {
|
||||
const json = {}
|
||||
json.col = item
|
||||
json.alias = ''
|
||||
return json
|
||||
})
|
||||
}
|
||||
this.$refs.sqleditor.editor.setValue(this.form.setSql)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 绑定编辑器value值的变化
|
||||
changeTextarea(val) {
|
||||
this.$set(this.form, 'setSql', val)
|
||||
},
|
||||
formaterSql() {
|
||||
this.$refs.sqleditor.editor.setValue(sqlFormatter.format(this.$refs.sqleditor.editor.getValue()))
|
||||
},
|
||||
analyseSql() {
|
||||
if (!this.form.setSql) {
|
||||
return
|
||||
}
|
||||
const data = {}
|
||||
data.sqlText = this.form.setSql
|
||||
sqlAnalyse(data).then(response => {
|
||||
if (response.success) {
|
||||
this.columns = response.data
|
||||
this.columnList = this.columns.map(function(item) {
|
||||
const json = {}
|
||||
json.col = item
|
||||
json.alias = ''
|
||||
return json
|
||||
})
|
||||
this.dimensionList = []
|
||||
this.measureList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDimensionTagClose(index, tag) {
|
||||
this.dimensionList.splice(index, 1)
|
||||
tag.alias = ''
|
||||
this.columnList.push(tag)
|
||||
},
|
||||
handleMeasureTagClose(index, tag) {
|
||||
this.measureList.splice(index, 1)
|
||||
tag.alias = ''
|
||||
this.columnList.push(tag)
|
||||
},
|
||||
handleTagLabel(index, tag) {
|
||||
this.$set(tag, 'input', true)
|
||||
},
|
||||
handleDelTagLabel(index, tag) {
|
||||
this.$delete(tag, 'input')
|
||||
},
|
||||
dataPreview() {
|
||||
if (!this.form.sourceId) {
|
||||
return
|
||||
}
|
||||
if (!this.form.setSql) {
|
||||
return
|
||||
}
|
||||
const data = {}
|
||||
data.dataSourceId = this.form.sourceId
|
||||
data.sql = this.form.setSql
|
||||
data.pageNum = this.previewData.pageNum
|
||||
data.pageSize = this.previewData.pageSize
|
||||
queryByPage(data).then(response => {
|
||||
if (response.success) {
|
||||
const { data } = response
|
||||
const dataList = data.data || []
|
||||
let columnList = []
|
||||
if (dataList.length > 0) {
|
||||
columnList = Object.keys(dataList[0])
|
||||
}
|
||||
this.previewData.dataList = dataList
|
||||
this.previewData.columnList = columnList
|
||||
this.previewData.dataTotal = data.total
|
||||
this.drawer = true
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.previewData.pageNum = 1
|
||||
this.previewData.pageSize = val
|
||||
this.dataPreview()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.previewData.pageNum = val
|
||||
this.dataPreview()
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
const schema = {}
|
||||
schema.columns = this.columns || []
|
||||
schema.dimensions = this.dimensionList || []
|
||||
schema.measures = this.measureList || []
|
||||
this.form.schemaConfig = schema
|
||||
this.loadingOptions.loading = true
|
||||
this.loadingOptions.loadingText = '保存中...'
|
||||
this.loadingOptions.isDisabled = true
|
||||
updateDataSet(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
setTimeout(() => {
|
||||
// 2秒后跳转列表页
|
||||
this.$emit('showCard', this.showOptions)
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$message.error('保存失败')
|
||||
this.loadingOptions.loading = false
|
||||
this.loadingOptions.loadingText = '保存'
|
||||
this.loadingOptions.isDisabled = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loadingOptions.loading = false
|
||||
this.loadingOptions.loadingText = '保存'
|
||||
this.loadingOptions.isDisabled = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-card ::v-deep .el-card__body {
|
||||
height: calc(100vh - 230px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.draggable-tag {
|
||||
margin: 10px;
|
||||
cursor: move;
|
||||
}
|
||||
.draggable-wrapper {
|
||||
height: 90px;
|
||||
border: 1px dashed #999;
|
||||
margin: 0 10px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.draggable-item {
|
||||
cursor: move;
|
||||
margin: 5px 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ebecef;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
.draggable-item-handle {
|
||||
background-color: #ecf5ff;
|
||||
border-color: #d9ecff;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: #409EFF;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
317
src/views/visual/dataset/DataSetList.vue
Normal file
317
src/views/visual/dataset/DataSetList.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="always">
|
||||
<el-form ref="queryForm" :model="queryParams" :inline="true">
|
||||
<el-form-item label="数据集名称" prop="setName">
|
||||
<el-input
|
||||
v-model="queryParams.setName"
|
||||
placeholder="请输入数据集名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row type="flex" justify="space-between">
|
||||
<el-col :span="12">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
v-hasPerm="['visual:set:add']"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="right-toolbar">
|
||||
<el-tooltip content="密度" effect="dark" placement="top">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<el-button circle size="mini">
|
||||
<svg-icon class-name="size-icon" icon-class="colum-height" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="medium">正常</el-dropdown-item>
|
||||
<el-dropdown-item command="small">中等</el-dropdown-item>
|
||||
<el-dropdown-item command="mini">紧凑</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="刷新" effect="dark" placement="top">
|
||||
<el-button circle size="mini" @click="handleRefresh">
|
||||
<svg-icon class-name="size-icon" icon-class="shuaxin" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="列设置" effect="dark" placement="top">
|
||||
<el-popover placement="bottom" width="100" trigger="click">
|
||||
<el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
|
||||
<el-checkbox
|
||||
v-for="(item, index) in tableColumns"
|
||||
:key="index"
|
||||
:label="item.prop"
|
||||
>{{ item.label }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<span slot="reference">
|
||||
<el-button circle size="mini">
|
||||
<svg-icon class-name="size-icon" icon-class="shezhi" />
|
||||
</el-button>
|
||||
</span>
|
||||
</el-popover>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dataSetList"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
:size="tableSize"
|
||||
:height="tableHeight"
|
||||
style="width: 100%;margin: 15px 0;"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="序号" width="55" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.$index +1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="(item, index) in tableColumns">
|
||||
<el-table-column
|
||||
v-if="item.show"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:formatter="item.formatter"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</template>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
placement="left"
|
||||
trigger="click"
|
||||
>
|
||||
<el-button
|
||||
v-hasPerm="['visual:set:edit']"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleEdit(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['visual:set:detail']"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handleDetail(scope.row)"
|
||||
>详情</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['visual:set:remove']"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
<el-button slot="reference">操作</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page.sync="queryParams.pageNum"
|
||||
:page-size.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pageDataSet, delDataSet } from '@/api/visual/dataset'
|
||||
|
||||
export default {
|
||||
name: 'DataSetList',
|
||||
data() {
|
||||
return {
|
||||
tableHeight: document.body.offsetHeight - 310 + 'px',
|
||||
// 展示切换
|
||||
showOptions: {
|
||||
data: {},
|
||||
showList: true,
|
||||
showAdd: false,
|
||||
showEdit: false,
|
||||
showDetail: false
|
||||
},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 表格头
|
||||
tableColumns: [
|
||||
{ prop: 'setName', label: '数据集名称', show: true },
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
show: true,
|
||||
formatter: this.statusFormatter
|
||||
},
|
||||
{ prop: 'createTime', label: '创建时间', show: true }
|
||||
],
|
||||
// 默认选择中表格头
|
||||
checkedTableColumns: [],
|
||||
tableSize: 'medium',
|
||||
// 状态数据字典
|
||||
statusOptions: [],
|
||||
// 数据集表格数据
|
||||
dataSetList: [],
|
||||
// 总数据条数
|
||||
total: 0,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
setName: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDicts('sys_common_status').then(response => {
|
||||
if (response.success) {
|
||||
this.statusOptions = response.data
|
||||
}
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
mounted() {
|
||||
this.initCols()
|
||||
},
|
||||
methods: {
|
||||
/** 查询数据集列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
pageDataSet(this.queryParams).then(response => {
|
||||
this.loading = false
|
||||
if (response.success) {
|
||||
const { data } = response
|
||||
this.dataSetList = data.data
|
||||
this.total = data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
initCols() {
|
||||
this.checkedTableColumns = this.tableColumns.map(col => col.prop)
|
||||
},
|
||||
handleCheckedColsChange(val) {
|
||||
this.tableColumns.forEach(col => {
|
||||
if (!this.checkedTableColumns.includes(col.prop)) {
|
||||
col.show = false
|
||||
} else {
|
||||
col.show = true
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCommand(command) {
|
||||
this.tableSize = command
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
setName: ''
|
||||
}
|
||||
this.handleQuery()
|
||||
},
|
||||
/** 刷新列表 */
|
||||
handleRefresh() {
|
||||
this.getList()
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.showOptions.data = {}
|
||||
this.showOptions.showList = false
|
||||
this.showOptions.showAdd = true
|
||||
this.showOptions.showEdit = false
|
||||
this.showOptions.showDetail = false
|
||||
this.$emit('showCard', this.showOptions)
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleEdit(row) {
|
||||
this.showOptions.data.id = row.id
|
||||
this.showOptions.showList = false
|
||||
this.showOptions.showAdd = false
|
||||
this.showOptions.showEdit = true
|
||||
this.showOptions.showDetail = false
|
||||
this.$emit('showCard', this.showOptions)
|
||||
},
|
||||
/** 详情按钮操作 */
|
||||
handleDetail(row) {
|
||||
this.showOptions.data.id = row.id
|
||||
this.showOptions.showList = false
|
||||
this.showOptions.showAdd = false
|
||||
this.showOptions.showEdit = false
|
||||
this.showOptions.showDetail = true
|
||||
this.$emit('showCard', this.showOptions)
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDataSet(row.id).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
this.queryParams.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
statusFormatter(row, column, cellValue, index) {
|
||||
const dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
|
||||
if (cellValue === '1') {
|
||||
return <el-tag type='success'>{dictLabel}</el-tag>
|
||||
} else {
|
||||
return <el-tag type='warning'>{dictLabel}</el-tag>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right-toolbar {
|
||||
float: right;
|
||||
}
|
||||
.el-card ::v-deep .el-card__body {
|
||||
height: calc(100vh - 170px);
|
||||
}
|
||||
</style>
|
||||
48
src/views/visual/dataset/index.vue
Normal file
48
src/views/visual/dataset/index.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="el-zoom-in-center">
|
||||
<data-set-list v-if="options.showList" @showCard="showCard" />
|
||||
</transition>
|
||||
<transition name="el-zoom-in-top">
|
||||
<data-set-add v-if="options.showAdd" :data="options.data" @showCard="showCard" />
|
||||
</transition>
|
||||
<transition name="el-zoom-in-top">
|
||||
<data-set-edit v-if="options.showEdit" :data="options.data" @showCard="showCard" />
|
||||
</transition>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<data-set-detail v-if="options.showDetail" :data="options.data" @showCard="showCard" />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataSetList from './DataSetList'
|
||||
import DataSetAdd from './DataSetAdd'
|
||||
import DataSetEdit from './DataSetEdit'
|
||||
import DataSetDetail from './DataSetDetail'
|
||||
|
||||
export default {
|
||||
name: 'DataSet',
|
||||
components: { DataSetList, DataSetAdd, DataSetEdit, DataSetDetail },
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
data: {},
|
||||
showList: true,
|
||||
showAdd: false,
|
||||
showEdit: false,
|
||||
showDetail: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCard(data) {
|
||||
Object.assign(this.options, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
15
src/views/visual/index.vue
Normal file
15
src/views/visual/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
Visual
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Visual'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user