对接csv数据源

web/src/store/modules/charts.js

@@ -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

+<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

 <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

@@ -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>