Skip to content

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

更新图表类型切换

parent 707bd498
Hide 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 = () => ({
nameGap:15
},
chartSettingsSeries:{
showPoint:false,
showPoint : false,
symbol: 'circle', // 数据点的符号为圆
symbolSize: 8, // 数据点符号的大小
itemStyle: {
color: '#fff', // 数据点符号的填充颜色
// color: '#fff', // 数据点符号的填充颜色
// borderColor: 'rgb(55, 124, 255)', // 数据点符号的边框颜色
borderWidth: 2 // 数据点符号的边框宽度
},
barGap:30,
barWidth:40,
smooth:true,
lineStyle:{
// color:"rgb(55, 124, 255)",
// color:"auto",
width:2,
}
},
......@@ -117,6 +119,7 @@ const state = () => ({
{
show: true,
type: 'slider', // 数据区域缩放类型为滑动条
scale: true, //自适应
showDataShadow: 'auto', // 自动显示数据阴影效果
bottom: 10, // 距离底部的距离
start: 0, // 初始起始百分比
......@@ -124,9 +127,12 @@ const state = () => ({
}
],
dataSet:{
type:'line',
fixed:'2',
xAxis:{},
yAxis:[],
}
},
});
const getters = {
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 @@
font-size: 13px;
display: flex;
justify-content: space-between;
margin-left: 20px;
margin-right: 20px;
margin-left: 15px;
margin-right: 15px;
align-items: center;
}
.element-config{
......
web/src/views/chartcustomization/chartConfg/chartLegend.vue → web/src/views/chartcustomization/chartConfig/chartLegend.vue
View file @ 0e80e9d3
......@@ -30,7 +30,7 @@
</div>
<div class="element-config">
位置
<el-select v-model="position" placeholder="请选择">
<el-select style="width: 125px !important;" v-model="position" placeholder="请选择">
<el-option
v-for="items in positionOptions"
:key="items.value"
......@@ -41,7 +41,7 @@
</div>
<div class="element-config">
布局
<el-select v-model="chartSettingsLegend.type" placeholder="请选择">
<el-select style="width: 125px !important;" v-model="chartSettingsLegend.type" placeholder="请选择">
<el-option
v-for="items in typeOptions"
:key="items.value"
......@@ -52,7 +52,7 @@
</div>
<div class="element-config">
方向
<el-select v-model="chartSettingsLegend.orient" placeholder="请选择">
<el-select style="width: 125px !important;" v-model="chartSettingsLegend.orient" placeholder="请选择">
<el-option
v-for="items in orientOptions"
:key="items.value"
......@@ -204,7 +204,7 @@
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
margin: 0 15px;
align-items: center;
}
.element-config{
......
web/src/views/chartcustomization/chartConfg/chartLine.vue → web/src/views/chartcustomization/chartConfig/chartLine.vue
View file @ 0e80e9d3
......@@ -75,7 +75,7 @@
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
margin: 0 15px;
align-items: center;
}
.element-config{
......
web/src/views/chartcustomization/chartConfg/chartPoint.vue → web/src/views/chartcustomization/chartConfig/chartPoint.vue
View file @ 0e80e9d3
......@@ -2,13 +2,16 @@
<div class="setting">
<el-collapse v-model="activeNames" >
<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"
active-color="#13ce66">
style="pointer-events: none;"
active-color="#13ce66"
>
</el-switch>
</div>
<div class="element-config">
类型
<el-select style="width: 120px !important;" v-model="chartSettingsSeries.symbol" placeholder="请选择">
......@@ -42,20 +45,53 @@
export default {
name: "chartPoint",
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:{
'show':function (newVal,oldVal) {
// console.log(this.show)
// if(newVal==true){
// this.activeNames=["point"]
// }else {
// this.activeNames=[]
// }
},
'activeNames':function (newVal,oldVal) {
console.log(this.activeNames)
if(this.activeNames.length>0){
this.chartSettingsSeries.showPoint=true
}else {
this.chartSettingsSeries.showPoint=false
}
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() {
if(this.show==true){
if(this.chartSettingsSeries.showPoint==true){
this.activeNames=["point"]
}else {
this.activeNames=[]
......@@ -63,15 +99,16 @@
},
data() {
return {
show:false,
activeNames:[],
symbolOptions:[
{label:"空心圆圈",value:"circle"},
{label:"空心方块",value:"rect"},
{label:"圆圈",value:"circle"},
{label:"方块",value:"rect"},
{label:"圆角方块",value:"roundRect"},
{label:"空心三角",value:"triangle"},
{label:"空心菱形",value:"diamond"},
{label:"空心图钉",value:"pin"},
{label:"空心箭头",value:"arrow"},
{label:"三角",value:"triangle"},
{label:"菱形",value:"diamond"},
{label:"图钉",value:"pin"},
{label:"箭头",value:"arrow"},
],
symbolSizeOptions:[
{label:1,value:1},
......@@ -108,7 +145,7 @@
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
margin: 0 15px;
align-items: center;
}
.element-config{
......
web/src/views/chartcustomization/chartConfg/chartTitle.vue → web/src/views/chartcustomization/chartConfig/chartTitle.vue
View file @ 0e80e9d3
......@@ -11,7 +11,7 @@
</el-switch>
</div>
<div class="element-config">
<el-input size="small" v-model="chartSettingsTitle.text" placeholder="请输入内容"></el-input>
<el-input size="small" v-model="chartSettingsTitle.text" placeholder="请输入内容"></el-input>
</div>
<div class="element-config">
字体
......@@ -33,7 +33,7 @@
</div>
<div class="element-config">
位置
<el-select v-model="position" placeholder="请选择">
<el-select style="width: 125px !important;" v-model="position" placeholder="请选择">
<el-option
v-for="items in positionOptions"
:key="items.value"
......@@ -170,7 +170,7 @@
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
margin: 0 15px;
align-items: center;
}
.element-config{
......
web/src/views/chartcustomization/chartConfg/chartXAxis.vue → web/src/views/chartcustomization/chartConfig/chartXAxis.vue
View file @ 0e80e9d3
......@@ -94,7 +94,7 @@
</div>
<div v-show="axisShow==true">
<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 class="element-config">
字体
......@@ -307,7 +307,7 @@
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
margin: 0 15px;
align-items: center;
}
.element-config{
......
web/src/views/chartcustomization/chartConfg/chartYAxis.vue → web/src/views/chartcustomization/chartConfig/chartYAxis.vue
View file @ 0e80e9d3
......@@ -94,7 +94,7 @@
</div>
<div v-show="axisShow==true">
<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 class="element-config">
字体
......@@ -308,7 +308,7 @@
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 20px;
margin: 0 15px;
align-items: center;
}
.element-config{
......
web/src/views/chartcustomization/chartdataset.vue
View file @ 0e80e9d3
<template>
<div style="width: 15%">
<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 class="title" @click="dialogVisible=true">
<template v-if="dataset!=''">
{{dataset}}
</template>
<template v-else>
<span>选择数据集</span>
</template>
<i class="el-icon-edit-outline"></i>
</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">
<draggable
v-on:end="dragWidget($event)"
......@@ -27,6 +37,24 @@
<!-- </template>-->
</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>
</template>
......@@ -42,10 +70,12 @@
data() {
return {
fileList:[],
chooseFile:'',
chooseFile:'请选择数据集',
headerList:[],
dataList:[],
data:[]
dataset:'',
data:[],
dialogVisible:false
}
},
computed: {
......@@ -72,6 +102,10 @@
},
methods:{
createProject(){
this.getCSVData()
this.dialogVisible=false
},
initFileList(){
getFileList().then(res => {
this.fileList = res.data;
......@@ -84,6 +118,7 @@
if(this.chooseFile!=""){
let that = this
let file = this.fileList.filter(d=>{return d.id == that.chooseFile})[0]
this.dataset = file.name
let data ={
"fId":file.id,
"name":file.name
......@@ -141,14 +176,27 @@
</script>
<style scoped>
.data-item{
padding: 0 20px;
font-size: 12px;
cursor: move;
color: #6a6f77;
line-height: 20px;
}
.data-item:hover{
background: #ccc;
}
.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;
font-size: 12px;
cursor: move;
color: #6a6f77;
line-height: 30px;
}
.data-item:hover{
background: #ccc;
font-weight: bold;
}
</style>
web/src/views/chartcustomization/chartedit.vue
View file @ 0e80e9d3
<template>
<div style="width: 15%">
<div style="width: 260px">
<!-- <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" v-show="dataSet.yAxis.length>0">
<div class="main_edit" >
<el-tabs class="tabs" v-model="activeName" type="card" >
<el-tab-pane label="图表配置" name="1">
<datacleaning></datacleaning>
<changechartstype></changechartstype>
</el-tab-pane>
<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>
<template v-if="dataSet.type =='line' || dataSet.type=='area'">
<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>
</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-tabs>
</div>
<div class="main_chart" v-show="dataSet.yAxis.length>0">
<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 class="main_chart" v-show="dataSet.yAxis.length>0">-->
<!-- <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.vue";
import ChartTitle from "./chartConfg/chartTitle.vue";
import ChartLegend from "./chartConfg/chartLegend.vue";
import ChartXAxis from "./chartConfg/chartXAxis.vue";
import ChartYAxis from "./chartConfg/chartYAxis.vue";
import ChartPoint from "./chartConfg/chartPoint.vue";
import ChartLine from "./chartConfg/chartLine.vue";
import ChartDataZoom from "./chartConfig/chartDataZoom.vue";
import ChartTitle from "./chartConfig/chartTitle.vue";
import ChartLegend from "./chartConfig/chartLegend.vue";
import ChartXAxis from "./chartConfig/chartXAxis.vue";
import ChartYAxis from "./chartConfig/chartYAxis.vue";
import ChartPoint from "./chartConfig/chartPoint.vue";
import ChartLine from "./chartConfig/chartLine.vue";
import {mapState} from "vuex";
import Datacleaning from "./showConfig/datacleaning";
import Changechartstype from "./showConfig/changechartstype";
import ChartBarConfig from "./chartConfig/chartBarConfig";
export default {
name: "chartedit",
components: {ChartLine, ChartPoint, ChartYAxis, ChartXAxis, ChartLegend, ChartTitle, ChartDataZoom},
components: {
ChartBarConfig,
Changechartstype,
Datacleaning, ChartLine, ChartPoint, ChartYAxis, ChartXAxis, ChartLegend, ChartTitle, ChartDataZoom},
data(){
return{
activeName:"2",
activeName:"1",
chartName:"1",
}
},
......@@ -118,4 +144,14 @@
justify-content: space-between;
align-items: center;
}
.tabs{
width: 100%;
}
/deep/ .tabs .el-tabs__nav{
width: 100%;
}
/deep/ .tabs .el-tabs__item{
width: 50%;
text-align: center;
}
</style>
web/src/views/chartcustomization/components/chart.vue
View file @ 0e80e9d3
......@@ -43,6 +43,7 @@
},
watch:{
dataSet: {
deep: true,
handler: 'init' // 直接将方法名指定为 handler
......@@ -73,38 +74,154 @@
},
},
computed: {
...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom','dataSet']),
...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom','dataSet','fixed']),
},
methods: {
createChart(setOption){
if(this.dataSet.type =="line"){
this.chartSettingsXAxis.type = "category"
this.chartSettingsYAxis.type = "value"
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
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'
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
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 =="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
const setOption={};
setOption.title = this.chartSettingsTitle
setOption.legend = this.chartSettingsLegend
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
setOption.xAxis.data=this.dataSet.xAxis.list
// setOption.xAxis.data=['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
setOption.dataZoom = this.chartSettingsDataZoom
let setOption = {}
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'line'
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.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)
setOption = this.createChart(setOption);
that.myChart.setOption(setOption);
window.addEventListener("resize", () => {
......@@ -116,7 +233,7 @@
let that = this
const updatedList = this.dataSet.yAxis.filter(d => d.name !== item.name);
this.dataSet.yAxis= updatedList
this.$store.commit('charts/updateDataSet',this.dataSet);
},
addPointSetting(series){
for (var i = 0; i < series.length; i++) {
......@@ -138,6 +255,7 @@
if(this.myChart!=null){
this.myChart.dispose();
}
// this.dataCleaning()
this.myChart = echarts.init(this.$refs.chart)
this.upDateMyChart()
}
......@@ -157,6 +275,9 @@
}
.project {
display: flex;
flex-direction: column;
/*position: relative;*/
width:70%;
background-color:white;
}
......@@ -237,6 +358,9 @@
border: 1px dashed #d8d8d8;
}
.chart{
height: 80%;
flex: 1;
/*position: absolute;*/
/*min-height: 50%;*/
/*height: 80%;*/
}
</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