├── src
    ├── store
    │   ├── getters.js
    │   ├── state.js
    │   ├── actions_type.js
    │   ├── mutations_type.js
    │   ├── index.js
    │   ├── mutations.js
    │   └── actions.js
    ├── assets
    │   ├── rowBar.png
    │   ├── areaPie.png
    │   ├── circlePie.png
    │   ├── columnBar.png
    │   ├── doubleLine.png
    │   └── singleLine.png
    ├── nets
    │   ├── api.js
    │   └── index.js
    ├── main.js
    ├── App.vue
    ├── router.js
    ├── utils
    │   ├── index.js
    │   ├── dataInfor.js
    │   └── chartview.js
    ├── components
    │   ├── editChart.vue
    │   ├── selectColor.vue
    │   ├── LineSimple.vue
    │   └── NavMenu.vue
    ├── views
    │   └── Home.vue
    └── mock
    │   └── index.js
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── vue.config.js
├── README.md
└── package.json


/src/store/getters.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 	
3 | }


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzhewd/datavisualization/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/rowBar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzhewd/datavisualization/HEAD/src/assets/rowBar.png


--------------------------------------------------------------------------------
/src/assets/areaPie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzhewd/datavisualization/HEAD/src/assets/areaPie.png


--------------------------------------------------------------------------------
/src/assets/circlePie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzhewd/datavisualization/HEAD/src/assets/circlePie.png


--------------------------------------------------------------------------------
/src/assets/columnBar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzhewd/datavisualization/HEAD/src/assets/columnBar.png


--------------------------------------------------------------------------------
/src/assets/doubleLine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzhewd/datavisualization/HEAD/src/assets/doubleLine.png


--------------------------------------------------------------------------------
/src/assets/singleLine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzhewd/datavisualization/HEAD/src/assets/singleLine.png


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | // vue.config.js
2 | module.exports = {
3 |     publicPath: process.env.NODE_ENV === 'production'
4 |         ? './'
5 |         : '/'
6 | 
7 | };
8 | 


--------------------------------------------------------------------------------
/src/store/state.js:
--------------------------------------------------------------------------------
 1 | export const initVal = {
 2 |     firCharInfo: [],
 3 |     delText: -1,
 4 |     lineChart: [],
 5 |     editChartInfo: {}
 6 | };
 7 | 
 8 | export default {
 9 |     ...initVal
10 | };


--------------------------------------------------------------------------------
/src/nets/api.js:
--------------------------------------------------------------------------------
1 | const PREFIX =
2 |   process.env.NODE_ENV === "production"
3 |     ? ""
4 |     : "";
5 | export const FIRSTCHART = `${PREFIX}/data/firstchart`;
6 | export const GETLINECHART = `${PREFIX}/data/lineChart`;
7 | 


--------------------------------------------------------------------------------
/src/store/actions_type.js:
--------------------------------------------------------------------------------
1 | export const GET_ALL_CHART_INFO = "GET_ALL_CHART_INFO";
2 | export const PUSH_DEL_WHICH_ONE = "PUSH_DEL_WHICH_ONE";
3 | export const GET_LINE_CHART_INFO = 'GET_LINE_CHART_INFO';
4 | export const SET_EIDT_CHART_INFO = 'SET_EIDT_CHART_INFO';


--------------------------------------------------------------------------------
/src/store/mutations_type.js:
--------------------------------------------------------------------------------
1 | export const MUTATE_FIRST_CHART_INFO = "MUTATE_FIRST_CHART_INFO";
2 | export const MUTATE_DEL_WHICH_ONE = " MUTATE_DEL_WHICH_ONE";
3 | export const MUTATE_LINE_CHART = 'MUTATE_LINE_CHART';
4 | export const MUTATE_EDIT_CHART = 'MUTATE_EDIT_CHART';


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | import state from "./state";
 4 | import actions from "./actions";
 5 | import mutations from "./mutations";
 6 | import getters from "./getters";
 7 | 
 8 | Vue.use(Vuex);
 9 | 
10 | export default new Vuex.Store({
11 |     state,
12 |     mutations,
13 |     actions,
14 |     getters
15 | });


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import ElementUI from "element-ui";
 6 | import "element-ui/lib/theme-chalk/index.css";
 7 | require('./mock')
 8 | Vue.config.productionTip = false;
 9 | Vue.use(ElementUI);
10 | 
11 | new Vue({
12 |     router,
13 |     store,
14 |     render: h => h(App)
15 | }).$mount("#app");


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # datavisualization
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/src/nets/index.js:
--------------------------------------------------------------------------------
 1 | import * as api from './api';
 2 | import http from 'axios';
 3 | import qs from 'qs';
 4 | 
 5 | import {
 6 |   ajaxToPromise
 7 | } from '../utils';
 8 | 
 9 | const axios = http.create({
10 |     timeout: 15000,
11 |     // withCredentials: true //跨域请求携带cookie
12 | });
13 | 
14 | export function getchartlist (payload) {
15 |     return ajaxToPromise(axios.get(api.FIRSTCHART));
16 | }
17 | export function getlinechart (payload) {
18 |     return ajaxToPromise(axios.post(api.GETLINECHART, payload));
19 | }
20 | 


--------------------------------------------------------------------------------
/src/store/mutations.js:
--------------------------------------------------------------------------------
 1 | import * as types from "./mutations_type";
 2 | 
 3 | export default {
 4 |     [types.MUTATE_FIRST_CHART_INFO](state, payLoad) {
 5 |         state.firCharInfo.push(payLoad);
 6 |     },
 7 |     [types.MUTATE_DEL_WHICH_ONE](state, payLoad) {
 8 |         state.delText = payLoad;
 9 |     },
10 |     [types.MUTATE_LINE_CHART](state, payLoad) {
11 |         state.lineChart.push(payLoad)
12 |     },
13 |     [types.MUTATE_EDIT_CHART](state, payLoad) {
14 |         state.editChartInfo = payLoad
15 |     }
16 | };
17 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div id="app">
 3 |   <div class="echartContainer">
 4 |     <router-view />
 5 |   </div>
 6 | </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 | 
11 |   components: {
12 | 
13 |   }
14 | };
15 | </script>
16 | <style lang="scss">
17 | body,
18 | html {
19 |     height: 100%;
20 |     width: 100%;
21 | }
22 | * {
23 |     margin: 0;
24 |     padding: 0;
25 | }
26 | dl,
27 | li,
28 | ol,
29 | ul {
30 |     list-style: none;
31 | }
32 | #app {
33 |     height: 100%;
34 |     width: 100%;
35 |     .echartContainer {
36 |         height: 100%;
37 |         width: 100%;
38 |     }
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |     <title>datavisualization</title>
10 | </head>
11 | 
12 | <body>
13 |     <noscript>
14 |       <strong>We're sorry but datavisualization doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import Home from "./views/Home.vue";
 4 | 
 5 | Vue.use(Router);
 6 | 
 7 | export default new Router({
 8 |     routes: [{
 9 |             path: "/",
10 |             name: "home",
11 |             component: Home
12 |         }
13 |         // {
14 |         //   path: "/about",
15 |         //   name: "about",
16 |         //   // route level code-splitting
17 |         //   // this generates a separate chunk (about.[hash].js) for this route
18 |         //   // which is lazy-loaded when the route is visited.
19 |         //   component: () =>
20 |         //     import(/* webpackChunkName: "about" */ "./views/About.vue")
21 |         // }
22 |     ]
23 | });


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | export function ajaxToPromise(p) {
 2 |     return p.then((response) => {
 3 |         if (response.status == 200) {
 4 |             return {
 5 |                 success: true,
 6 |                 data: response.data
 7 |             };
 8 |         }
 9 |         return {
10 |             success: false,
11 |             data: response.data.message,
12 |             message: response.data.message
13 |         };
14 |     }, (err) => {
15 |         console.log(err);
16 |         return {
17 |             success: false,
18 |             data: '网络异常'
19 |         };
20 |     });
21 | }
22 | 
23 | export function transBodyParams(body) {
24 |     var obj = JSON.parse(body)
25 |     return obj.params ? obj.params : obj
26 | }
27 | 
28 | export function countNumber(num) {
29 |     if (num % 100 === 0) {
30 |         return num
31 |     } else {
32 |         var y = 100 - num % 100
33 |         return num + y
34 |     }
35 | }


--------------------------------------------------------------------------------
/src/store/actions.js:
--------------------------------------------------------------------------------
 1 | import * as types from "./actions_type";
 2 | import * as mutationTypes from "./mutations_type";
 3 | import * as nets from '../nets';
 4 | 
 5 | export default {
 6 |     async [types.GET_ALL_CHART_INFO]({ commit }, payLoad) {
 7 |         let result = await nets.getchartlist(payLoad)
 8 |         if (result.success) {
 9 |             commit(mutationTypes.MUTATE_FIRST_CHART_INFO, result.data);
10 |         }
11 |         return result;
12 |     },
13 |     [types.PUSH_DEL_WHICH_ONE]({ commit }, payLoad) {
14 |         commit(mutationTypes.MUTATE_DEL_WHICH_ONE, payLoad);
15 |     },
16 |     async [types.GET_LINE_CHART_INFO]({ commit }, payLoad) {
17 |         let result = await nets.getlinechart(payLoad)
18 |         if (result.success) {
19 |             commit(mutationTypes.MUTATE_LINE_CHART, result.data);
20 |         }
21 |         return result;
22 |     },
23 |     [types.SET_EIDT_CHART_INFO]({ commit }, payLoad) {
24 |         commit(mutationTypes.MUTATE_EDIT_CHART, payLoad)
25 |     }
26 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "datavisualization",
 3 |   "author": "Created by zhangzhe<544785380@qq.com> on 2019/6/5",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "cross-env NODE_ENV=production vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "awe-dnd": "^0.3.4",
13 |     "axios": "^0.19.0",
14 |     "core-js": "^2.6.5",
15 |     "echarts": "^4.2.1",
16 |     "echarts-gl": "^1.1.1",
17 |     "element-ui": "^2.8.2",
18 |     "mockjs": "^1.0.1-beta3",
19 |     "qs": "^6.7.0",
20 |     "sortablejs": "^1.9.0",
21 |     "vue": "^2.6.10",
22 |     "vue-router": "^3.0.3",
23 |     "vuedraggable": "^2.21.0",
24 |     "vuex": "^3.0.1"
25 |   },
26 |   "devDependencies": {
27 |     "@vue/cli-plugin-babel": "^3.8.0",
28 |     "@vue/cli-plugin-eslint": "^3.8.0",
29 |     "@vue/cli-service": "^3.8.0",
30 |     "@vue/eslint-config-prettier": "^4.0.1",
31 |     "babel-eslint": "^10.0.1",
32 |     "cross-env": "^5.2.0",
33 |     "eslint": "^5.16.0",
34 |     "eslint-plugin-vue": "^5.0.0",
35 |     "node-sass": "^4.9.0",
36 |     "sass-loader": "^7.1.0",
37 |     "vue-template-compiler": "^2.6.10"
38 |   },
39 |   "eslintConfig": {
40 |     "root": true,
41 |     "env": {
42 |       "node": true
43 |     },
44 |     "extends": [
45 |       "plugin:vue/essential",
46 |       "@vue/prettier"
47 |     ],
48 |     "rules": {},
49 |     "parserOptions": {
50 |       "parser": "babel-eslint"
51 |     }
52 |   },
53 |   "postcss": {
54 |     "plugins": {
55 |       "autoprefixer": {}
56 |     }
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/src/components/editChart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="editChart">
 3 |     <!-- <el-dialog :title="editChartinfo.charTit === undefined?'编辑':editChartinfo.charTit+'-修改'" :visible.sync="editchartDialog" > -->
 4 |     <el-dialog title="编辑" :visible.sync="editchartDialog" >
 5 |         <div class="editName">
 6 |             <span class="describe">图表名称:</span>
 7 |             <el-input v-model="editChartinfo.charTit" placeholder="修改图表名称" class="selectInfo pintcharname"></el-input>
 8 |         </div>
 9 |         <div class="funcBtn">
10 |             <el-button @click="editchartDialog = false">取消</el-button>
11 |             <el-button @click="affirmEdit" type="primary">确定</el-button>
12 |         </div>
13 |     </el-dialog>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import {
19 |   mapState
20 | } from 'vuex'
21 | export default {
22 |   data() {
23 |       return {
24 |         editchartDialog:false,
25 |         editChartinfo:{}
26 |       };
27 |     },
28 |     watch: {
29 |       
30 |     },
31 |     computed:{
32 |         ...mapState({
33 |             editChartInfo: 'editChartInfo'
34 |         })
35 |     },
36 |     created() {
37 | 
38 |     },
39 |     mounted () {
40 | 
41 |     },
42 |     methods: {
43 |       editdialog(data){
44 |         this.editchartDialog = data
45 |         this.editChartinfo = this.editChartInfo
46 |       },
47 |       affirmEdit(){
48 |         this.editchartDialog = false
49 |         this.editChartinfo.charItem.chartTit = this.editChartinfo.charTit
50 |       }
51 |     },
52 |     components: {
53 | 
54 |     },
55 | };
56 | </script>
57 | <style lang="scss">
58 | .editChart{
59 |     display: inline-block;
60 |     float: right;
61 |     margin-right: 1vw;
62 |     margin-top: 0.6vh;
63 |     cursor: pointer;
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/utils/dataInfor.js:
--------------------------------------------------------------------------------
 1 | import singleLine from "../assets/singleLine.png";
 2 | import doubleLine from "../assets/doubleLine.png";
 3 | import areaPie from "../assets/areaPie.png";
 4 | import circlePie from "../assets/circlePie.png";
 5 | import rowBar from "../assets/rowBar.png";
 6 | import columnBar from "../assets/columnBar.png";
 7 | 
 8 | export default {
 9 |     choseCharts: [{
10 |             value: "line",
11 |             label: "折线图",
12 |             chartType: [{
13 |                     imgSrc: singleLine,
14 |                     type: "singleLine"
15 |                 },
16 |                 {
17 |                     imgSrc: doubleLine,
18 |                     type: "doubleLine"
19 |                 }
20 |             ]
21 |         },
22 |         {
23 |             value: "pie",
24 |             label: "饼图",
25 |             chartType: [{
26 |                     imgSrc: areaPie,
27 |                     type: "areaPie"
28 |                 },
29 |                 {
30 |                     imgSrc: circlePie,
31 |                     type: "circlePie"
32 |                 }
33 |             ]
34 |         },
35 |         {
36 |             value: "bar",
37 |             label: "柱状图",
38 |             chartType: [{
39 |                     imgSrc: rowBar,
40 |                     type: "rowBar"
41 |                 },
42 |                 {
43 |                     imgSrc: columnBar,
44 |                     type: "columnBar"
45 |                 }
46 |             ]
47 |         }
48 |     ],
49 |     chartChoseW: [{
50 |             value: "w24",
51 |             label: "24vw"
52 |         },
53 |         {
54 |             value: "w32",
55 |             label: "32vw"
56 |         },
57 |         {
58 |             value: "w49",
59 |             label: "49vw"
60 |         }
61 |     ],
62 |     chartChoseH: [{
63 |             value: "h15",
64 |             label: "15vh"
65 |         },
66 |         {
67 |             value: "h20",
68 |             label: "20vh"
69 |         },
70 |         {
71 |             value: "h30",
72 |             label: "30vh"
73 |         }
74 |     ]
75 | };


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |       <div class="funcBtn">
  4 |         <el-button type="primary" plain @click="compileBtnFunc()">编辑</el-button>
  5 |         <el-button type="primary" plain @click="saveBtnFunc()" :disabled='disab'>保存</el-button>
  6 |         <NavMenu v-on:addEchart='selectchart' class="echartNav" ></NavMenu>
  7 |       </div>
  8 |       <LineSimple
  9 |         :addEcharts = 'addEcharts'
 10 |         ref="lineChartsFunc"
 11 |         :disab="disabled">
 12 |       </LineSimple>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | import LineSimple from "@/components/LineSimple.vue";
 18 | import draggable from 'vuedraggable'
 19 | import NavMenu from '@/components/NavMenu.vue'
 20 | export default {
 21 |   data() {
 22 |       return {
 23 |         addEcharts:[],
 24 |         disabled:true,
 25 |         disab:true
 26 |       };
 27 |     },
 28 |     computed:{
 29 | 
 30 |     },
 31 |     created() {
 32 | 
 33 |     },
 34 |     mounted () {
 35 | 
 36 |       },
 37 |     methods: {
 38 |       selectchart(data){
 39 |         this.addEcharts = []
 40 |         this.addEcharts.push(data)
 41 |         this.$nextTick(()=>{
 42 |           this.addEcharts = []
 43 |         })
 44 |       },
 45 |       compileBtnFunc(){
 46 |         this.$refs.lineChartsFunc.parentInfo(false)
 47 |         this.disab = false
 48 |         this.disabled = false
 49 |       },
 50 |       saveBtnFunc(){
 51 |         this.$refs.lineChartsFunc.parentInfo(true)
 52 |         this.disab = true
 53 |         this.disabled = true
 54 |       }
 55 |     },
 56 |     components: {
 57 |       draggable,
 58 |       LineSimple,
 59 |       NavMenu
 60 |     },
 61 | };
 62 | </script>
 63 | <style lang="scss">
 64 | .color-item{
 65 |         border:1px solid #f1f1f1;
 66 |         padding:10px 5px;
 67 |         margin:5px 0;
 68 |         border-radius: 4px;
 69 |     }
 70 | .home{
 71 |   height:100%;
 72 |   width:100%;
 73 |   .funcBtn{
 74 |     height:6.5vh;
 75 |     padding-top:.5vh;
 76 |     width:100%;
 77 |     text-align: right;
 78 |   }
 79 |   .echart1Box,.echart2Box,.echart3Box{
 80 |     height:100%;
 81 |     background:#f0f;
 82 |     .chartmain{
 83 |       position:relative;
 84 |       display:inline-block;
 85 |       margin-bottom:1vh;
 86 |       border-radius: 2px 2px 2px 2px;
 87 |       box-shadow: 1px 2px 5px #ccc;
 88 |       border: 1px solid #ddd;
 89 |       min-height:29vh;
 90 |       width:24vw;
 91 |       margin-right:.5vw;
 92 |     }
 93 |   }
 94 |   .echart2Box{
 95 |     background:#ff0;
 96 |   }
 97 |   .echart3Box{
 98 |     min-height:38.5vh;
 99 |     background:#0ff;
100 |   }
101 |   .h30{
102 |     height:34vh !important;
103 |   }
104 |   .h20{
105 |     height:24vh !important;
106 |   }
107 |   .h15{
108 |     height:19vh !important;
109 |   }
110 |   .w24{
111 |     width:24vw !important;
112 |   }
113 |   .w49{
114 |      width:49vw !important;
115 |   }
116 |   .w32{
117 |      width:32vw !important;
118 |   }
119 |   .itemclass{
120 |     background:red;
121 |   }
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/components/selectColor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="selectColor">
  3 |       <span class="describe coloTit">图表颜色:</span>
  4 |       <div v-for='(color,index) in colorList' :key="'colorList' + index" class="selectcolor">
  5 |         <el-color-picker v-model="color.colorItem" size="mini" :show-alpha = 'color.showalpha'></el-color-picker>
  6 |       </div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | 
 12 | export default {
 13 |   data() {
 14 |       return {
 15 |         colorList:[{
 16 |             colorItem:null
 17 |         }],
 18 |         singleLineColor:[{
 19 |             colorItem:'#EB3841'
 20 |         },{
 21 |             colorItem:'#FEB4B4'
 22 |         }],
 23 |         doubleLineColor:[{
 24 |             colorItem:'#EB3841'
 25 |         },{
 26 |             colorItem:'#6086FF'
 27 |         }],
 28 |         rowBarColor:[{
 29 |             colorItem:'#6086FF'
 30 |         },{
 31 |             colorItem:'#98D1FF'
 32 |         },{
 33 |             colorItem:'#FEA145'
 34 |         },{
 35 |             colorItem:'#FB764A'
 36 |         }],
 37 |         columnBarColor:[{
 38 |             colorItem:'rgba(152,209,255,0.2)',
 39 |             showalpha:true
 40 |         },{
 41 |             colorItem:'#83bff6'
 42 |         },{
 43 |             colorItem:'#188df0'
 44 |         },{
 45 |             colorItem:'#188df0'
 46 |         }],
 47 |         areaPieColor:[{
 48 |             colorItem:'#67A8FF'
 49 |         },{
 50 |             colorItem:'#D0F6FF'
 51 |         },{
 52 |             colorItem:'#FFE059'
 53 |         },{
 54 |             colorItem:'#FB764A'
 55 |         }],
 56 |         circlePieColor:[{
 57 |             colorItem:'#EB3841'
 58 |         },{
 59 |             colorItem:'#FB764A'
 60 |         },{
 61 |             colorItem:'#FEA145'
 62 |         },{
 63 |             colorItem:'#FFE059'
 64 |         },{
 65 |             colorItem:'#D0F6FF'
 66 |         },{
 67 |             colorItem:'#98D1FF'
 68 |         },{
 69 |             colorItem:'#67A8FF'
 70 |         },{
 71 |             colorItem:'#6086FF'
 72 |         }],
 73 |         copysingleLineColor:[]
 74 |       };
 75 |     },
 76 |     props: ['chartType','definiteChartType'],
 77 |     watch: {
 78 |         pchartType:{
 79 |             handler(val){
 80 |                 // console.log(val)
 81 |             }
 82 |         },
 83 |         pdefiniteChartType:{
 84 |             handler(val){
 85 |                 // console.log(val)
 86 |                 this.changeColor()
 87 |             },
 88 |         }
 89 |     },
 90 |     computed:{
 91 |         pchartType(){
 92 |             return this.chartType
 93 |         },
 94 |         pdefiniteChartType(){
 95 |             return this.definiteChartType
 96 |         }
 97 |     },
 98 |     created() {
 99 |         
100 |     },
101 |     mounted () {
102 | 
103 |     },
104 |     methods: {
105 |         changeColor(){
106 |             if(this.pchartType === '' || this.pdefiniteChartType === ''){
107 |                 this.colorList = [{colorItem:null}]
108 |             }else{
109 |                 if(this.pchartType === 'line' && this.pdefiniteChartType === 'singleLine')this.colorList = this.singleLineColor
110 |                 if(this.pchartType === 'line' && this.pdefiniteChartType === 'doubleLine')this.colorList = this.doubleLineColor
111 |                 if(this.pchartType === 'bar' && this.pdefiniteChartType === 'rowBar')this.colorList = this.rowBarColor
112 |                 if(this.pchartType === 'bar' && this.pdefiniteChartType === 'columnBar')this.colorList = this.columnBarColor
113 |                 if(this.pchartType === 'pie' && this.pdefiniteChartType === 'areaPie')this.colorList = this.areaPieColor
114 |                 if(this.pchartType === 'pie' && this.pdefiniteChartType === 'circlePie')this.colorList = this.areaPieColor
115 |                 this.$emit('changeColor', this.colorList)
116 |             }
117 |         }
118 |     },
119 |     components: {
120 |       
121 |     },
122 | };
123 | </script>
124 | <style lang="scss">
125 | 
126 | </style>
127 | 


--------------------------------------------------------------------------------
/src/mock/index.js:
--------------------------------------------------------------------------------
  1 | import Mock from "mockjs"; // 引入mockjs
  2 | import { transBodyParams } from "../utils";
  3 | 
  4 | const Random = Mock.Random; // Mock.Random 用于生成各种随机数据
  5 | 
  6 | var getFirstChartInfo = [{
  7 |         chartClass: "h20 w32 chartMain1",
  8 |         chartMainClass: ".chartMain1",
  9 |         chartType: "line",
 10 |         chartTit: "证券类产品净值",
 11 |         chartDetailType: "singleLine",
 12 |         text: 1,
 13 |         chartColor: ["#EB3841", "#FEB4B4"],
 14 |         xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 15 |         seriesData: [{
 16 |             data: [820, 932, 901, 934, 1290, 1330, 1320]
 17 |         }]
 18 |     },
 19 |     {
 20 |         chartClass: "h20 w49 chartMain2",
 21 |         text: 2,
 22 |         chartDetailType: "doubleLine",
 23 |         chartTit: "证券类产品净值",
 24 |         chartType: "line",
 25 |         chartColor: ["#EB3841", "#6086FF"],
 26 |         chartMainClass: ".chartMain2",
 27 |         xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 28 |         seriesData: [{
 29 |                 data: [120, 132, 101, 134, 90, 230, 210],
 30 |                 color: "#EB3841"
 31 |             },
 32 |             {
 33 |                 data: [220, 182, 191, 234, 290, 330, 310],
 34 |                 color: "#6086FF"
 35 |             }
 36 |         ]
 37 |     },
 38 |     {
 39 |         chartClass: "h15 w24 chartMain3",
 40 |         text: 3,
 41 |         chartDetailType: "singleLine",
 42 |         chartTit: "证券类产品净值",
 43 |         chartType: "line",
 44 |         chartColor: ["#6086FF", "#6086FF"],
 45 |         chartMainClass: ".chartMain3",
 46 |         xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 47 |         seriesData: [{
 48 |             data: [1, 2, 3, 4, 5, 6, 7]
 49 |         }]
 50 |     },
 51 |     {
 52 |         chartClass: "h15 w24 chartMain4",
 53 |         text: 4,
 54 |         chartDetailType: "circlePie",
 55 |         chartTit: "产品投资者人数",
 56 |         chartType: "pie",
 57 |         chartColor: ["#67A8FF", "#D0F6FF", "#FFE059", "#FB764A"],
 58 |         chartMainClass: ".chartMain4",
 59 |         xData: ["直接访问", "邮件营销", "联盟广告", "视频广告"],
 60 |         seriesData: [{
 61 |                 value: 335,
 62 |                 name: "直接访问"
 63 |             },
 64 |             {
 65 |                 value: 310,
 66 |                 name: "邮件营销"
 67 |             },
 68 |             {
 69 |                 value: 234,
 70 |                 name: "联盟广告"
 71 |             },
 72 |             {
 73 |                 value: 135,
 74 |                 name: "视频广告"
 75 |             }
 76 |         ]
 77 |     },
 78 |     {
 79 |         chartClass: "h15 w24 chartMain5",
 80 |         text: 5,
 81 |         chartDetailType: "areaPie",
 82 |         chartTit: "产品投资者人数",
 83 |         chartType: "pie",
 84 |         chartColor: ["#67A8FF", "#D0F6FF", "#FFE059", "#FB764A"],
 85 |         chartMainClass: ".chartMain5",
 86 |         xData: [
 87 |             "rose1",
 88 |             "rose2",
 89 |             "rose3",
 90 |             "rose4",
 91 |         ],
 92 |         seriesData: [{
 93 |                 value: 10,
 94 |                 name: "rose1"
 95 |             },
 96 |             {
 97 |                 value: 5,
 98 |                 name: "rose2"
 99 |             },
100 |             {
101 |                 value: 15,
102 |                 name: "rose3"
103 |             },
104 |             {
105 |                 value: 25,
106 |                 name: "rose4"
107 |             }
108 |         ]
109 |     },
110 |     {
111 |         chartClass: "h15 w24 chartMain6",
112 |         text: 6,
113 |         chartDetailType: "rowBar",
114 |         chartTit: "盈亏能力展示",
115 |         chartColor: ['#6086FF', '#98D1FF', '#FEA145', '#FB764A'],
116 |         chartType: "bar",
117 |         chartMainClass: ".chartMain6",
118 |         xData: ["-20%以下", "-20～0%", "0～20%", "20%以上"],
119 |         seriesData: [{
120 |             data: [66, 23, 90, 101]
121 |         }]
122 |     },
123 |     {
124 |         chartClass: "h15 w24 chartMain7",
125 |         text: 7,
126 |         chartDetailType: "columnBar",
127 |         chartTit: "持有期限",
128 |         chartType: "bar",
129 |         chartColor: ['rgba(152,209,255,0.2)', '#83bff6', '#188df0', '#188df0'],
130 |         chartMainClass: ".chartMain7",
131 |         xData: ["1年", "1-2年", "2年以上"],
132 |         seriesData: [{
133 |             data: [249, 301, 162]
134 |         }]
135 |     }
136 | ];
137 | 
138 | Mock.mock("/data/firstchart", "get", getFirstChartInfo);
139 | 
140 | Mock.mock("/data/lineChart", "post", options => {
141 |     var { chartType, chartDetailType } = transBodyParams(options.body);
142 |     if (chartType === "line" && chartDetailType === "singleLine") {
143 |         return {
144 |             xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
145 |             seriesData: [{
146 |                 data: [32, 43, 76, 321, 9756, 32, 99]
147 |             }]
148 |         };
149 |     }
150 |     if (chartType === "line" && chartDetailType === "doubleLine") {
151 |         return {
152 |             xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
153 |             seriesData: [{
154 |                     data: [120, 132, 101, 134, 90, 230, 210]
155 |                 },
156 |                 {
157 |                     data: [220, 182, 191, 234, 290, 330, 310]
158 |                 }
159 |             ]
160 |         };
161 |     }
162 |     if (chartType === "pie") {
163 |         return {
164 |             xData: ["直接访问", "联盟广告", "视频广告", "搜索引擎"],
165 |             seriesData: [{
166 |                     value: 335,
167 |                     name: "直接访问"
168 |                 },
169 |                 {
170 |                     value: 234,
171 |                     name: "联盟广告"
172 |                 },
173 |                 {
174 |                     value: 135,
175 |                     name: "视频广告"
176 |                 },
177 |                 {
178 |                     value: 99,
179 |                     name: "搜索引擎"
180 |                 }
181 |             ]
182 |         };
183 |     }
184 |     if (chartType === "bar" && chartDetailType === "rowBar") {
185 |         return {
186 |             xData: ["Mon", "Tue", "Wed", "Thu"],
187 |             seriesData: [{
188 |                 data: [10, 52, 200, 334]
189 |             }]
190 |         };
191 |     }
192 |     if (chartType === "bar" && chartDetailType === "columnBar") {
193 |         return {
194 |             xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
195 |             seriesData: [{
196 |                 data: [10, 52, 200, 334, 390, 330, 220]
197 |             }]
198 |         };
199 |     }
200 | });


--------------------------------------------------------------------------------
/src/components/LineSimple.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="linesimple">
  3 |   <draggable :options="{disabled:disabled,animation:150,ghostClass:'blue-background-class'}" @end="moveEnd" class="moveBox">
  4 |     <div v-for="(linechartItem,linechartIndex) in getParentInfo" :key="'lineCharts' + linechartIndex" class='chartmain' :class=linechartItem.chartClass>
  5 |       <div class="chartTit">
  6 |         <p>{{linechartItem.chartTit}}</p>
  7 |         <i class="el-icon-delete" :class="[disabled ? 'offDel':'onDel']" @click="removeChart(linechartIndex)"></i>
  8 |         <i class="el-icon-edit" :class="[disabled ? 'offDel':'onDel']" @click="editChart(linechartItem,linechartIndex+1)"></i>
  9 |       </div>
 10 |       <div class="charShow"></div>
 11 |     </div>
 12 |   </draggable>
 13 |   <editChart ref='editChartRf'></editChart>
 14 | </div>
 15 | </template>
 16 | <script>
 17 | import echarts from 'echarts'
 18 | import draggable from 'vuedraggable'
 19 | import { lineChart,pieChart,barChart } from '../utils/chartview.js'
 20 | import editChart from './editChart.vue';
 21 | export default {
 22 |   data() {
 23 |     return {
 24 |       lineChart: {}, //echart初始化对象
 25 |       getParentInfo: [], //父组件传来的数据
 26 |       sortArr: [], //隐性排序移动顺序
 27 |       addChartInfo: false, //数据发生改变的flag
 28 |       disabled: true, //默认不可移动
 29 |       lineChartArr: [], //折线图arr
 30 |       pieChartArr: [], //饼图arr
 31 |       barChartArr:[],//柱状图arr
 32 |       editDialog:false,//编辑弹窗
 33 |       disab:true,
 34 |     }
 35 |   },
 36 |   props: ['addEcharts'],
 37 |   components: {
 38 |     draggable,
 39 |     editChart
 40 |   },
 41 |   computed: {
 42 | 
 43 |   },
 44 |   created() {
 45 | 
 46 |   },
 47 |   watch: {
 48 |     addEcharts: { //监听添加的数据
 49 |       handler(newValue) {
 50 |         console.log(newValue)
 51 |         this.addChartInfo = true
 52 |         for (var i = 0; i < newValue.length; i++) {
 53 |           this.sortArr.push(newValue[i])
 54 |         }
 55 |         this.chartView()
 56 |       },
 57 |       deep: true
 58 |     }
 59 |   },
 60 |   methods: {
 61 |     async getFirCharInfo() {
 62 |       let result = await this.$store.dispatch('GET_ALL_CHART_INFO')
 63 |       if (result.success) {
 64 |         for (var i = 0; i < result.data.length; i++) {
 65 |           this.getParentInfo.push(result.data[i])
 66 |           this.sortArr.push(result.data[i])
 67 |           if (result.data[i].chartType === 'line') {
 68 |             this.lineChartArr.push(result.data[i])
 69 |           }
 70 |           if (result.data[i].chartType === 'pie') {
 71 |             this.pieChartArr.push(result.data[i])
 72 |           }
 73 |           if(result.data[i].chartType === 'bar'){
 74 |             this.barChartArr.push(result.data[i])
 75 |           }
 76 |         }
 77 |         this.$nextTick(() => {
 78 |           this.chartView()
 79 |         })
 80 |       }
 81 |     },
 82 |     editChart(item,index){
 83 |       this.$store.dispatch('SET_EIDT_CHART_INFO',{
 84 |         charItem:item,
 85 |         charInd:index,
 86 |         charTit:item.chartTit
 87 |       })
 88 |       this.$nextTick(() => {
 89 |         this.$refs.editChartRf.editdialog(true)
 90 |       })
 91 |     },
 92 |     removeChart(index) {
 93 |       var clickChart = this.getParentInfo[index]
 94 |       console.log(clickChart)
 95 |       for (var i = 0; i < this.sortArr.length; i++) {
 96 |         if (this.getParentInfo[index].text === this.sortArr[i].text) {
 97 |           this.$store.dispatch('PUSH_DEL_WHICH_ONE', this.sortArr[i].text)
 98 |           this.sortArr.splice(i, 1)
 99 |           console.log(this.sortArr)
100 |         }
101 |       }
102 |       this.addChartInfo = true;
103 |       this.chartView()
104 |     },
105 |     moveEnd(env) { //修改移动后的数据顺序
106 |       var e = env || window.event
107 |       var moveChart = this.sortArr[env.oldIndex]
108 |       this.sortArr.splice(env.oldIndex, 1)
109 |       this.sortArr.splice(env.newIndex, 0, moveChart)
110 |     },
111 |     chartView() {
112 |       var that = this
113 |       if (this.addChartInfo) {
114 |         this.getParentInfo = []
115 |         this.$nextTick(() => {
116 |           for (var i = 0; i < this.sortArr.length; i++) {
117 |             this.getParentInfo.push(this.sortArr[i])
118 |           }
119 |           this.lineChartArr = []
120 |           this.pieChartArr = []
121 |           this.barChartArr = []
122 |           this.$nextTick(() => {
123 |             for (var i = 0; i < this.getParentInfo.length; i++) {
124 |               if (this.getParentInfo[i].chartType === 'line') {
125 |                 this.lineChartArr.push(this.getParentInfo[i])
126 |                 lineChart(this.lineChartArr)
127 |               }
128 |               if (this.getParentInfo[i].chartType === 'pie') {
129 |                 this.pieChartArr.push(this.getParentInfo[i])
130 |                 pieChart(this.pieChartArr)
131 |               }
132 |               if(this.getParentInfo[i].chartType === 'bar'){
133 |                 this.barChartArr.push(this.getParentInfo[i])
134 |                 barChart(this.barChartArr)
135 |               }
136 |             }
137 |           })
138 |         })
139 |       } else {
140 |         lineChart(this.lineChartArr)
141 |         pieChart(this.pieChartArr)
142 |         barChart(this.barChartArr)
143 |       }
144 |     },
145 |     parentInfo(params) { //父组件传参控制是否可以移动
146 |       this.disabled = params
147 |       if (params) console.log(this.sortArr)
148 |     }
149 |   },
150 |   mounted() {
151 |     this.getFirCharInfo()
152 |   }
153 | };
154 | </script>
155 | <style lang="scss">
156 | .chartmain {
157 |     position: relative;
158 |     display: inline-block;
159 |     margin-bottom: 1vh;
160 |     border-radius: 2px 2px 2px 2px;
161 |     box-shadow: 1px 2px 5px #ccc;
162 |     border: 1px solid #ddd;
163 |     min-height: 29vh;
164 |     width: 24vw;
165 |     margin-right: 0.5vw;
166 |     // padding-top:4vh;
167 | }
168 | .h30 {
169 |     height: 34vh !important;
170 | }
171 | .h20 {
172 |     height: 24vh !important;
173 | }
174 | .h15 {
175 |     height: 19vh !important;
176 | }
177 | .w24 {
178 |     width: 24vw !important;
179 | }
180 | .w49 {
181 |     width: 49vw !important;
182 | }
183 | .w32 {
184 |     width: 32vw !important;
185 | }
186 | .charShow {
187 |     height: calc(100% - 4vh);
188 |     width: 100%;
189 | }
190 | .chartTit {
191 |     top: 0;
192 |     width: 100%;
193 |     height: 4vh;
194 |     border-bottom: 1px solid #e7e7e7;
195 |     p {
196 |         display: inline-block;
197 |         margin-top: 0.5vh;
198 |         margin-left: 1vw;
199 |         font-size: 2.4vh;
200 |         color: #222222;
201 |         font-family: FZZZHONGJW--GB1-0;
202 |     }
203 |     i {
204 |         float: right;
205 |         margin-right: 1vw;
206 |         margin-top: 1vh;
207 |         cursor: pointer;
208 |     }
209 | }
210 | .offDel {
211 |     display: none!important;
212 | }
213 | </style>
214 | 


--------------------------------------------------------------------------------
/src/components/NavMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="navMenu">
  3 |   <el-button type="primary" plain @click="dialogTableVisible = true">添加</el-button>
  4 |   <el-dialog title="添加图表" :visible.sync="dialogTableVisible">
  5 |     <div class="choseWhichOneChart">
  6 |       <span class="describe">选择图表:</span>
  7 |       <el-select v-model="choseCWhichOne" placeholder="请选择图表" class="selectInfo" @change='seleChart'>
  8 |         <el-option v-for="Choseitem in choseCharts" :key="Choseitem.value" :label="Choseitem.label" :value="Choseitem.value">
  9 |         </el-option>
 10 |       </el-select>
 11 |       <span class="notice">(选择的图表仅供参考，不代表真实数据)</span>
 12 |       <div class="showCharts">
 13 |         <img v-for='(whichOneChartsItem,whichOneChartsIndex) in imgArr' :key="'imgArr' + whichOneChartsIndex" :src=whichOneChartsItem.imgSrc :class="{ clickChart:whichOneChartsIndex === clickChart}"
 14 |           @click="clickChoseChart(whichOneChartsItem,whichOneChartsIndex)" />
 15 |       </div>
 16 |     </div>
 17 |     <div class="chartTie">
 18 |       <span class="describe">图表名称:</span>
 19 |       <el-input v-model="chartTie" placeholder="请输入图表名称" class="selectInfo pintcharname"></el-input>
 20 |     </div>
 21 |     <div class="chartcolo">
 22 |       <selectColor :chartType='choseCWhichOne' :definiteChartType='selectChartType' v-on:changeColor='changeColo'></selectColor>
 23 |     </div>
 24 |     <div class="chartChoseHW">
 25 |       <span class="describe">宽:</span>
 26 |       <el-select v-model="wChoseWhichOne" placeholder="请选择宽度" class="selectInfo">
 27 |         <el-option v-for="wItem in chartChoseW" :key="wItem.value" :label="wItem.label" :value="wItem.value">
 28 |           <span style="float: left">{{ wItem.label }}</span>
 29 |           <span style="float: right; color: #8492a6; font-size: 13px">{{ wItem.value }}</span>
 30 |         </el-option>
 31 |       </el-select>
 32 |       <span class="describe">高:</span>
 33 |       <el-select v-model="HChoseWhichOne" placeholder="请选择高度" class="selectInfo">
 34 |         <el-option v-for="HItem in chartChoseH" :key="HItem.value" :label="HItem.label" :value="HItem.value">
 35 |           <span style="float: left">{{ HItem.label }}</span>
 36 |           <span style="float: right; color: #8492a6; font-size: 13px">{{ HItem.value }}</span>
 37 |         </el-option>
 38 |       </el-select>
 39 |     </div>
 40 |     <el-button type="text">高级选项</el-button>
 41 |     <el-button @click="dialogTableVisible = false">取消</el-button>
 42 |     <el-button @click="getChartInfo" type="primary">确定</el-button>
 43 |   </el-dialog>
 44 | </div>
 45 | </template>
 46 | <script>
 47 | import * as seleData from '../utils/dataInfor.js'
 48 | import selectColor from './selectColor'
 49 | import {
 50 |   mapState
 51 | } from 'vuex'
 52 | export default {
 53 |   data() {
 54 |     return {
 55 |       isCollapse: true,
 56 |       addNum:-1,
 57 |       dialogTableVisible: false,
 58 |       clickChart: -1,
 59 |       choseCharts: seleData.default.choseCharts,
 60 |       choseCWhichOne: '', //选择图表
 61 |       selectChartType: '', //详细图表
 62 |       chartTie: '', //图表名称
 63 |       imgArr: [],
 64 |       chartChoseW: seleData.default.chartChoseW,
 65 |       wChoseWhichOne: '', //选择的宽度
 66 |       chartChoseH: seleData.default.chartChoseH,
 67 |       HChoseWhichOne: '', //选择的高度
 68 |       seleColor:[],//选择的颜色
 69 |       colorArr:[],//颜色重新填充
 70 |     };
 71 |   },
 72 |   watch: {
 73 |     dialogTableVisible(val) {
 74 |       if (!val) {
 75 |         this.choseCWhichOne = ''
 76 |         this.selectChartType = ''
 77 |         this.imgArr = []
 78 |         this.wChoseWhichOne = ''
 79 |         this.HChoseWhichOne = ''
 80 |         this.clickChart = -1
 81 |         this.chartTie = ''
 82 |       }
 83 |     }
 84 |   },
 85 |   created() {
 86 | 
 87 |   },
 88 |   computed: {
 89 |     ...mapState({
 90 |       delText: 'delText'
 91 |     })
 92 |   },
 93 |   methods: {
 94 |     seleChart() {
 95 |       this.imgArr = []
 96 |       for (var i = 0; i < this.choseCharts.length; i++) {
 97 |         if (this.choseCharts[i].value === this.choseCWhichOne) {
 98 |           this.imgArr = this.choseCharts[i].chartType
 99 |         }
100 |       }
101 |       this.clickChart = -1
102 |       this.selectChartType = ''
103 |     },
104 |     clickChoseChart(params, index) {
105 |       this.selectChartType = params.type
106 |       this.clickChart = index
107 |     },
108 |     changeColo(data){
109 |       this.seleColor = data
110 |     },
111 |     async getChartInfo() {
112 |       var seriesData = [] ,doubleArr =[]
113 |       if (this.choseCWhichOne === '' || this.selectChartType === '' || this.wChoseWhichOne === '' || this.HChoseWhichOne === '' || this.chartTie === '' || this.seleColor.length === 0) {
114 |         this.$message.error('请检查是否有未选或未填项');
115 |         return
116 |       }
117 |       for(var i=0;i<this.seleColor.length;i++){
118 |         this.colorArr.push(this.seleColor[i].colorItem)
119 |       }
120 |       let result = await this.$store.dispatch('GET_LINE_CHART_INFO', {
121 |         chartType: this.choseCWhichOne,
122 |         chartDetailType: this.selectChartType
123 |       })
124 |       if (result.success) {
125 |         if (this.delText === -1) {
126 |           this.addNum = document.querySelector('.moveBox').children.length + 1
127 |         } else if(this.delText != -1 ) {
128 |           this.addNum = this.delText
129 |         }
130 |         if(this.selectChartType === 'doubleLine'){
131 |           for(var j=0;j<result.data.seriesData.length;j++){
132 |             for(var x=0;x<this.colorArr.length;x++){
133 |               if(j === x){
134 |                 doubleArr.push({data:result.data.seriesData[j].data,color:this.colorArr[x]})
135 |               }
136 |             }
137 |           }
138 |           seriesData = doubleArr
139 |         }else{
140 |           seriesData = result.data.seriesData
141 |         }
142 |         var inserInfo = {
143 |           chartClass: this.HChoseWhichOne + ' ' + this.wChoseWhichOne + ' ' + 'chartMain' + this.addNum,
144 |           text: this.addNum,
145 |           chartType: this.choseCWhichOne,
146 |           chartDetailType: this.selectChartType,
147 |           chartTit: this.chartTie,
148 |           chartMainClass: '.chartMain' + this.addNum,
149 |           xData: result.data.xData,
150 |           chartColor:this.colorArr,
151 |           seriesData: seriesData
152 |         }
153 |         this.$nextTick(() => {
154 |           this.$emit('addEchart', inserInfo)
155 |           this.dialogTableVisible = false
156 |           this.colorArr = []
157 |           this.$message({
158 |             message: '添加成功',
159 |             type: 'success'
160 |           });
161 |           this.$store.dispatch('PUSH_DEL_WHICH_ONE', -1)
162 |         })
163 |       }
164 |     }
165 |   },
166 |   components: {
167 |       selectColor
168 |     },
169 | };
170 | </script>
171 | <style lang="scss">
172 | .navMenu {
173 |     display: inline-block;
174 |     margin-left: 1vw;
175 |     margin-right: 2vw;
176 | }
177 | .el-dialog__header {
178 |     text-align: left;
179 | }
180 | .el-menu-vertical-demo:not(.el-menu--collapse) {
181 |     width: 100%;
182 |     min-height: 400px;
183 | }
184 | .chartChoseHW,
185 | .chartTie,
186 | .chartcolo,
187 | .choseWhichOneChart,
188 | .editName {
189 |     text-align: left;
190 |     margin-bottom: 1vh;
191 |     .describe {
192 |         padding-left: 3vw;
193 |     }
194 |     .selectInfo {
195 |         margin-left: 2vw;
196 |     }
197 |     .coloTit{
198 |       margin-right: 2vw;
199 |     }
200 |     .selectcolor{
201 |       display:inline-block;
202 |       margin-right:1vw;
203 |     }
204 |     .notice {
205 |         font-size: 1.8vh;
206 |         color: #aaa;
207 |         padding-left: 1vw;
208 |     }
209 |     .pintcharname{
210 |       width:15vw;
211 |     }
212 | }
213 | .showCharts {
214 |     width: 100%;
215 |     margin-top: 1vh;
216 |     img {
217 |         height: 20vh;
218 |         margin-left: 1vw;
219 |         display: inline-block;
220 |         cursor: pointer;
221 |         border: 1px solid #fff;
222 |     }
223 |     .clickChart {
224 |         border: 1px solid #b3d8ff;
225 |     }
226 | }
227 | </style>
228 | 


--------------------------------------------------------------------------------
/src/utils/chartview.js:
--------------------------------------------------------------------------------
  1 | import echarts from "echarts";
  2 | import {
  3 |     countNumber
  4 | } from './index';
  5 | 
  6 | var linchartResize = [],
  7 |     piechartResize = [],
  8 |     barchartResize = []
  9 | 
 10 | const lineChart = params => {
 11 |     return new line(params);
 12 | };
 13 | 
 14 | function line(params) {
 15 |     this.init(params);
 16 | }
 17 | line.prototype = {
 18 |     init: function(params) {
 19 |         var options = [];
 20 |         this.lineChartArr = params;
 21 |         for (var i = 0; i < params.length; i++) {
 22 |             options.push({
 23 |                 tooltip: {
 24 |                     trigger: 'axis'
 25 |                 },
 26 |                 grid: {
 27 |                     top: '20%',
 28 |                     bottom: '15%'
 29 |                 },
 30 |                 xAxis: {
 31 |                     type: "category",
 32 |                     data: params[i].xData,
 33 |                     axisTick: {
 34 |                         show: false
 35 |                     }
 36 |                 },
 37 |                 yAxis: {
 38 |                     type: "value",
 39 |                     axisTick: {
 40 |                         show: false
 41 |                     },
 42 |                     axisLine: {
 43 |                         show: false
 44 |                     }
 45 |                 },
 46 |                 series: (function() {
 47 |                     var series = [];
 48 |                     for (var j = 0; j < params[i].seriesData.length; j++) {
 49 |                         if (params[i].chartDetailType === "singleLine") {
 50 |                             var item = {
 51 |                                 data: params[i].seriesData[j].data,
 52 |                                 type: "line",
 53 |                                 itemStyle: {
 54 |                                     color: params[i].chartColor[0]
 55 |                                 },
 56 |                                 areaStyle: {
 57 |                                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 58 |                                             offset: 0,
 59 |                                             color: params[i].chartColor[0]
 60 |                                         },
 61 |                                         {
 62 |                                             offset: 0.4,
 63 |                                             color: params[i].chartColor[1]
 64 |                                         },
 65 |                                         {
 66 |                                             offset: 1,
 67 |                                             color: "#fff"
 68 |                                         }
 69 |                                     ])
 70 |                                 },
 71 |                                 symbol: null,
 72 |                                 symbolSize: 0
 73 |                             };
 74 |                             series.push(item);
 75 |                         }
 76 |                         if (params[i].chartDetailType === "doubleLine") {
 77 |                             var item = {
 78 |                                 data: params[i].seriesData[j].data,
 79 |                                 type: "line",
 80 |                                 itemStyle: {
 81 |                                     color: params[i].seriesData[j].color
 82 |                                 },
 83 |                                 symbol: null,
 84 |                                 symbolSize: 0
 85 |                             };
 86 |                             series.push(item);
 87 |                         }
 88 |                     }
 89 |                     return series;
 90 |                 })()
 91 |             });
 92 |         }
 93 |         this.setLinechart(options);
 94 |     },
 95 |     setLinechart: function(options) {
 96 |         linchartResize = [];
 97 |         for (var i = 0; i < this.lineChartArr.length; i++) {
 98 |             for (var j = 0; j < options.length; j++) {
 99 |                 if (i === j) {
100 |                     this.lineChart = echarts.init(
101 |                         document.querySelector(
102 |                             this.lineChartArr[i].chartMainClass + " .charShow"
103 |                         )
104 |                     );
105 |                     linchartResize.push(this.lineChart);
106 |                     this.lineChart.setOption(options[j]);
107 |                 }
108 |             }
109 |         }
110 |         window.addEventListener(
111 |             "resize",
112 |             function() {
113 |                 for (var x = 0; x < linchartResize.length; x++) {
114 |                     linchartResize[x].resize();
115 |                 }
116 |             }.bind(this)
117 |         );
118 |     }
119 | };
120 | 
121 | const pieChart = params => {
122 |     return new pie(params);
123 | };
124 | 
125 | function pie(params) {
126 |     this.init(params);
127 | }
128 | pie.prototype = {
129 |     init: function(params) {
130 |         var options = [];
131 |         this.pieChartArr = params;
132 |         for (var i = 0; i < params.length; i++) {
133 |             options.push({
134 |                 tooltip: {
135 |                     trigger: "item",
136 |                     formatter: "{a} <br/>{b}: {c} ({d}%)"
137 |                 },
138 |                 legend: {
139 |                     orient: "vertical",
140 |                     x: "right",
141 |                     y: "center"
142 |                 },
143 |                 series: function() {
144 |                     var series = [];
145 |                     if (params[i].chartDetailType === "circlePie") {
146 |                         var circlePieColor = params[i].chartColor
147 |                         var item = {
148 |                             type: "pie",
149 |                             radius: ["50%", "70%"],
150 |                             center: ["25%", "60%"],
151 |                             avoidLabelOverlap: false,
152 |                             label: {
153 |                                 normal: {
154 |                                     show: false,
155 |                                     position: "center"
156 |                                 },
157 |                                 emphasis: {
158 |                                     show: true,
159 |                                     textStyle: {
160 |                                         fontSize: "18",
161 |                                         fontWeight: "bold"
162 |                                     }
163 |                                 }
164 |                             },
165 |                             labelLine: {
166 |                                 normal: {
167 |                                     show: false
168 |                                 }
169 |                             },
170 |                             data: params[i].seriesData,
171 |                             itemStyle: {
172 |                                 color: function(param) {
173 |                                     return circlePieColor[param.dataIndex]
174 |                                 }
175 |                             }
176 |                         };
177 |                         series.push(item);
178 |                     }
179 |                     if (params[i].chartDetailType === "areaPie") {
180 |                         var areaPieColor = params[i].chartColor
181 |                         var item = {
182 |                             type: "pie",
183 |                             radius: ["10%", "60%"],
184 |                             center: ["30%", "50%"],
185 |                             roseType: "radius",
186 |                             label: {
187 |                                 normal: {
188 |                                     show: false
189 |                                 },
190 |                                 emphasis: {
191 |                                     show: true
192 |                                 }
193 |                             },
194 |                             lableLine: {
195 |                                 normal: {
196 |                                     show: false
197 |                                 },
198 |                                 emphasis: {
199 |                                     show: true
200 |                                 }
201 |                             },
202 |                             data: params[i].seriesData,
203 |                             itemStyle: {
204 |                                 color: function(param) {
205 |                                     return areaPieColor[param.dataIndex]
206 |                                 }
207 |                             }
208 |                         };
209 |                         series.push(item);
210 |                     }
211 |                     return series;
212 |                 }.bind(this)()
213 |             });
214 |         }
215 |         this.setPieChart(options);
216 |     },
217 |     setPieChart: function(options) {
218 |         piechartResize = [];
219 |         for (var i = 0; i < this.pieChartArr.length; i++) {
220 |             for (var j = 0; j < options.length; j++) {
221 |                 if (i === j) {
222 |                     this.lineChart = echarts.init(
223 |                         document.querySelector(
224 |                             this.pieChartArr[i].chartMainClass + " .charShow"
225 |                         )
226 |                     );
227 |                     piechartResize.push(this.lineChart);
228 |                     this.lineChart.setOption(options[j]);
229 |                 }
230 |             }
231 |         }
232 |         window.addEventListener(
233 |             "resize",
234 |             function() {
235 |                 for (var x = 0; x < piechartResize.length; x++) {
236 |                     piechartResize[x].resize();
237 |                 }
238 |             });
239 |     }
240 | };
241 | 
242 | const barChart = params => {
243 |     return new bar(params);
244 | };
245 | 
246 | function bar(params) {
247 |     this.init(params);
248 | }
249 | bar.prototype = {
250 |     init: function(params) {
251 |         var options = []
252 |         this.barChartArr = params
253 |         for (var i = 0; i < params.length; i++) {
254 |             if (params[i].chartDetailType === "rowBar") {
255 |                 options.push({
256 |                     xAxis: {
257 |                         axisTick: {
258 |                             show: false
259 |                         },
260 |                         axisLine: {
261 |                             show: true,
262 |                             lineStyle: {
263 |                                 type: 'solid',
264 |                                 color: '#e7e7e7',
265 |                                 width: '2'
266 |                             }
267 |                         },
268 |                         splitLine: { show: false },
269 |                         type: 'value',
270 |                         boundaryGap: [0, 0],
271 |                         axisLabel: { interval: 0 }
272 |                     },
273 |                     grid: {
274 |                         left: '23%',
275 |                         top: '20%',
276 |                         bottom: '3%'
277 |                     },
278 |                     yAxis: {
279 |                         type: 'category',
280 |                         data: params[i].xData,
281 |                         axisTick: [{
282 |                             show: false
283 |                         }],
284 |                         axisLine: {
285 |                             show: true,
286 |                             lineStyle: {
287 |                                 type: 'solid',
288 |                                 color: '#e7e7e7',
289 |                                 width: '2'
290 |                             }
291 |                         },
292 |                         axisLabel: {
293 |                             textStyle: {
294 |                                 fontSize: '14',
295 |                                 fontFamily: 'PingFang SC Medium',
296 |                                 color: '#666'
297 |                             }
298 |                         }
299 |                     },
300 |                     series: function() {
301 |                         var rowBarColor = params[i].chartColor
302 |                         var series = [];
303 |                         for (var j = 0; j < params[i].seriesData.length; j++) {
304 |                             var item = {
305 |                                 type: 'bar',
306 |                                 tooltip: { show: false },
307 |                                 barWidth: 16,
308 |                                 data: params[i].seriesData[j].data,
309 |                                 itemStyle: {
310 |                                     normal: {
311 |                                         color: (params) => {
312 |                                             return rowBarColor[params.dataIndex]
313 |                                         }
314 |                                     }
315 |                                 }
316 |                             };
317 |                             series.push(item);
318 |                         }
319 |                         return series;
320 |                     }()
321 |                 })
322 |             }
323 |             if (params[i].chartDetailType === "columnBar") {
324 |                 options.push({
325 |                     tooltip: {
326 |                         trigger: 'axis',
327 |                         axisPointer: {
328 |                             type: 'shadow'
329 |                         }
330 |                     },
331 |                     xAxis: {
332 |                         data: params[i].xData,
333 |                         axisLabel: {
334 |                             textStyle: {
335 |                                 color: '#AAAAAA'
336 |                             }
337 |                         },
338 |                         axisTick: {
339 |                             show: false
340 |                         },
341 |                         axisLine: {
342 |                             show: false
343 |                         },
344 |                         z: 10
345 |                     },
346 |                     grid: {
347 |                         left: '15%',
348 |                         top: '20%',
349 |                         bottom: '15%'
350 |                     },
351 |                     yAxis: {
352 |                         axisLine: {
353 |                             show: false
354 |                         },
355 |                         axisTick: {
356 |                             show: false
357 |                         },
358 |                         axisLabel: {
359 |                             textStyle: {
360 |                                 color: '#AAAAAA'
361 |                             }
362 |                         }
363 |                     },
364 |                     dataZoom: [{
365 |                         type: 'inside'
366 |                     }],
367 |                     series: function() {
368 |                         var series = []
369 |                         for (var j = 0; j < params[i].seriesData.length; j++) {
370 |                             this.dataShadow = []
371 |                             this.yMax = Math.max.apply(null, params[i].seriesData[j].data)
372 |                             var countNum = countNumber(this.yMax)
373 |                             for (var m = 0; m < params[i].seriesData[j].data.length; m++) {
374 |                                 this.dataShadow.push(countNum);
375 |                             }
376 |                             var item = {
377 |                                 type: 'bar',
378 |                                 itemStyle: {
379 |                                     normal: { color: params[i].chartColor[0] }
380 |                                 },
381 |                                 barGap: '-100%',
382 |                                 barCategoryGap: '40%',
383 |                                 data: this.dataShadow,
384 |                                 animation: false
385 |                             }
386 |                             var item1 = {
387 |                                 type: 'bar',
388 |                                 itemStyle: {
389 |                                     normal: {
390 |                                         color: new echarts.graphic.LinearGradient(
391 |                                             0, 0, 0, 1, [
392 |                                                 { offset: 0, color: params[i].chartColor[1] },
393 |                                                 { offset: 0.5, color: params[i].chartColor[2] },
394 |                                                 { offset: 1, color: params[i].chartColor[3] }
395 |                                             ]
396 |                                         )
397 |                                     },
398 |                                     emphasis: {
399 |                                         color: new echarts.graphic.LinearGradient(
400 |                                             0, 0, 0, 1, [
401 |                                                 { offset: 0, color: params[i].chartColor[3] },
402 |                                                 { offset: 0.7, color: params[i].chartColor[2] },
403 |                                                 { offset: 1, color: params[i].chartColor[1] }
404 |                                             ]
405 |                                         )
406 |                                     }
407 |                                 },
408 |                                 data: params[i].seriesData[j].data
409 |                             }
410 |                             series.push(item, item1)
411 |                         }
412 |                         return series;
413 |                     }.bind(this)()
414 |                 })
415 |             }
416 |             this.setBarChart(options)
417 |         }
418 |     },
419 |     setBarChart: function(options) {
420 |         barchartResize = [];
421 |         for (var i = 0; i < this.barChartArr.length; i++) {
422 |             for (var j = 0; j < options.length; j++) {
423 |                 if (i === j) {
424 |                     this.lineChart = echarts.init(
425 |                         document.querySelector(
426 |                             this.barChartArr[i].chartMainClass + " .charShow"
427 |                         )
428 |                     );
429 |                     barchartResize.push(this.lineChart);
430 |                     this.lineChart.setOption(options[j]);
431 |                 }
432 |             }
433 |         }
434 |         window.addEventListener(
435 |             "resize",
436 |             function() {
437 |                 for (var x = 0; x < barchartResize.length; x++) {
438 |                     barchartResize[x].resize();
439 |                 }
440 |             });
441 |     }
442 | };
443 | export { lineChart, pieChart, barChart };


--------------------------------------------------------------------------------