Skip to content

Z
ZZDataAnalysis
Commit 0e80e9d3 authored by liushuai's avatar liushuai
Browse files
Options

更新图表类型切换

parent 707bd498
Show whitespace changes
Inline Side-by-side
Showing with 629 additions and 112 deletions
web/src/store/modules/charts.js
View file @ 0e80e9d3
...@@ -85,17 +85,19 @@ const state = () => ({ ...@@ -85,17 +85,19 @@ const state = () => ({
nameGap:15 nameGap:15
}, },
chartSettingsSeries:{ chartSettingsSeries:{
showPoint:false, showPoint : false,
symbol: 'circle', // 数据点的符号为圆 symbol: 'circle', // 数据点的符号为圆
symbolSize: 8, // 数据点符号的大小 symbolSize: 8, // 数据点符号的大小
itemStyle: { itemStyle: {
color: '#fff', // 数据点符号的填充颜色 // color: '#fff', // 数据点符号的填充颜色
// borderColor: 'rgb(55, 124, 255)', // 数据点符号的边框颜色 // borderColor: 'rgb(55, 124, 255)', // 数据点符号的边框颜色
borderWidth: 2 // 数据点符号的边框宽度 borderWidth: 2 // 数据点符号的边框宽度
}, },
barGap:30,
barWidth:40,
smooth:true, smooth:true,
lineStyle:{ lineStyle:{
// color:"rgb(55, 124, 255)", // color:"auto",
width:2, width:2,
} }
}, },
...@@ -117,6 +119,7 @@ const state = () => ({ ...@@ -117,6 +119,7 @@ const state = () => ({
{ {
show: true, show: true,
type: 'slider', // 数据区域缩放类型为滑动条 type: 'slider', // 数据区域缩放类型为滑动条
scale: true, //自适应
showDataShadow: 'auto', // 自动显示数据阴影效果 showDataShadow: 'auto', // 自动显示数据阴影效果
bottom: 10, // 距离底部的距离 bottom: 10, // 距离底部的距离
start: 0, // 初始起始百分比 start: 0, // 初始起始百分比
...@@ -124,9 +127,12 @@ const state = () => ({ ...@@ -124,9 +127,12 @@ const state = () => ({
} }
], ],
dataSet:{ dataSet:{
type:'line',
fixed:'2',
xAxis:{}, xAxis:{},
yAxis:[], yAxis:[],
} },
}); });
const getters = { const getters = {
chartSettingsTitle: (state) => state.chartSettingsTitle, chartSettingsTitle: (state) => state.chartSettingsTitle,
......
web/src/views/chartcustomization/chartConfig/chartBarConfig.vue 0 → 100644
View file @ 0e80e9d3
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="barConfig">
<div slot="title" class="collapse-item">
条块
</div>
<div class="element-config">
宽度
<el-slider style="width: 80px" v-model="chartSettingsSeries.barWidth"></el-slider>
</div>
<!-- <div class="element-config">-->
<!-- 间距-->
<!-- <el-slider style="width: 80px" v-model="chartSettingsSeries.barGap"></el-slider>-->
<!-- </div>-->
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: "chartBarConfig",
computed: {
...mapState('charts',['chartSettingsSeries'])
},
data() {
return {
activeNames:["barConfig"],
}
},
// watch:{
// 'chartSettingsSeries'
// }
}
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 15px;
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/views/chartcustomization/chartConfg/chartDataZoom.vue → web/src/views/chartcustomization/chartConfig/chartDataZoom.vue
View file @ 0e80e9d3
...@@ -70,8 +70,8 @@ ...@@ -70,8 +70,8 @@
font-size: 13px; font-size: 13px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-left: 20px; margin-left: 15px;
margin-right: 20px; margin-right: 15px;
align-items: center; align-items: center;
} }
.element-config{ .element-config{
......
web/src/views/chartcustomization/chartConfg/chartLegend.vue → web/src/views/chartcustomization/chartConfig/chartLegend.vue
View file @ 0e80e9d3
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</div> </div>
<div class="element-config"> <div class="element-config">
位置 位置
<el-select v-model="position" placeholder="请选择"> <el-select style="width: 125px !important;" v-model="position" placeholder="请选择">
<el-option <el-option
v-for="items in positionOptions" v-for="items in positionOptions"
:key="items.value" :key="items.value"
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</div> </div>
<div class="element-config"> <div class="element-config">
布局 布局
<el-select v-model="chartSettingsLegend.type" placeholder="请选择"> <el-select style="width: 125px !important;" v-model="chartSettingsLegend.type" placeholder="请选择">
<el-option <el-option
v-for="items in typeOptions" v-for="items in typeOptions"
:key="items.value" :key="items.value"
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</div> </div>
<div class="element-config"> <div class="element-config">
方向 方向
<el-select v-model="chartSettingsLegend.orient" placeholder="请选择"> <el-select style="width: 125px !important;" v-model="chartSettingsLegend.orient" placeholder="请选择">
<el-option <el-option
v-for="items in orientOptions" v-for="items in orientOptions"
:key="items.value" :key="items.value"
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
line-height: 40px; line-height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 20px; margin: 0 15px;
align-items: center; align-items: center;
} }
.element-config{ .element-config{
......
web/src/views/chartcustomization/chartConfg/chartLine.vue → web/src/views/chartcustomization/chartConfig/chartLine.vue
View file @ 0e80e9d3
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
line-height: 40px; line-height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 20px; margin: 0 15px;
align-items: center; align-items: center;
} }
.element-config{ .element-config{
......
web/src/views/chartcustomization/chartConfg/chartPoint.vue → web/src/views/chartcustomization/chartConfig/chartPoint.vue
View file @ 0e80e9d3
...@@ -2,13 +2,16 @@ ...@@ -2,13 +2,16 @@
<div class="setting"> <div class="setting">
<el-collapse v-model="activeNames" > <el-collapse v-model="activeNames" >
<el-collapse-item name="point"> <el-collapse-item name="point">
<div slot="title" class="collapse-item"> <div slot="title" class="collapse-item" >
点 点
<el-switch <el-switch v-if="dataSet.type=='line'" ref="switch"
v-model="chartSettingsSeries.showPoint" v-model="chartSettingsSeries.showPoint"
active-color="#13ce66"> style="pointer-events: none;"
active-color="#13ce66"
>
</el-switch> </el-switch>
</div> </div>
<div class="element-config"> <div class="element-config">
类型 类型
<el-select style="width: 120px !important;" v-model="chartSettingsSeries.symbol" placeholder="请选择"> <el-select style="width: 120px !important;" v-model="chartSettingsSeries.symbol" placeholder="请选择">
...@@ -42,20 +45,53 @@ ...@@ -42,20 +45,53 @@
export default { export default {
name: "chartPoint", name: "chartPoint",
computed: { computed: {
...mapState('charts',['chartSettingsSeries']) ...mapState('charts',['chartSettingsSeries','dataSet'])
},
methods:{
change(){
// 获取 el-switch 的实例
const elSwitch = this.$refs.switch;
// 手动触发 el-switch 的点击事件
elSwitch.$el.click();
},
changeShow(newShowValue) {
this.chartSettingsSeries.showPoint = newShowValue;
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
},
}, },
watch:{ watch:{
'show':function (newVal,oldVal) {
// console.log(this.show)
// if(newVal==true){
// this.activeNames=["point"]
// }else {
// this.activeNames=[]
// }
},
'activeNames':function (newVal,oldVal) { 'activeNames':function (newVal,oldVal) {
console.log(this.activeNames)
if(this.activeNames.length>0){ if(this.activeNames.length>0){
this.chartSettingsSeries.showPoint=true this.chartSettingsSeries.showPoint=true
}else { }else {
this.chartSettingsSeries.showPoint=false this.chartSettingsSeries.showPoint=false
} }
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries); this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
},
'chartSettingsSeries':{
deep: true,
handler: function (newVal,oldVal) {
console.log(this.chartSettingsSeries.showPoint)
if(this.chartSettingsSeries.showPoint==true){
this.activeNames=["point"]
}else {
this.activeNames=[]
}
}
} }
}, },
mounted() { mounted() {
if(this.show==true){
if(this.chartSettingsSeries.showPoint==true){
this.activeNames=["point"] this.activeNames=["point"]
}else { }else {
this.activeNames=[] this.activeNames=[]
...@@ -63,15 +99,16 @@ ...@@ -63,15 +99,16 @@
}, },
data() { data() {
return { return {
show:false,
activeNames:[], activeNames:[],
symbolOptions:[ symbolOptions:[
{label:"空心圆圈",value:"circle"}, {label:"圆圈",value:"circle"},
{label:"空心方块",value:"rect"}, {label:"方块",value:"rect"},
{label:"圆角方块",value:"roundRect"}, {label:"圆角方块",value:"roundRect"},
{label:"空心三角",value:"triangle"}, {label:"三角",value:"triangle"},
{label:"空心菱形",value:"diamond"}, {label:"菱形",value:"diamond"},
{label:"空心图钉",value:"pin"}, {label:"图钉",value:"pin"},
{label:"空心箭头",value:"arrow"}, {label:"箭头",value:"arrow"},
], ],
symbolSizeOptions:[ symbolSizeOptions:[
{label:1,value:1}, {label:1,value:1},
...@@ -108,7 +145,7 @@ ...@@ -108,7 +145,7 @@
line-height: 40px; line-height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 20px; margin: 0 15px;
align-items: center; align-items: center;
} }
.element-config{ .element-config{
......
web/src/views/chartcustomization/chartConfg/chartTitle.vue → web/src/views/chartcustomization/chartConfig/chartTitle.vue
View file @ 0e80e9d3
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
<div class="element-config"> <div class="element-config">
位置 位置
<el-select v-model="position" placeholder="请选择"> <el-select style="width: 125px !important;" v-model="position" placeholder="请选择">
<el-option <el-option
v-for="items in positionOptions" v-for="items in positionOptions"
:key="items.value" :key="items.value"
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
line-height: 40px; line-height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 20px; margin: 0 15px;
align-items: center; align-items: center;
} }
.element-config{ .element-config{
......
web/src/views/chartcustomization/chartConfg/chartXAxis.vue → web/src/views/chartcustomization/chartConfig/chartXAxis.vue
View file @ 0e80e9d3
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
</div> </div>
<div v-show="axisShow==true"> <div v-show="axisShow==true">
<div class="element-config"> <div class="element-config">
<el-input size="small" v-model="name" placeholder="请输入坐标轴标题"></el-input> <el-input size="small" style="width: 120px" v-model="name" placeholder="请输入坐标轴标题"></el-input>
</div> </div>
<div class="element-config"> <div class="element-config">
字体 字体
...@@ -307,7 +307,7 @@ ...@@ -307,7 +307,7 @@
line-height: 40px; line-height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 20px; margin: 0 15px;
align-items: center; align-items: center;
} }
.element-config{ .element-config{
......
web/src/views/chartcustomization/chartConfg/chartYAxis.vue → web/src/views/chartcustomization/chartConfig/chartYAxis.vue
View file @ 0e80e9d3
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
</div> </div>
<div v-show="axisShow==true"> <div v-show="axisShow==true">
<div class="element-config"> <div class="element-config">
<el-input size="small" v-model="name" placeholder="请输入坐标轴标题"></el-input> <el-input size="small" style="width: 120px" v-model="name" placeholder="请输入坐标轴标题"></el-input>
</div> </div>
<div class="element-config"> <div class="element-config">
字体 字体
...@@ -308,7 +308,7 @@ ...@@ -308,7 +308,7 @@
line-height: 40px; line-height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 20px; margin: 0 15px;
align-items: center; align-items: center;
} }
.element-config{ .element-config{
......
web/src/views/chartcustomization/chartdataset.vue
View file @ 0e80e9d3
<template> <template>
<div style="width: 15%"> <div style="width: 15%">
<div style="margin:8px"><span>选择分析的数据文件</span></div> <div class="title" @click="dialogVisible=true">
<el-select v-model="chooseFile" @change="getCSVData" clearable placeholder="请选择"> <template v-if="dataset!=''">
<el-option {{dataset}}
v-for="item in fileList" </template>
:key="item.id" <template v-else>
:label="item.name" <span>选择数据集</span>
:value="item.id"> </template>
</el-option> <i class="el-icon-edit-outline"></i>
</el-select> </div>
<!-- <div style="margin:8px"><span>选择分析的数据文件</span></div>-->
<!-- <el-select v-model="chooseFile" @change="getCSVData" clearable placeholder="请选择">-->
<!-- <el-option-->
<!-- v-for="item in fileList"-->
<!-- :key="item.id"-->
<!-- :label="item.name"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<draggable <draggable
v-on:end="dragWidget($event)" v-on:end="dragWidget($event)"
...@@ -27,6 +37,24 @@ ...@@ -27,6 +37,24 @@
<!-- </template>--> <!-- </template>-->
</div> </div>
<el-dialog
title="创建分析项目"
:visible.sync="dialogVisible"
width="30%">
<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> </div>
</template> </template>
...@@ -42,10 +70,12 @@ ...@@ -42,10 +70,12 @@
data() { data() {
return { return {
fileList:[], fileList:[],
chooseFile:'', chooseFile:'请选择数据集',
headerList:[], headerList:[],
dataList:[], dataList:[],
data:[] dataset:'',
data:[],
dialogVisible:false
} }
}, },
computed: { computed: {
...@@ -72,6 +102,10 @@ ...@@ -72,6 +102,10 @@
}, },
methods:{ methods:{
createProject(){
this.getCSVData()
this.dialogVisible=false
},
initFileList(){ initFileList(){
getFileList().then(res => { getFileList().then(res => {
this.fileList = res.data; this.fileList = res.data;
...@@ -84,6 +118,7 @@ ...@@ -84,6 +118,7 @@
if(this.chooseFile!=""){ if(this.chooseFile!=""){
let that = this let that = this
let file = this.fileList.filter(d=>{return d.id == that.chooseFile})[0] let file = this.fileList.filter(d=>{return d.id == that.chooseFile})[0]
this.dataset = file.name
let data ={ let data ={
"fId":file.id, "fId":file.id,
"name":file.name "name":file.name
...@@ -141,14 +176,27 @@ ...@@ -141,14 +176,27 @@
</script> </script>
<style scoped> <style scoped>
.data-item{ .title{
display: flex;
justify-content: space-between;
align-items: center;
line-height: 50px;
margin: 0 20px;
cursor: pointer;
color: #2c3e50;
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #eef1f5;
}
.data-item{
padding: 0 20px; padding: 0 20px;
font-size: 12px; font-size: 12px;
cursor: move; cursor: move;
color: #6a6f77; color: #6a6f77;
line-height: 20px; line-height: 30px;
} }
.data-item:hover{ .data-item:hover{
background: #ccc; background: #ccc;
} font-weight: bold;
}
</style> </style>
web/src/views/chartcustomization/chartedit.vue
View file @ 0e80e9d3
<template> <template>
<div style="width: 15%"> <div style="width: 260px">
<!-- <div class="right_title">表单选择与配置</div>--> <!-- <div class="right_title">表单选择与配置</div>-->
<div class="right_main"> <div class="right_main">
<div class="main_edit" > <div class="main_edit" >
<el-tabs v-model="activeName" type="card" > <el-tabs class="tabs" v-model="activeName" type="card" >
<el-tab-pane label="元素配置" name="2" v-show="dataSet.yAxis.length>0"> <el-tab-pane label="图表配置" name="1">
<datacleaning></datacleaning>
<changechartstype></changechartstype>
</el-tab-pane>
<el-tab-pane label="元素配置" name="2">
<chart-title></chart-title> <chart-title></chart-title>
<chart-legend></chart-legend> <chart-legend></chart-legend>
<template v-if="dataSet.type =='line' || dataSet.type=='area'">
<chart-x-axis></chart-x-axis> <chart-x-axis></chart-x-axis>
<chart-y-axis></chart-y-axis> <chart-y-axis></chart-y-axis>
<!-- <chart-point></chart-point>--> <chart-point></chart-point>
<chart-line></chart-line> <chart-line></chart-line>
<chart-data-zoom></chart-data-zoom> <chart-data-zoom></chart-data-zoom>
</template>
<template v-else-if="dataSet.type =='histogram_01' ||dataSet.type=='histogram_02'">
<chart-x-axis></chart-x-axis>
<chart-y-axis></chart-y-axis>
<chart-bar-config></chart-bar-config>
<chart-data-zoom></chart-data-zoom>
</template>
<template v-else-if="dataSet.type =='scatterplot'">
<chart-x-axis></chart-x-axis>
<chart-y-axis></chart-y-axis>
<chart-point></chart-point>
<chart-data-zoom></chart-data-zoom>
</template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="main_chart" v-show="dataSet.yAxis.length>0"> <!-- <div class="main_chart" v-show="dataSet.yAxis.length>0">-->
<el-tabs v-model="chartName" type="card"> <!-- <el-tabs v-model="chartName" type="card">-->
<el-tab-pane label="折线图" name="1"> <!-- <el-tab-pane label="折线图" name="1">-->
<div class="main_chartList"></div> <!-- <div class="main_chartList"></div>-->
</el-tab-pane> <!-- </el-tab-pane>-->
<el-tab-pane label="柱状图" name="2"> <!-- <el-tab-pane label="柱状图" name="2">-->
<div class="main_chartList"></div> <!-- <div class="main_chartList"></div>-->
</el-tab-pane> <!-- </el-tab-pane>-->
<el-tab-pane label="饼图" name="3"> <!-- <el-tab-pane label="饼图" name="3">-->
<div class="main_chartList"></div> <!-- <div class="main_chartList"></div>-->
</el-tab-pane> <!-- </el-tab-pane>-->
<el-tab-pane label="散点图" name="4"> <!-- <el-tab-pane label="散点图" name="4">-->
<div class="main_chartList"></div> <!-- <div class="main_chartList"></div>-->
</el-tab-pane> <!-- </el-tab-pane>-->
<el-tab-pane label="其他" name="5"> <!-- <el-tab-pane label="其他" name="5">-->
<div class="main_chartList"></div> <!-- <div class="main_chartList"></div>-->
</el-tab-pane> <!-- </el-tab-pane>-->
</el-tabs> <!-- </el-tabs>-->
</div > <!-- </div >-->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ChartDataZoom from "./chartConfg/chartDataZoom.vue"; import ChartDataZoom from "./chartConfig/chartDataZoom.vue";
import ChartTitle from "./chartConfg/chartTitle.vue"; import ChartTitle from "./chartConfig/chartTitle.vue";
import ChartLegend from "./chartConfg/chartLegend.vue"; import ChartLegend from "./chartConfig/chartLegend.vue";
import ChartXAxis from "./chartConfg/chartXAxis.vue"; import ChartXAxis from "./chartConfig/chartXAxis.vue";
import ChartYAxis from "./chartConfg/chartYAxis.vue"; import ChartYAxis from "./chartConfig/chartYAxis.vue";
import ChartPoint from "./chartConfg/chartPoint.vue"; import ChartPoint from "./chartConfig/chartPoint.vue";
import ChartLine from "./chartConfg/chartLine.vue"; import ChartLine from "./chartConfig/chartLine.vue";
import {mapState} from "vuex"; import {mapState} from "vuex";
import Datacleaning from "./showConfig/datacleaning";
import Changechartstype from "./showConfig/changechartstype";
import ChartBarConfig from "./chartConfig/chartBarConfig";
export default { export default {
name: "chartedit", name: "chartedit",
components: {ChartLine, ChartPoint, ChartYAxis, ChartXAxis, ChartLegend, ChartTitle, ChartDataZoom}, components: {
ChartBarConfig,
Changechartstype,
Datacleaning, ChartLine, ChartPoint, ChartYAxis, ChartXAxis, ChartLegend, ChartTitle, ChartDataZoom},
data(){ data(){
return{ return{
activeName:"2", activeName:"1",
chartName:"1", chartName:"1",
} }
}, },
...@@ -118,4 +144,14 @@ ...@@ -118,4 +144,14 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.tabs{
width: 100%;
}
/deep/ .tabs .el-tabs__nav{
width: 100%;
}
/deep/ .tabs .el-tabs__item{
width: 50%;
text-align: center;
}
</style> </style>
web/src/views/chartcustomization/components/chart.vue
View file @ 0e80e9d3
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
}, },
watch:{ watch:{
dataSet: { dataSet: {
deep: true, deep: true,
handler: 'init' // 直接将方法名指定为 handler handler: 'init' // 直接将方法名指定为 handler
...@@ -73,29 +74,51 @@ ...@@ -73,29 +74,51 @@
}, },
}, },
computed: { computed: {
...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom','dataSet']), ...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom','dataSet','fixed']),
}, },
methods: { methods: {
upDateMyChart(){ createChart(setOption){
if(this.myChart==null){ if(this.dataSet.type =="line"){
this.init() this.chartSettingsXAxis.type = "category"
} this.chartSettingsYAxis.type = "value"
let that = this
const setOption={}; this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
setOption.title = this.chartSettingsTitle
setOption.legend = this.chartSettingsLegend
setOption.xAxis = this.chartSettingsXAxis setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis setOption.yAxis = this.chartSettingsYAxis
setOption.xAxis.data=this.dataSet.xAxis.list // setOption.xAxis.data=this.dataSet.xAxis.list
// setOption.xAxis.data=['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
setOption.dataZoom = this.chartSettingsDataZoom setOption.dataZoom = this.chartSettingsDataZoom
for(var i in this.dataSet.yAxis){ for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'line' this.dataSet.yAxis[i].type = 'line'
delete this.dataSet.yAxis[i].areaStyle;
}
setOption.series = []
setOption.series = this.dataSet.yAxis
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)
}else if(this.dataSet.type=="area"){
this.chartSettingsXAxis.type = "category"
this.chartSettingsYAxis.type = "value"
this.chartSettingsSeries.showPoint = false
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
// setOption.xAxis.data=this.dataSet.xAxis.list
setOption.dataZoom = this.chartSettingsDataZoom
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'line'
this.dataSet.yAxis[i].areaStyle ={}
}
setOption.series = []
setOption.series = this.dataSet.yAxis setOption.series = this.dataSet.yAxis
if(this.chartSettingsSeries.showPoint==true){ if(this.chartSettingsSeries.showPoint==true){
this.addPointSetting(setOption.series) this.addPointSetting(setOption.series)
...@@ -105,6 +128,100 @@ ...@@ -105,6 +128,100 @@
} }
} }
this.addLineSetting(setOption.series) this.addLineSetting(setOption.series)
} else if(this.dataSet.type =="histogram_01"){
this.chartSettingsXAxis.type = "category"
this.chartSettingsYAxis.type = "value"
// this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
// this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
// setOption.xAxis.data=this.dataSet.xAxis.list
setOption.dataZoom = this.chartSettingsDataZoom
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'bar'
}
setOption.series = []
setOption.series = this.dataSet.yAxis
this.addLineSetting(setOption.series)
}else if(this.dataSet.type =="histogram_02"){
console.log("histogram_02")
this.chartSettingsXAxis.type = "value"
this.chartSettingsYAxis.type = "category"
// this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
// this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
// setOption.xAxis.data=this.dataSet.xAxis.list
setOption.dataZoom = this.chartSettingsDataZoom
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'bar'
this.dataSet.yAxis[i].barGap = this.chartSettingsSeries.barGap + "%"
this.dataSet.yAxis[i].barWidth = this.chartSettingsSeries.barWidth + "%"
delete this.dataSet.yAxis[i].areaStyle;
}
setOption.series = []
setOption.series = this.dataSet.yAxis
}else if(this.dataSet.type=="scatterplot"){
this.chartSettingsXAxis.type = "category"
this.chartSettingsYAxis.type = "value"
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
setOption.dataZoom = this.chartSettingsDataZoom
this.chartSettingsSeries.showPoint = true
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].symbol = this.chartSettingsSeries.symbol
this.dataSet.yAxis[i].symbolSize = this.chartSettingsSeries.symbolSize
for(var j=0;j<this.dataSet.yAxis[i].list.length;j++){
this.dataSet.yAxis[i].data[j] = [j,parseFloat(this.dataSet.yAxis[i].list[j])]
}
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'scatter'
// this.dataSet.yAxis[i].data = data
}
setOption.series = []
setOption.series = this.dataSet.yAxis
// console.log( setOption.series)
}
return setOption
},
upDateMyChart(){
// console.log(this.dataSet.type)
if(this.myChart==null){
this.init()
}
let that = this
let setOption = {}
const tooltip= {
"show": true,
"trigger":"axis",
valueFormatter: (value) => parseFloat(value).toFixed(Number(that.dataSet.fixed))
}
setOption.color=['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
setOption.tooltip=tooltip
setOption.title = this.chartSettingsTitle
setOption.legend = this.chartSettingsLegend
setOption = this.createChart(setOption);
that.myChart.setOption(setOption); that.myChart.setOption(setOption);
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
...@@ -116,7 +233,7 @@ ...@@ -116,7 +233,7 @@
let that = this let that = this
const updatedList = this.dataSet.yAxis.filter(d => d.name !== item.name); const updatedList = this.dataSet.yAxis.filter(d => d.name !== item.name);
this.dataSet.yAxis= updatedList this.dataSet.yAxis= updatedList
this.$store.commit('charts/updateDataSet',this.dataSet);
}, },
addPointSetting(series){ addPointSetting(series){
for (var i = 0; i < series.length; i++) { for (var i = 0; i < series.length; i++) {
...@@ -138,6 +255,7 @@ ...@@ -138,6 +255,7 @@
if(this.myChart!=null){ if(this.myChart!=null){
this.myChart.dispose(); this.myChart.dispose();
} }
// this.dataCleaning()
this.myChart = echarts.init(this.$refs.chart) this.myChart = echarts.init(this.$refs.chart)
this.upDateMyChart() this.upDateMyChart()
} }
...@@ -157,6 +275,9 @@ ...@@ -157,6 +275,9 @@
} }
.project { .project {
display: flex;
flex-direction: column;
/*position: relative;*/
width:70%; width:70%;
background-color:white; background-color:white;
} }
...@@ -237,6 +358,9 @@ ...@@ -237,6 +358,9 @@
border: 1px dashed #d8d8d8; border: 1px dashed #d8d8d8;
} }
.chart{ .chart{
height: 80%; flex: 1;
/*position: absolute;*/
/*min-height: 50%;*/
/*height: 80%;*/
} }
</style> </style>
web/src/views/chartcustomization/showConfig/changechartstype.vue 0 → 100644
View file @ 0e80e9d3
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="type">
<div slot="title" class="collapse-item">
全部图表类型
</div>
<div class="list">
<div class="chart-item" v-for="(item,index) in list" :key="index" @click="changeChartsType(index,item.name)" >
<img :class="{ 'borders': selectedItem === index }" :src="'/static/chart/'+item.name+'.png'">
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "changechartstype",
computed: {
...mapState('charts',['dataSet'])
},
mounted() {
// this.changeChartsType(0,"line")
},
data(){
return{
activeNames:["type"],
selectedItem: null, // 用于存储当前选定的项的索引
list:[
{
name:"line",
},
{
name:"histogram_01",
},
{
name:"histogram_02",
},
{
name:"scatterplot",
},
{
name:"area",
}
]
}
},
methods:{
changeChartsType(index,name){
this.selectedItem = index; // 更新选定的项的索引
this.dataSet.type = name
this.$store.commit('charts/updateDataSet', this.dataSet);
// console.log(name)
}
}
}
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 15px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.list{
width: 212px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.chart-item {
cursor: pointer;
/*margin-left: 3px;*/
/*margin-right: 3px;*/
}
.chart-item img{
width: 64px;
height: 64px;
border: 1px solid #fff;
}
.chart-item img:hover{
background: #e9e9e9;
}
.borders{
border: 1px solid #2aa0bb !important;
}
</style>
web/src/views/chartcustomization/showConfig/datacleaning.vue 0 → 100644
View file @ 0e80e9d3
<template>
<div class="setting">
<div name="dataZoom" class="dataZoom">
<div slot="title" class="collapse-item" >
小数位数
<el-select size="mini" style="width: 80px !important;" v-model="dataSet.fixed" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: "datacleaning",
computed: {
...mapState('charts',['dataSet'])
},
watch:{
},
methods:{
},
data() {
return{
value:"2",
options:[
{
value:"0",
label:'0',
}, {
value:"1",
label:'1',
},{
value:"2",
label:'2',
},{
value:"3",
label:'3',
},{
value:"4",
label:'4',
},{
value:"5",
label:'5',
},{
value:"6",
label:'6',
},{
value:"7",
label:'7',
},{
value:"8",
label:'8',
},{
value:"9",
label:'9',
},{
value:"10",
label:'10',
},]
}
},
}
</script>
<style scoped>
.dataZoom{
flex: 1;
background: #fff;
}
.setting{
}
.collapse-item{
/*width: 100%;*/
font-weight: bold;
line-height: 40px;
font-size: 13px;
display: flex;
justify-content: space-between;
margin-left: 15px;
margin-right: 15px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
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