数据charts图可配置化(一)

以前作公司的数据展现需求，制做了一个可视化系统。 该系统美其名曰是可视化，不过说到底不过是echarts图展现的配置化工具罢了。

这里放几张效果图

需求

可建立菜单

可建立小组

可动态拖拽charts图，自定义位置信息

可选择图表类型，经过图表类型选择展现须要展现的图表。其中主要包括（折线、柱状、饼图、散点、雷达、表格、文字、数字、折线柱状组合图、柱状堆叠、漏斗、地图等类型）

输入sql返回数据，从而配置数据

这里讲一些通用化的配置

技术栈

vue + vue-router + vuex

echarts

插件

axios

axios请求插件，不过多赘述

echarts

echarts是百度的图表展现插件，详情能够点击echarts

element-ui

element-ui后台UI库

js-cookie

js-cookie是cookie插件,如今github应该有12k+star

node-sass

normalize.css

样式初始化

vue-avatar

用户头像生成

vue-grid-layout

容器拖拽组件

图表功能

x轴

首先折线图、散点图、柱状图x轴的数据来源，x轴能够是数值轴，也能够是时间轴。不过大多数的状况都是数值轴，由于后台的时间来源通常会成为其主要来源。

y轴

y轴通常都是value类型。但y轴也有可能存在单位（如%）一说，因此能够添加在浮层或者其label。

标题

标题的输入

位置

图显示的位置信息