Skip to content

Z
ZZDataAnalysis
Commit 78177e11 authored by liushuai's avatar liushuai
Browse files
Options

集成定制化图表

parent 67a1ce83
Show whitespace changes
Inline Side-by-side
Showing with 1927 additions and 124 deletions
web/src/chartcustomization/chartConfg/chartDataZoom.vue 0 → 100644
View file @ 78177e11
<template>
<div class="setting">
<div name="dataZoom" class="dataZoom">
<div slot="title" class="collapse-item">
数据区域缩放
<el-switch
v-model="show"
@change="changeShow"
active-color="#13ce66">
</el-switch>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: "chartDataZoom",
computed: {
...mapState('charts',['chartSettingsDataZoom'])
},
data() {
return{
show:true,
activeNames:[]
}
},
mounted() {
this.activeNames=["dataZoom"]
},
methods:{
changeShow(value){
for(var i in this.chartSettingsDataZoom){
let item = this.chartSettingsDataZoom[i]
item.show = value
}
this.$store.commit('charts/updateChartSettingsDataZoom', this.chartSettingsDataZoom);
}
}
}
</script>
<style scoped>
.dataZoom{
flex: 1;
}
.collapse-item{
/*width: 100%;*/
font-weight: bold;
line-height: 40px;
font-size: 13px;
display: flex;
justify-content: space-between;
margin-left: 20px;
margin-right: 20px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
/*/deep/ .el-select{*/
/* width: 80px;*/
/*}*/
</style>
web/src/chartcustomization/chartConfg/chartLegend.vue 0 → 100644
View file @ 78177e11
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="legend">
<div slot="title" class="collapse-item">
图例
<el-switch
v-model="chartSettingsLegend.show"
active-color="#13ce66"
@change="changeShow">
</el-switch>
</div>
<div class="element-config">
字体
<div v-if="chartSettingsLegend.textStyle.fontWeight=='bolder'" @click="changeWeight('normal')">
<span style="font-size: 18px;font-weight: bolder;cursor: pointer;color: #409EFF;">B</span>
</div>
<div v-else>
<span style="font-size: 18px;font-weight: bolder;cursor: pointer" @click="changeWeight('bolder')">B</span>
</div>
<el-color-picker v-model="chartSettingsLegend.textStyle.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsLegend.textStyle.fontSize" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
位置
<el-select v-model="position" placeholder="请选择">
<el-option
v-for="items in positionOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
布局
<el-select v-model="chartSettingsLegend.type" placeholder="请选择">
<el-option
v-for="items in typeOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
方向
<el-select v-model="chartSettingsLegend.orient" placeholder="请选择">
<el-option
v-for="items in orientOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "chartLegend",
computed: {
...mapState('charts',['chartSettingsLegend'])
},
data(){
return{
activeNames:[],
typeOptions:[{
value: 'plain',
label: '普通'
},{
value: 'scroll',
label: '滚动'
}],
orientOptions:[{
value: 'horizontal',
label: '水平'
},{
value: 'vertical',
label: '垂直'
}],
position:'top_center',
positionOptions:[{
value: 'top_left',
label: '顶部居左'
},{
value: 'top_center',
label: '顶部居中'
},{
value: 'top_right',
label: '顶部局右'
},{
value: 'bottom_left',
label: '底部居左'
},{
value: 'bottom_center',
label: '底部居中'
},{
value: 'bottom_right',
label: '底部居右'
}],
options:[{
value: '10',
label: '10'
},{
value: '11',
label: '11'
},{
value: '12',
label: '12'
},{
value: '13',
label: '13'
},{
value: '14',
label: '14'
},{
value: '15',
label: '15'
},{
value: '16',
label: '16'
},{
value: '17',
label: '17'
},{
value: '18',
label: '18'
},{
value: '19',
label: '19'
},{
value: '20',
label: '20'
},{
value: '21',
label: '21'
},{
value: '22',
label: '22'
},{
value: '23',
label: '23'
},{
value: '24',
label: '24'
},]
}
},
mounted() {
if(this.chartSettingsLegend.show==true){
this.activeNames=["legend"]
}else {
this.activeNames=[]
}
},
watch:{
"position":function (newval,oldVal) {
let data = newval.split("_")
this.chartSettingsLegend.top = data[0]
this.chartSettingsLegend.left = data[1]
// console.log(this.chartSettingsTitle)
this.$store.commit('charts/updateChartSettingsLegend', this.chartSettingsLegend);
},
'activeNames':function (newVal,oldVal) {
if(newVal.length>0){
this.chartSettingsLegend.show=true
}else {
this.chartSettingsLegend.show=false
}
this.$store.commit('charts/updateChartSettingsLegend', this.chartSettingsLegend);
}
},
methods: {
changeShow(newShowValue) {
this.chartSettingsLegend.show = newShowValue;
this.$store.commit('charts/updateChartSettingsLegend', this.chartSettingsLegend);
},
changeWeight(value){
this.chartSettingsLegend.textStyle.fontWeight = value;
this.$store.commit('charts/updateChartSettingsLegend', this.chartSettingsLegend);
}
},
}
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
web/src/chartcustomization/chartConfg/chartLine.vue 0 → 100644
View file @ 78177e11
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="line">
<div slot="title" class="collapse-item">
线
</div>
<div class="element-config">
粗细
<el-select style="width: 120px !important;" v-model="chartSettingsSeries.lineStyle.width" placeholder="请选择">
<el-option
v-for="items in widthOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
平滑曲线
<el-switch
v-model="chartSettingsSeries.smooth"
active-color="#13ce66">
</el-switch>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: "chartLine",
computed: {
...mapState('charts',['chartSettingsSeries'])
},
data() {
return {
activeNames:[],
widthOptions:[
{label:1,value:1},
{label:2,value:2},
{label:3,value:3},
{label:4,value:4},
{label:5,value:5},
{label:6,value:6},
{label:7,value:7},
{label:8,value:8},
{label:9,value:9},
{label:10,value:10},
{label:11,value:11},
{label:12,value:12},
{label:13,value:13},
{label:14,value:14},
{label:15,value:15},
{label:16,value:16},
{label:17,value:17},
{label:18,value:18},
{label:19,value:19},
{label:20,value:20},
]
}
},
mounted() {
this.activeNames=["line"]
},
}
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
/*/deep/ .el-select{*/
/* width: 80px;*/
/*}*/
</style>
web/src/chartcustomization/chartConfg/chartPoint.vue 0 → 100644
View file @ 78177e11
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="point">
<div slot="title" class="collapse-item">
点
<el-switch
v-model="chartSettingsSeries.showPoint"
active-color="#13ce66">
</el-switch>
</div>
<div class="element-config">
类型
<el-select style="width: 120px !important;" v-model="chartSettingsSeries.symbol" placeholder="请选择">
<el-option
v-for="items in symbolOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
大小
<el-select style="width: 120px !important;" v-model="chartSettingsSeries.symbolSize" placeholder="请选择">
<el-option
v-for="items in symbolSizeOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: "chartPoint",
computed: {
...mapState('charts',['chartSettingsSeries'])
},
mounted() {
if(this.show==true){
this.activeNames=["point"]
}else {
this.activeNames=[]
}
},
data() {
return {
activeNames:[],
symbolOptions:[
{label:"空心圆圈",value:"circle"},
{label:"空心方块",value:"rect"},
{label:"圆角方块",value:"roundRect"},
{label:"空心三角",value:"triangle"},
{label:"空心菱形",value:"diamond"},
{label:"空心图钉",value:"pin"},
{label:"空心箭头",value:"arrow"},
],
symbolSizeOptions:[
{label:1,value:1},
{label:2,value:2},
{label:3,value:3},
{label:4,value:4},
{label:5,value:5},
{label:6,value:6},
{label:7,value:7},
{label:8,value:8},
{label:9,value:9},
{label:10,value:10},
{label:11,value:11},
{label:12,value:12},
{label:13,value:13},
{label:14,value:14},
{label:15,value:15},
{label:16,value:16},
{label:17,value:17},
{label:18,value:18},
{label:19,value:19},
{label:20,value:20},
]
}
},
}
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
/*/deep/ .el-select{*/
/* width: 80px;*/
/*}*/
</style>
web/src/chartcustomization/chartConfg/chartTitle.vue 0 → 100644
View file @ 78177e11
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="title">
<div slot="title" class="collapse-item">
图表标题
<el-switch
v-model="chartSettingsTitle.show"
active-color="#13ce66"
@change="changeShow">
</el-switch>
</div>
<div class="element-config">
<el-input size="small" v-model="chartSettingsTitle.text" placeholder="请输入内容"></el-input>
</div>
<div class="element-config">
字体
<div v-if="chartSettingsTitle.textStyle.fontWeight=='bolder'" @click="changeWeight('normal')">
<span style="font-size: 18px;font-weight: bolder;cursor: pointer;color: #409EFF;">B</span>
</div>
<div v-else>
<span style="font-size: 18px;font-weight: bolder;cursor: pointer" @click="changeWeight('bolder')">B</span>
</div>
<el-color-picker v-model="chartSettingsTitle.textStyle.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsTitle.textStyle.fontSize" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
位置
<el-select v-model="position" placeholder="请选择">
<el-option
v-for="items in positionOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: "chartTitle",
computed: {
...mapState('charts',['chartSettingsTitle'])
},
data(){
return{
activeNames:[],
position:'top_left',
positionOptions:[{
value: 'top_left',
label: '顶部居左'
},{
value: 'top_center',
label: '顶部居中'
},{
value: 'top_right',
label: '顶部局右'
},{
value: 'bottom_left',
label: '底部居左'
},{
value: 'bottom_center',
label: '底部居中'
},{
value: 'bottom_right',
label: '底部居右'
}],
options:[{
value: '10',
label: '10'
},{
value: '11',
label: '11'
},{
value: '12',
label: '12'
},{
value: '13',
label: '13'
},{
value: '14',
label: '14'
},{
value: '15',
label: '15'
},{
value: '16',
label: '16'
},{
value: '17',
label: '17'
},{
value: '18',
label: '18'
},{
value: '19',
label: '19'
},{
value: '20',
label: '20'
},{
value: '21',
label: '21'
},{
value: '22',
label: '22'
},{
value: '23',
label: '23'
},{
value: '24',
label: '24'
},]
}
},
mounted() {
if(this.chartSettingsTitle.show==true){
this.activeNames=["title"]
}else {
this.activeNames=[]
}
},
watch:{
"position":function (newval,oldVal) {
let data = newval.split("_")
this.chartSettingsTitle.top = data[0]
this.chartSettingsTitle.left = data[1]
// console.log(this.chartSettingsTitle)
this.$store.commit('charts/updateChartSettingsTitle', this.chartSettingsTitle);
},
'activeNames':function (newVal,oldVal) {
if(newVal.length>0){
this.chartSettingsTitle.show=true
}else {
this.chartSettingsTitle.show=false
}
this.$store.commit('charts/updateChartSettingsTitle', this.chartSettingsTitle);
}
},
methods: {
changeShow(newShowValue) {
this.chartSettingsTitle.show = newShowValue;
this.$store.commit('charts/updateChartSettingsTitle', this.chartSettingsTitle);
},
changeWeight(value){
this.chartSettingsTitle.textStyle.fontWeight = value;
this.$store.commit('charts/updateChartSettingsTitle', this.chartSettingsTitle);
}
},
};
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
/*/deep/ .el-select{*/
/* width: 80px;*/
/*}*/
</style>
web/src/chartcustomization/chartConfg/chartXAxis.vue 0 → 100644
View file @ 78177e11
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="XAxis">
<div slot="title" class="collapse-item">
X轴
<el-switch
v-model="chartSettingsXAxis.show"
active-color="#13ce66"
@change="changeShow">
</el-switch>
</div>
<div class="element-config">
<span style="font-weight: bold">坐标轴</span>
<el-switch
v-model="chartSettingsXAxis.axisLine.show"
active-color="#13ce66"
@change="changeAxisLineShow">
</el-switch>
</div>
<div class="element-config">
类型
<el-select style="width: 120px !important;" v-model="chartSettingsXAxis.axisLine.lineStyle.type" placeholder="请选择">
<el-option
v-for="items in typeOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
样式
<el-color-picker v-model="chartSettingsXAxis.axisLine.lineStyle.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsXAxis.axisLine.lineStyle.width" placeholder="请选择">
<el-option
v-for="items in lineOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
<span style="font-weight: bold">坐标参考线</span>
<el-switch
v-model="chartSettingsXAxis.splitLine.show"
active-color="#13ce66">
</el-switch>
</div>
<div class="element-config">
<span style="font-weight: bold">坐标参标签</span>
<el-switch
v-model="chartSettingsXAxis.axisLabel.show"
active-color="#13ce66"
>
</el-switch>
</div>
<div class="element-config">
字体
<div v-if="chartSettingsXAxis.axisLabel.fontWeight=='bolder'" @click="changeWeight('normal')">
<span style="font-size: 18px;font-weight: bolder;cursor: pointer;color: #409EFF;">B</span>
</div>
<div v-else>
<span style="font-size: 18px;font-weight: bolder;cursor: pointer" @click="changeWeight('bolder')">B</span>
</div>
<el-color-picker v-model="chartSettingsXAxis.axisLabel.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsXAxis.axisLabel.fontSize" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
标签
<el-select style="width: 80px !important;" v-model="chartSettingsXAxis.axisLabel.rotate" placeholder="请选择">
<el-option
v-for="items in rotateOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
<span style="font-weight: bold">坐标轴标题</span>
<el-switch
v-model="axisShow"
active-color="#13ce66">
</el-switch>
</div>
<div v-show="axisShow==true">
<div class="element-config">
<el-input size="small" v-model="name" placeholder="请输入坐标轴标题"></el-input>
</div>
<div class="element-config">
字体
<div v-if="chartSettingsXAxis.nameTextStyle.fontWeight=='bolder'" @click="changeWeight1('normal')">
<span style="font-size: 18px;font-weight: bolder;cursor: pointer;color: #409EFF;">B</span>
</div>
<div v-else>
<span style="font-size: 18px;font-weight: bolder;cursor: pointer" @click="changeWeight1('bolder')">B</span>
</div>
<el-color-picker v-model="chartSettingsXAxis.nameTextStyle.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsXAxis.nameTextStyle.fontSize" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
距离(px)
<el-select style="width: 80px !important;" v-model="chartSettingsXAxis.nameGap" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "chartXAxis",
computed: {
...mapState('charts',['chartSettingsXAxis'])
},
data(){
return{
axisShow:false,
name:'索引项',
activeNames:[],
options:[
{
value: '10',
label: '10'
},{
value: '11',
label: '11'
},{
value: '12',
label: '12'
},{
value: '13',
label: '13'
},{
value: '14',
label: '14'
},{
value: '15',
label: '15'
},{
value: '16',
label: '16'
},{
value: '17',
label: '17'
},{
value: '18',
label: '18'
},{
value: '19',
label: '19'
},{
value: '20',
label: '20'
},{
value: '21',
label: '21'
},{
value: '22',
label: '22'
},{
value: '23',
label: '23'
},{
value: '24',
label: '24'
},],
typeOptions:[
{
label: '实线',
value: 'solid'
}, {
label: '横虚线',
value: 'dashed'
}, {
label: '点虚线',
value: 'dotted'
},
],
lineOptions:[
{
label: '1',
value: '1'
}, {
label: '2',
value: '2'
}, {
label: '3',
value: '3'
}, {
label: '4',
value: '4'
}, {
label: '5',
value: '5'
}, {
label: '6',
value: '6'
}, {
label: '7',
value: '7'
}, {
label: '8',
value: '8'
}, {
label: '9',
value: '9'
}, {
label: '10',
value: '10'
},
],
rotateOptions:[
{value:0,label:"水平"},
{value: 45,label: "倾斜"}
]
}
},
mounted() {
if(this.chartSettingsXAxis.show==true){
this.activeNames=["XAxis"]
}else {
this.activeNames=[]
}
},
watch:{
'activeNames':function (newVal,oldVal) {
if(newVal.length>0){
this.chartSettingsXAxis.show = true
}else {
this.chartSettingsXAxis.show = false
}
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
},
'axisShow':function (newVal,oldVal) {
if(newVal==true){
this.chartSettingsXAxis.name = this.name
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
}else {
this.chartSettingsXAxis.name = ''
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
}
},
'name':function (newVal) {
if(this.axisShow==true){
this.chartSettingsXAxis.name = newVal
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
}
}
},
methods:{
changeSplitLineShow(newShowValue) {
this.chartSettingsXAxis.splitLine.show = newShowValue;
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
},
changeShow(newShowValue) {
this.chartSettingsXAxis.show = newShowValue;
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
},
changeAxisLineShow(newShowValue) {
this.chartSettingsXAxis.axisLine.show = newShowValue;
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
},
changeWeight(value){
this.chartSettingsXAxis.axisLabel.fontWeight = value;
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
},
changeWeight1(value){
this.chartSettingsXAxis.nameTextStyle.fontWeight = value;
this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
}
}
}
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
web/src/chartcustomization/chartConfg/chartYAxis.vue 0 → 100644
View file @ 78177e11
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="YAxis">
<div slot="title" class="collapse-item">
Y轴
<el-switch
v-model="chartSettingsYAxis.show"
active-color="#13ce66"
@change="changeShow">
</el-switch>
</div>
<div class="element-config">
<span style="font-weight: bold">坐标轴</span>
<el-switch
v-model="chartSettingsYAxis.axisLine.show"
active-color="#13ce66"
@change="changeAxisLineShow">
</el-switch>
</div>
<div class="element-config">
类型
<el-select style="width: 120px !important;" v-model="chartSettingsYAxis.axisLine.lineStyle.type" placeholder="请选择">
<el-option
v-for="items in typeOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
样式
<el-color-picker v-model="chartSettingsYAxis.axisLine.lineStyle.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsYAxis.axisLine.lineStyle.width" placeholder="请选择">
<el-option
v-for="items in lineOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
<span style="font-weight: bold">坐标参考线</span>
<el-switch
v-model="chartSettingsYAxis.splitLine.show"
active-color="#13ce66">
</el-switch>
</div>
<div class="element-config">
<span style="font-weight: bold">坐标参标签</span>
<el-switch
v-model="chartSettingsYAxis.axisLabel.show"
active-color="#13ce66"
>
</el-switch>
</div>
<div class="element-config">
字体
<div v-if="chartSettingsYAxis.axisLabel.fontWeight=='bolder'" @click="changeWeight('normal')">
<span style="font-size: 18px;font-weight: bolder;cursor: pointer;color: #409EFF;">B</span>
</div>
<div v-else>
<span style="font-size: 18px;font-weight: bolder;cursor: pointer" @click="changeWeight('bolder')">B</span>
</div>
<el-color-picker v-model="chartSettingsYAxis.axisLabel.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsYAxis.axisLabel.fontSize" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
标签
<el-select style="width: 80px !important;" v-model="chartSettingsYAxis.axisLabel.rotate" placeholder="请选择">
<el-option
v-for="items in rotateOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
<span style="font-weight: bold">坐标轴标题</span>
<el-switch
v-model="axisShow"
active-color="#13ce66">
</el-switch>
</div>
<div v-show="axisShow==true">
<div class="element-config">
<el-input size="small" v-model="name" placeholder="请输入坐标轴标题"></el-input>
</div>
<div class="element-config">
字体
<div v-if="chartSettingsYAxis.nameTextStyle.fontWeight=='bolder'" @click="changeWeight1('normal')">
<span style="font-size: 18px;font-weight: bolder;cursor: pointer;color: #409EFF;">B</span>
</div>
<div v-else>
<span style="font-size: 18px;font-weight: bolder;cursor: pointer" @click="changeWeight1('bolder')">B</span>
</div>
<el-color-picker v-model="chartSettingsYAxis.nameTextStyle.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsYAxis.nameTextStyle.fontSize" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
距离(px)
<el-select style="width: 80px !important;" v-model="chartSettingsYAxis.nameGap" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "chartYAxis",
computed: {
...mapState('charts',['chartSettingsYAxis'])
},
data(){
return{
axisShow:false,
name:'索引项',
activeNames:[],
options:[
{
value: '10',
label: '10'
},{
value: '11',
label: '11'
},{
value: '12',
label: '12'
},{
value: '13',
label: '13'
},{
value: '14',
label: '14'
},{
value: '15',
label: '15'
},{
value: '16',
label: '16'
},{
value: '17',
label: '17'
},{
value: '18',
label: '18'
},{
value: '19',
label: '19'
},{
value: '20',
label: '20'
},{
value: '21',
label: '21'
},{
value: '22',
label: '22'
},{
value: '23',
label: '23'
},{
value: '24',
label: '24'
},],
typeOptions:[
{
label: '实线',
value: 'solid'
}, {
label: '横虚线',
value: 'dashed'
}, {
label: '点虚线',
value: 'dotted'
},
],
lineOptions:[
{
label: '1',
value: '1'
}, {
label: '2',
value: '2'
}, {
label: '3',
value: '3'
}, {
label: '4',
value: '4'
}, {
label: '5',
value: '5'
}, {
label: '6',
value: '6'
}, {
label: '7',
value: '7'
}, {
label: '8',
value: '8'
}, {
label: '9',
value: '9'
}, {
label: '10',
value: '10'
},
],
rotateOptions:[
{value:0,label:"水平"},
{value: 45,label: "倾斜"}
]
}
},
mounted() {
if(this.chartSettingsYAxis.show==true){
this.activeNames=["YAxis"]
}else {
this.activeNames=[]
}
},
watch:{
'activeNames':function (newVal,oldVal) {
if(newVal.length>0){
this.chartSettingsYAxis.show = true
}else {
this.chartSettingsYAxis.show = false
}
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
},
'axisShow':function (newVal,oldVal) {
if(newVal==true){
this.chartSettingsYAxis.name = this.name
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
}else {
this.chartSettingsYAxis.name = ''
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
}
},
'name':function (newVal) {
if(this.axisShow==true){
this.chartSettingsYAxis.name = newVal
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
}
}
},
methods:{
changeSplitLineShow(newShowValue) {
this.chartSettingsYAxis.splitLine.show = newShowValue;
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
},
changeShow(newShowValue) {
this.chartSettingsYAxis.show = newShowValue;
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
},
changeAxisLineShow(newShowValue) {
this.chartSettingsYAxis.axisLine.show = newShowValue;
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
},
changeWeight(value){
this.chartSettingsYAxis.axisLabel.fontWeight = value;
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
},
changeWeight1(value){
this.chartSettingsYAxis.nameTextStyle.fontWeight = value;
this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
}
}
}
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
web/src/chartcustomization/chartedit.vue 0 → 100644
View file @ 78177e11
<template>
<div style="width: 20%">
<!-- <div class="right_title">表单选择与配置</div>-->
<div class="right_main">
<div class="main_edit">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="元素配置" name="2">
<chart-title></chart-title>
<chart-legend></chart-legend>
<chart-x-axis></chart-x-axis>
<chart-y-axis></chart-y-axis>
<chart-point></chart-point>
<chart-line></chart-line>
<chart-data-zoom></chart-data-zoom>
</el-tab-pane>
</el-tabs>
</div>
<div class="main_chart">
<el-tabs v-model="chartName" type="card">
<el-tab-pane label="折线图" name="1">
<div class="main_chartList"></div>
</el-tab-pane>
<el-tab-pane label="柱状图" name="2">
<div class="main_chartList"></div>
</el-tab-pane>
<el-tab-pane label="饼图" name="3">
<div class="main_chartList"></div>
</el-tab-pane>
<el-tab-pane label="散点图" name="4">
<div class="main_chartList"></div>
</el-tab-pane>
<el-tab-pane label="其他" name="5">
<div class="main_chartList"></div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<script>
import ChartDataZoom from "./chartConfg/chartDataZoom";
import ChartTitle from "./chartConfg/chartTitle";
import ChartLegend from "./chartConfg/chartLegend";
import ChartXAxis from "./chartConfg/chartXAxis";
import ChartYAxis from "./chartConfg/chartYAxis";
import ChartPoint from "./chartConfg/chartPoint";
import ChartLine from "./chartConfg/chartLine";
export default {
name: "chartedit",
components: {ChartLine, ChartPoint, ChartYAxis, ChartXAxis, ChartLegend, ChartTitle, ChartDataZoom},
data(){
return{
activeName:"2",
chartName:"1",
}
},
mounted() {
},
methods:{
}
}
</script>
<style scoped>
.right_title{
line-height: 40px;
}
.right_main{
overflow-y: auto;
border: 1px #cccccc solid;
height: calc(100vh - 139px);
display: flex;
flex-direction: column;
}
.main_edit{
margin: 20px 10px 10px 10px;
flex: 1;
/*border-left: 1px solid #E4E7ED;*/
/*border-right: 1px solid #E4E7ED;*/
/*border-bottom: 1px solid #E4E7ED;*/
}
.edit_detail{
height: 100%;
}
.main_chart{
margin: 10px;
}
.main_chartList{
height: 400px;
}
/deep/ .el-collapse-item__arrow{
display: none !important;
}
/deep/ .el-tabs__header{
margin: 0;
}
/deep/ .el-tabs__content{
border-bottom: 1px solid #E4E7ED;
border-right: 1px solid #E4E7ED;
border-left: 1px solid #E4E7ED;
}
/deep/ .el-collapse-item__header{
height: 40px;
line-height: 40px;
}
.element-config{
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
web/src/main.js
View file @ 78177e11
......@@ -8,6 +8,7 @@ import './assets/iconfont/iconfont.css'
import './assets/iconfont/iconfont.js'
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('@/utils/static')
mockXHR()
......
web/src/store/modules/charts.js 0 → 100644
View file @ 78177e11
const state = () => ({
chartSettingsTitle: {
text: 'Initial Chart Title', // 添加初始标题
top: 'top',
left: 'left',
show: true,
textStyle:{
color:'#333',
fontWeight: 'bolder' ,
fontSize: 18 ,
}
},
chartSettingsLegend: {
top: 'top',
left: 'center',
show: true,
type:'plain',
orient:"horizontal",
textStyle:{
color:'#333',
fontWeight: 'normal',
fontSize: 12 ,
}
},
chartSettingsXAxis: {
show: true,
type: 'category',
position:"bottom",
splitLine:{
show:true,
},
axisLine:{
show:true,
lineStyle:{
type:"solid",
width:1,
color:"#000",
}
},
axisLabel:{
show:true,
rotate:0,
color:"#000",
fontWeight:"normal",
fontSize:12,
},
name:'',
nameLocation:"center",
nameTextStyle: {
color: '#000', // 标题文本颜色
fontSize: 14, // 标题文本字体大小
fontWeight: 'normal' // 标题文本粗细
},
nameGap:15
},
chartSettingsYAxis: {
show: true,
type: 'value',
position:"left",
splitLine:{
show:true,
},
axisLine:{
show:true,
lineStyle:{
type:"solid",
width:1,
color:"#000",
}
},
axisLabel:{
show:true,
rotate:0,
color:"#000",
fontWeight:"normal",
fontSize:12,
},
name:'',
nameLocation:"center",
nameTextStyle: {
color: '#000', // 标题文本颜色
fontSize: 14, // 标题文本字体大小
fontWeight: 'normal' // 标题文本粗细
},
nameGap:15
},
chartSettingsSeries:{
showPoint:false,
symbol: 'circle', // 数据点的符号为圆
symbolSize: 8, // 数据点符号的大小
itemStyle: {
color: '#fff', // 数据点符号的填充颜色
borderColor: 'rgb(55, 124, 255)', // 数据点符号的边框颜色
borderWidth: 2 // 数据点符号的边框宽度
},
smooth:true,
lineStyle:{
color:"rgb(55, 124, 255)",
width:2,
}
},
chartSettingsDataZoom: [
{
show: true,
type: 'inside', // 内置区域缩放
xAxisIndex: 0, // 配置X轴索引
start: 0, // 起始百分比
end: 100 // 结束百分比
},
{
show: true,
type: 'inside', // 内置区域缩放
yAxisIndex: 0, // 配置Y轴索引
start: 0, // 起始百分比
end: 100 // 结束百分比
},
{
show: true,
type: 'slider', // 数据区域缩放类型为滑动条
showDataShadow: 'auto', // 自动显示数据阴影效果
bottom: 10, // 距离底部的距离
start: 0, // 初始起始百分比
end: 100 // 初始结束百分比
}
]
});
const getters = {
chartSettingsTitle: (state) => state.chartSettingsTitle,
chartSettingsLegend: (state) => state.chartSettingsLegend,
chartSettingsXAxis:(state) => state.chartSettingsXAxis,
chartSettingsYAxis:(state) => state.chartSettingsYAxis,
chartSettingsSeries:(state) => state.chartSettingsSeries,
chartSettingsDataZoom:(state) => state.chartSettingsDataZoom,
}
const mutations ={
updateChartSettingsTitle(state, data) {
state.chartSettingsTitle = data;
},
updateChartSettingsLegend(state, data) {
state.chartSettingsLegend = data;
},
updateChartSettingXAxis(state, data) {
state.chartSettingsXAxis = data;
},
updateChartSettingYAxis(state, data) {
state.chartSettingsYAxis = data;
},
updateChartSettingsSeries(state, data) {
state.chartSettingsSeries = data;
},
updateChartSettingsDataZoom(state, data) {
state.chartSettingsDataZoom = data;
},
}
const actions={
}
export default { state, getters, mutations, actions };
web/src/views/data/components/project.bk.vue 0 → 100644
View file @ 78177e11
<template>
<div class="index-container" style="display: flex;
padding-top: 20px;
justify-content: center;
overflow: scroll;
position: relative;
background: #fbfbfb;">
<div class="project" style="position:absolute">
<div class="head">
<div class="title">分析项目</div>
<div class="btn" @click="goCreate"><el-button>新建分析项目</el-button></div>
</div>
<div class="pro" v-for="item in projectList" >
<div class="entry" @click="showData(item)">
<div class="p-icon">
<img src="@/assets/img/project.png"/>
<div>项目</div>
</div>
<div class="p-content">
<div class="title"> {{item.name}}</div>
<div class="body">
使用的数据： {{item.fileName}}
</div>
<div class="footer">
{{item.updateTime}}
</div>
</div>
</div>
</div>
</div>
<el-dialog
title="创建分析项目"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<div style="margin:8px"><span>输入项目名称</span></div>
<el-input :style="{'width': '60%'}" v-model="projectName" placeholder="请输入内容"></el-input>
<div style="margin:8px"><span>选择分析的数据文件</span></div>
<el-select v-model="chooseFile" clearable placeholder="请选择">
<el-option
v-for="item in fileList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="createProject">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getProject, getFileList, createProject } from '@/api/data'
export default {
name: 'project.bk',
data() {
return {
dialogVisible: false,
chooseFile: '',
projectName: '',
projectList: [
// {
// "id": "123",
// "name": "人口分析",
// "fId": "124",
// "fileName": "人口.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// },{
// "id": "123",
// "name": "国民经济分析",
// "fId": "125",
// "fileName": "国民生产总值.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// },
// {
// "id": "124",
// "name": "GDP",
// "fId": "126",
// "fileName": "GDP.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// }
],
fileList: []
}
},
mounted() {
this.initProject();
this.initFileList();
},
methods: {
initFileList() {
getFileList().then(res => {
console.log(res)
this.fileList = res.data;
}).catch(err => {
console.log(err)
})
},
initProject() {
getProject().then(res => {
this.projectList = res.data
console.log(res);
}).catch(err=>{
console.log(err)
})
},
showData(row) {
console.log(row)
this.$router.push({
name: "analysis",
query: row
})
},
goCreate() {
this.dialogVisible = true;
},
createProject() {
if(this.chooseFile == '') {
return;
}
if(this.projectName == '') {
return;
}
let params = {
fId: this.chooseFile,
name: this.projectName
}
createProject(params).then(res => {
console.log(res)
this.initProject();
this.dialogVisible = false;
}).catch(err=> {
console.log(err);
this.dialogVisible = false;
})
}
}
}
</script>
<style scoped>
.index-container {
height: 100%;
}
.proName:hover {
cursor: pointer;
color: rgb(255, 121, 11);
}
.project {
width:80%;
background-color:white;
}
.project .head {
width: 100%;
height: 50px;
line-height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #ebebeb;
}
.project .head .title {
width: 300px;
margin-left: 30px;
font-weight: 600;
font-size: 18px;
}
.project .head .btn {
margin-right: 20px;
}
.project .pro .entry {
height: 150px;
margin: 20px;
border-radius: 3px;
display: flex;
border-bottom: 1px solid rgb(236, 236, 236);
}
.project .pro .entry:hover {
background: rgb(238, 238, 238);
cursor: pointer;
}
.project .pro .entry .p-icon {
width: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.project .pro .entry .p-icon img {
width: 60px;
height: 47px;
}
.project .pro .entry .p-content {
flex:1;
padding: 10px 40px;
}
.project .pro .entry .p-content .title{
height: 50px;
line-height: 50px;
font-size: 16px;
font-weight: 600;
}
.project .pro .entry .p-content .body{
height: 50px;
line-height: 50px;
}
.project .pro .entry .p-content .footer{
height: 50px;
line-height: 50px;
text-align: right;
}
</style>
web/src/views/data/components/project.vue
View file @ 78177e11
<template>
<div class="index-container" style="display: flex;
padding-top: 20px;
<div class="index-container" style="display: flex; padding-top: 20px;
justify-content: center;
overflow: scroll;
position: relative;
background: #fbfbfb;">
<div class="project" style="position:absolute">
<div class="head">
<div class="title">分析项目</div>
<div class="btn" @click="goCreate"><el-button>新建分析项目</el-button></div>
</div>
<div class="pro" v-for="item in projectList" >
<div class="entry" @click="showData(item)">
<div class="p-icon">
<img src="@/assets/img/project.png"/>
<div>项目</div>
</div>
<div class="p-content">
<div class="title"> {{item.name}}</div>
<div class="body">
使用的数据： {{item.fileName}}
</div>
<div class="footer">
{{item.updateTime}}
</div>
</div>
</div>
</div>
</div>
<el-dialog
title="创建分析项目"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<div style="margin:8px"><span>输入项目名称</span></div>
<el-input :style="{'width': '60%'}" v-model="projectName" placeholder="请输入内容"></el-input>
<div style="margin:8px"><span>选择分析的数据文件</span></div>
<el-select v-model="chooseFile" clearable placeholder="请选择">
<el-option
v-for="item in fileList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="createProject">确 定</el-button>
</span>
</el-dialog>
<div ref="chart" class="chart project" style="min-height: 800px;"></div>
<chartedit></chartedit>
</div>
</template>
<script>
import { getProject, getFileList, createProject } from '@/api/data'
import { mapState } from 'vuex';
import { getProject, getFileList, createProject } from '@/api/data'
import * as echarts from 'echarts';
import Chartedit from "../../../chartcustomization/chartedit";
export default {
name: 'project',
components: {Chartedit},
data() {
return {
dialogVisible: false,
chooseFile: '',
projectName: '',
projectList: [
// {
// "id": "123",
// "name": "人口分析",
// "fId": "124",
// "fileName": "人口.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// },{
// "id": "123",
// "name": "国民经济分析",
// "fId": "125",
// "fileName": "国民生产总值.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// },
// {
// "id": "124",
// "name": "GDP",
// "fId": "126",
// "fileName": "GDP.csv",
// "type": "csv",
// "updateTime": "2023-05-22 10:10:10"
// }
],
fileList: []
myChart:null,
}
},
mounted() {
this.initProject();
this.initFileList();
mounted() {
this.init()
},
methods: {
initFileList() {
getFileList().then(res => {
console.log(res)
this.fileList = res.data;
}).catch(err => {
console.log(err)
})
watch:{
chartSettingsTitle: {
deep: true,
handler: 'init' // 直接将方法名指定为 handler
},
initProject() {
getProject().then(res => {
this.projectList = res.data
console.log(res);
}).catch(err=>{
console.log(err)
})
chartSettingsLegend: {
deep: true,
handler: 'init' // 直接将方法名指定为 handler
},
showData(row) {
console.log(row)
this.$router.push({
name: "analysis",
query: row
})
chartSettingsXAxis:{
deep: true,
handler: 'init' // 直接将方法名指定为 handler
},
goCreate() {
this.dialogVisible = true;
chartSettingsSeries:{
deep: true,
handler: 'init' // 直接将方法名指定为 handler
},
createProject() {
if(this.chooseFile == '') {
return;
chartSettingsDataZoom:{
deep: true,
handler: 'init' // 直接将方法名指定为 handler
},
},
computed: {
...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom']),
},
methods: {
addPointSetting(series){
for (var i = 0; i < series.length; i++) {
for (var key in this.chartSettingsSeries) {
series[i][key] = this.chartSettingsSeries[key];
}
if(this.projectName == '') {
return;
}
let params = {
fId: this.chooseFile,
name: this.projectName
},
addLineSetting(series){
for (var i = 0; i < series.length; i++) {
for (var key in this.chartSettingsSeries) {
if(key=="smooth" || key == "lineStyle"){
series[i][key] = this.chartSettingsSeries[key];
}
createProject(params).then(res => {
console.log(res)
this.initProject();
this.dialogVisible = false;
}).catch(err=> {
console.log(err);
this.dialogVisible = false;
})
}
}
},
init(){
let that = this
this.myChart = echarts.init(this.$refs.chart)
const setOption={};
setOption.title = this.chartSettingsTitle
setOption.legend = this.chartSettingsLegend
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
setOption.xAxis.data=['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
setOption.dataZoom = this.chartSettingsDataZoom
setOption.series= [
{
name: 'Email',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
if(this.chartSettingsSeries.showPoint==true){
this.addPointSetting(setOption.series)
}else {
for(var i in setOption.series){
setOption.series[i].symbol = "none"
}
}
this.addLineSetting(setOption.series)
this.myChart.setOption(setOption);
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment