Skip to content

Z
ZZDataAnalysis
Commit 090f41a9 authored by liushuai's avatar liushuai
Browse files
Options

对接csv数据源

parent 45762945
Show whitespace changes
Inline Side-by-side
Showing with 213 additions and 34 deletions
web/src/store/modules/charts.js
View file @ 090f41a9
......@@ -90,12 +90,12 @@ const state = () => ({
symbolSize: 8, // 数据点符号的大小
itemStyle: {
color: '#fff', // 数据点符号的填充颜色
borderColor: 'rgb(55, 124, 255)', // 数据点符号的边框颜色
// borderColor: 'rgb(55, 124, 255)', // 数据点符号的边框颜色
borderWidth: 2 // 数据点符号的边框宽度
},
smooth:true,
lineStyle:{
color:"rgb(55, 124, 255)",
// color:"rgb(55, 124, 255)",
width:2,
}
},
......@@ -122,7 +122,11 @@ const state = () => ({
start: 0, // 初始起始百分比
end: 100 // 初始结束百分比
}
]
],
dataSet:{
xAxis:{},
yAxis:[],
}
});
const getters = {
chartSettingsTitle: (state) => state.chartSettingsTitle,
......@@ -131,6 +135,7 @@ const getters = {
chartSettingsYAxis:(state) => state.chartSettingsYAxis,
chartSettingsSeries:(state) => state.chartSettingsSeries,
chartSettingsDataZoom:(state) => state.chartSettingsDataZoom,
dataSet:(state) => state.dataSet,
}
const mutations ={
updateChartSettingsTitle(state, data) {
......@@ -151,6 +156,9 @@ const mutations ={
updateChartSettingsDataZoom(state, data) {
state.chartSettingsDataZoom = data;
},
updateDataSet(state, data) {
state.dataSet = data;
},
}
const actions={
......
web/src/views/chartcustomization/chartdataset.vue 0 → 100644
View file @ 090f41a9
<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 style="margin-top: 20px">
<draggable
v-on:end="dragWidget($event)"
:sort="false">
<transition-group tag="div">
<div class="data-item" v-for="element in dataList" :data-name="element" :key="element" v-if="element !== '时间' && element !== '区域'">
{{element}}
</div>
</transition-group>
</draggable>
<!-- <template v-for="(item,index) in dataList">-->
<!-- <div v-if="index!=0">-->
<!-- <div class="data-item">{{item}}</div>-->
<!-- </div>-->
<!-- </template>-->
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import { getProject, getFileList, createProject,getDataHeader } from '@/api/data'
import {mapState} from "vuex";
export default {
name: "chartdataset",
components:{
draggable
},
data() {
return {
fileList:[],
chooseFile:'',
headerList:[],
dataList:[],
data:[]
}
},
computed: {
...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom','dataSet']),
},
mounted() {
this.initFileList()
},
watch:{
dataSet:{
deep: true,
handler: function (newVal){
let data = []
for(var i in newVal.yAxis){
data.push(newVal.yAxis[i].name)
}
// console.log(data)
// console.log(this.dataList)
const difference = this.headerList.filter(item => !data.includes(item));
this.dataList = difference
// console.log(difference); // [1, 2]
}
},
},
methods:{
initFileList(){
getFileList().then(res => {
this.fileList = res.data;
}).catch(err => {
console.log(err)
})
},
getCSVData(){
if(this.chooseFile!=""){
let that = this
let file = this.fileList.filter(d=>{return d.id == that.chooseFile})[0]
let data ={
"fId":file.id,
"name":file.name
}
getDataHeader(data).then(res => {
this.dataList = this.headerList = res.data.header
this.data = res.data.data
this.dataSet.xAxis={}
this.dataSet.yAxis=[]
this.$store.commit('charts/updateDataSet', this.dataSet);
}).catch(err => {
console.log(err)
})
}
},
dragWidget(event){
var widgetX = event.originalEvent.clientX;
let widgetY = event.originalEvent.clientY;
let that = this
let id = 'chartDataList'
// console.log(id)
var regionRect = document.getElementById(id).getBoundingClientRect();
if(widgetX>regionRect.left && widgetX<regionRect.left+regionRect.width && widgetY>regionRect.top && widgetY<regionRect.top+regionRect.height){
let name = event.item.getAttribute("data-name")
let res = that.dataSet
let yAxis = {
"name":name,
"list":[]
}
let xAxis ={
"name":"时间",
"list":[]
}
for(var i in that.data){
let item = that.data[i]
let value = item[name]
let time = item[xAxis.name]
yAxis.list.push(value)
xAxis.list.push(time)
}
res.xAxis=xAxis
res.yAxis.push(yAxis)
// console.log(res)
this.$store.commit('charts/updateDataSet', res);
}
}
}
}
</script>
<style scoped>
.data-item{
padding: 0 20px;
font-size: 12px;
cursor: move;
color: #6a6f77;
line-height: 20px;
}
.data-item:hover{
background: #ccc;
}
</style>
web/src/views/chartcustomization/chartedit.vue
View file @ 090f41a9
<template>
<div style="width: 20%">
<div style="width: 15%">
<!-- <div class="right_title">表单选择与配置</div>-->
<div class="right_main">
<div class="main_edit">
......@@ -9,7 +9,7 @@
<chart-legend></chart-legend>
<chart-x-axis></chart-x-axis>
<chart-y-axis></chart-y-axis>
<chart-point></chart-point>
<!-- <chart-point></chart-point>-->
<chart-line></chart-line>
<chart-data-zoom></chart-data-zoom>
</el-tab-pane>
......
web/src/views/chartcustomization/components/chart.vue
View file @ 090f41a9
......@@ -4,7 +4,15 @@
overflow: scroll;
position: relative;
background: #fbfbfb;">
<div ref="chart" class="chart project" style="min-height: 800px;"></div>
<chartdataset></chartdataset>
<div class="project">
<div class="datalist" id="chartDataList">
<template v-for="item in dataSet.yAxis">
<el-tag class="item-tag">{{item.name}} <i class="el-icon-close" @click="deleteData(item)"></i></el-tag>
</template>
</div>
<div ref="chart" class="chart" style="min-height: 600px;"></div>
</div>
<chartedit></chartedit>
</div>
......@@ -15,13 +23,13 @@
import * as echarts from 'echarts';
import {getData} from "@/api/data"
import Chartedit from "../chartedit.vue";
import Chartdataset from "../chartdataset";
export default {
name: 'project',
components: {Chartedit},
components: {Chartdataset, Chartedit},
data() {
return {
myChart:null,
dataset:[],
XAxis:[],
YAxis:[],
value:[]
......@@ -29,10 +37,15 @@
},
mounted() {
this.getdata()
// this.getdata()
// this.init()
},
watch:{
dataSet: {
deep: true,
handler: 'init' // 直接将方法名指定为 handler
},
chartSettingsTitle: {
deep: true,
handler: 'init' // 直接将方法名指定为 handler
......@@ -59,23 +72,14 @@
},
},
computed: {
...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom']),
...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom','dataSet']),
},
methods: {
getdata(){
const params ={"name": "国民总收入"}
getData(params).then(res=>{
this.dataset= res.data
let XAxis=[]
let value=[]
for(var i in res.data){
XAxis.push(res.data[i].year)
value.push(res.data[i].value)
}
this.XAxis = XAxis
this.value = value
this.init()
})
deleteData(item){
console.log(this.dataSet.yAxis)
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++) {
......@@ -102,17 +106,17 @@
setOption.legend = this.chartSettingsLegend
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
setOption.xAxis.data=this.XAxis
setOption.xAxis.data=this.dataSet.xAxis.list
// setOption.xAxis.data=['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
setOption.dataZoom = this.chartSettingsDataZoom
let data = this.dataSet.yAxis
setOption.series= [
{
name: '国民总收入',
type: 'line',
data: this.value
},
]
for(var i in data){
data[i].data = data[i].list
data[i].type = 'line'
}
setOption.series = data
if(this.chartSettingsSeries.showPoint==true){
this.addPointSetting(setOption.series)
}else {
......@@ -143,7 +147,7 @@
}
.project {
width:80%;
width:70%;
background-color:white;
}
......@@ -212,4 +216,17 @@
line-height: 50px;
text-align: right;
}
.datalist{
padding: 10px;
height: 80px;
/*width: 100%;*/
margin-top:15px;
margin-bottom:15px;
margin-right: 20px;
margin-left: 20px;
border: 1px dashed #d8d8d8;
}
.item-tag{
}
</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