Skip to content

D
dataease
提交 63fe1222 authored 作者: junjie's avatar junjie
浏览文件
操作

refactor(视图): 图形属性，增加 配色方案 功能

上级 5f823af9
隐藏空白字符变更
内嵌 并排
正在显示 包含 181 行增加 和 17 行删除
frontend/src/lang/zh.js
浏览文件 @ 63fe1222
......@@ -602,7 +602,19 @@ export default {
std: '标准差',
var_samp: '方差',
quick_calc: '快速计算',
show_name_set: '显示名设置'
show_name_set: '显示名设置',
color: '颜色',
color_case: '配色方案',
pls_slc_color_case: '请选择配色方案',
color_default: '默认',
color_retro: '复古',
color_future: '未来',
color_gradual: '渐变',
color_business: '商务',
color_gentle: '柔和',
color_elegant: '淡雅',
color_technology: '科技',
color_simple: '简洁'
},
dataset: {
datalist: '数据集',
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ 63fe1222
export const DEFAULT_COLOR_CASE = {
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
}
export const BASE_BAR = {
title: {
text: ''
......@@ -33,5 +37,5 @@ export const BASE_LINE = {
}
export default {
BASE_BAR, BASE_LINE
BASE_BAR, BASE_LINE, DEFAULT_COLOR_CASE
}
frontend/src/views/chart/components/ChartComponent.vue
浏览文件 @ 63fe1222
......@@ -40,6 +40,7 @@ export default {
chart_option = JSON.parse(JSON.stringify(BASE_LINE))
}
// console.log(chart_option);
// 处理data
if (chart.data) {
chart_option.title.text = chart.title
chart_option.xAxis.data = chart.data.x
......@@ -49,6 +50,12 @@ export default {
})
}
// console.log(chart_option);
// 处理shape attr
if (chart.customAttr) {
if (chart.customAttr.color) {
chart_option.color = chart.customAttr.color.colors
}
}
this.myEcharts(chart_option)
},
myEcharts(option) {
......
frontend/src/views/chart/components/ColorSelector.vue 0 → 100644
浏览文件 @ 63fe1222
<template>
<div>
<div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.color_case')" class="form-item">
<el-select v-model="colorForm.colorCase" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<div style="float: left">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
<!--todo other color attr-->
</div>
</div>
</template>
<script>
export default {
name: 'ColorSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
colorCases: [
{
name: this.$t('chart.color_default'),
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
{
name: this.$t('chart.color_retro'),
value: 'retro',
colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_elegant'),
value: 'elegant',
colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
},
{
name: this.$t('chart.color_future'),
value: 'future',
colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
},
{
name: this.$t('chart.color_gradual'),
value: 'gradual',
colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
},
{
name: this.$t('chart.color_simple'),
value: 'simple',
colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_business'),
value: 'business',
colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
},
{
name: this.$t('chart.color_gentle'),
value: 'gentle',
colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
},
{
name: this.$t('chart.color_technology'),
value: 'technology',
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
}
],
colorForm: {
colorCase: 'default'
}
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
this.colorForm.colorCase = chart.customAttr.color.value
}
}
},
mounted() {
},
methods: {
changeColorCase() {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.colorCase
})
this.$emit('onColorChange', {
value: items[0].value,
colors: items[0].colors
})
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{font-size: 12px}
</style>
frontend/src/views/chart/group/Group.vue
浏览文件 @ 63fe1222
......@@ -211,6 +211,7 @@
<script>
import { post } from '@/api/chart/chart'
import TableSelector from '../view/TableSelector'
import { DEFAULT_COLOR_CASE } from '../chart/chart'
export default {
name: 'Group',
......@@ -503,6 +504,10 @@ export default {
view.name = this.table.name
view.sceneId = this.currGroup.id
view.tableId = this.table.id
view.type = 'bar'
view.customAttr = JSON.stringify({
color: DEFAULT_COLOR_CASE
})
post('/chart/view/save', view).then(response => {
this.selectTableFlag = false
this.$store.dispatch('chart/setTableId', null)
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 63fe1222
......@@ -79,14 +79,16 @@
<el-row>
<div class="chart-type">
<!--TODO 这里要替换好看点的图标-->
<el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px"/></el-radio>
<el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px" /></el-radio>
<el-radio v-model="view.type" label="line">折线图</el-radio>
</div>
</el-row>
</div>
<div style="height: 45%;overflow:auto;border-top: 1px solid #e6e6e6">
<el-tabs type="card" :stretch="true" class="tab-header">
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">TODO</el-tab-pane>
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
<color-selector :chart="chart" @onColorChange="onColorChange" />
</el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">TODO</el-tab-pane>
</el-tabs>
</div>
......@@ -144,10 +146,13 @@ import draggable from 'vuedraggable'
import DimensionItem from '../components/DimensionItem'
import QuotaItem from '../components/QuotaItem'
import ChartComponent from '../components/ChartComponent'
// shape attr
import { DEFAULT_COLOR_CASE } from '../chart/chart'
import ColorSelector from '../components/ColorSelector'
export default {
name: 'ChartEdit',
components: { ChartComponent, QuotaItem, DimensionItem, draggable },
components: { ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
data() {
return {
table: {},
......@@ -158,7 +163,10 @@ export default {
yaxis: [],
show: true,
type: 'bar',
title: ''
title: '',
customAttr: {
color: DEFAULT_COLOR_CASE
}
},
// 定义要被拖拽对象的数组
arr1: [
......@@ -224,17 +232,6 @@ export default {
this.quota = response.data.quota
})
},
get(id) {
if (id) {
post('/chart/view/get/' + id, null).then(response => {
this.view = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
})
} else {
this.view = {}
}
},
save() {
const view = JSON.parse(JSON.stringify(this.view))
view.id = this.view.id
......@@ -253,6 +250,7 @@ export default {
})
view.xaxis = JSON.stringify(view.xaxis)
view.yaxis = JSON.stringify(view.yaxis)
view.customAttr = JSON.stringify(view.customAttr)
post('/chart/view/save', view).then(response => {
// this.get(response.data.id);
this.getData(response.data.id)
......@@ -269,6 +267,7 @@ export default {
this.view = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
// 将视图传入echart组件
this.chart = response.data
})
......@@ -365,6 +364,11 @@ export default {
// }
// })
this.save()
},
onColorChange(val) {
this.view.customAttr.color = val
this.save()
}
}
}
......@@ -399,6 +403,7 @@ export default {
border: solid 1px #eee;
text-align: left;
color: #606266;
background-color: rgba(35,46,64,.05);
display: block;
}
......@@ -408,6 +413,7 @@ export default {
border: solid 1px #eee;
text-align: left;
color: #606266;
background-color: rgba(35,46,64,.05);
}
.item + .item {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论