接到一个需求,让用户能够通过配置, 配置出自己想要的统计图, 填入数据

分析需求:

• 需要客户配置的数据项有哪些?

• 客户配置数据的存储

      JSON转String 存数据库就行.....

一.可配置的项

1. 主标题(带颜色),副标题(带颜色)
2. 图表种类(分为  坐标系,非坐标系图, 差别在于 有无 xAxis, yAxis 属性)
3. 图表背景色
4. 是否需要开启类目
5. 是否需要开启工具(左上角下载图片等工具)
6. 类目的位置
7. 图表的类型 暂时有   柱状图 bar ,折线图 line, 饼图 pie, 雷达图 radar
8. 坐标系图 位置大小, 非坐标系 位置, 大小
9. 饼图 是否开启南丁格尔图, 雷达图是否开启透明度

二.基本效果图

---

三.代码

<template>
  <div class="i-container">
    <div class="i-main" style="padding:0;">
      <el-form ref="dataForm" :model="data" :rules="validRules" label-position="right" label-width="20%"
        style="width: 100%;height:100%;overflow:hidden;">
        <el-row style="height:100%;">
          <el-col :span="12" style="height:100%;overflow:auto;padding:10px 20px;">
            <div class="i-title max bold">基本信息</div>
            <el-form-item label="类型" prop="type">
              <el-select v-model="data.type">
                <el-option v-for="item in dictData['CHART']" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="组件图名称" prop="name">
              <el-input v-model="data.name" placeholder="组件图名称" />
            </el-form-item>
            <!-- <el-form-item label="状态" prop="status">
              <el-select v-model="data.status">
                <el-option v-for="item in dictData['status']" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item> -->

            <div class="i-title max bold">配置信息</div>
            <!-- <div v-for="(item,index) in opts" :key="index">
              <el-form-item :label="item.label">
                <el-input v-if="item.type=='input'" v-model="optionItem[item.code]" @change="setOptions(item.code)"/>
              </el-form-item>
            </div> -->
            <el-form-item label="图表种类">
              <el-select v-model="subConfig.tbzl"  @change="initOptions(subConfig.tbzl)">
                <el-option v-for="(item,index) in TBZL" :key="index" :value="item.value" :label="item.text"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="图表主标题">
                <el-input v-model="options.title.text" style="width:50%"/>
                <el-color-picker v-model="options.title.textStyle.color" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="图表副标题">
                <el-input v-model="options.title.subtext" style="width:50%"/>
                <el-color-picker v-model="options.title.subtextStyle.color" show-alpha></el-color-picker>
            </el-form-item> -->
            <el-form-item label="图表背景色">
                <el-color-picker v-model="options.backgroundColor" show-alpha></el-color-picker>
            </el-form-item>
           
            <el-form-item label="开启类目">
              <el-switch v-model="subConfig.legend" @change="initOptionsLegend()"></el-switch>
            </el-form-item>
            <el-form-item label="开启工具">
              <el-switch v-model="subConfig.toolbox" @change="initOptionsToolbox()"></el-switch>
            </el-form-item>
            <el-form-item label="坐标系调整" v-if="subConfig.tbzl=='zbxt'">
              <el-switch v-model="subConfig.posit" @change="initOptionsGrid()"></el-switch>
            </el-form-item>

            <div v-if="subConfig.legend">
              <div class="i-title max bold">类目配置</div>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="左">
                    <el-input v-model="options.legend.left" @change="initOptionsLegendPoist(options.legend.left,'left')" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="右">
                    <el-input v-model="options.legend.right" @change="initOptionsLegendPoist(options.legend.right,'right')" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="上">
                    <el-input v-model="options.legend.top" @change="initOptionsLegendPoist(options.legend.top,'top')"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="下">
                    <el-input v-model="options.legend.bottom" @change="initOptionsLegendPoist(options.legend.top,'bottom')"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>



            <div v-if="subConfig.posit">
              <div class="i-title max bold">位置|大小</div>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="左">
                    <el-input v-model="subConfig.grid.x"  @change="initOptionsGrid(subConfig.grid)" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="右">
                    <el-input v-model="subConfig.grid.x2" @change="initOptionsGrid(subConfig.grid)"  />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="上">
                    <el-input v-model="subConfig.grid.y"  @change="initOptionsGrid(subConfig.grid)" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="下">
                    <el-input v-model="subConfig.grid.y2" @change="initOptionsGrid(subConfig.grid)" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col :span="12">
                  <el-form-item label="宽度">
                    <el-input v-model="subConfig.grid.width" @change="initOptionsGrid(subConfig.grid)" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="高度">
                    <el-input v-model="subConfig.grid.height" @change="initOptionsGrid(subConfig.grid)" />
                  </el-form-item>
                </el-col>
              </el-row> -->
            </div>


            
            <el-table :data="options.series" border fit  v-if="subConfig.tbzl">
              <el-table-column label="配置项">
                <template slot-scope="{row, $index}">
                  <el-form-item label="图表类型">
                    <el-select v-model="row.type" @change="initOptionSeriesData(row.type,$index)">
                      <el-option v-for="item in selectionTBLX" :key="item.value" :value="item.value" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="类目名称" v-if="row.type!='radar'">
                    <el-input v-model="row.name" @change="initOptionSeriesName(row.type,row.name,$index)" placeholder="类目名称"/>
                  </el-form-item>
                  <el-form-item label="南丁格尔图" v-if="row.type=='pie'">
                    <el-switch v-model="row.roseType" @change="initOptionsRoseType()"></el-switch>
                  </el-form-item>
                  <!-- <el-form-item label="图表数据">
                    <el-input v-text="row.data"  placeholder="图表数据"/>
                  </el-form-item> -->
                  <el-form-item label="图表位置" v-if="row.type=='pie'||row.type=='radar'">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="X轴">
                          <el-input v-model="row.Xcenter" @change="initOptionsCenter(row.Xcenter,row.Ycenter,$index,row.type)"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="Y轴">
                          <el-input v-model="row.Ycenter" @change="initOptionsCenter(row.Xcenter,row.Ycenter,$index,row.type)"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item label="图表大小" v-if="row.type=='pie'">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="内圈">
                          <el-input v-model="row.Xradius" @change="initOptionsRadius(row.Xradius,row.Yradius,$index,row.type)"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="外圈">
                          <el-input v-model="row.Yradius" @change="initOptionsRadius(row.Xradius,row.Yradius,$index,row.type)"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>

                  <el-form-item label="透明度" v-if="row.type=='radar'">
                    <el-slider v-model="row.Topacity" @change="initOptionsOpacity(row.Topacity,$index,row.type)" style="width:50%"></el-slider>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label width="40">
                <template slot="header">
                  <i class="s-btn-add el-icon-circle-plus" @click="addRow('series')"></i>
                </template>
                <template slot-scope="{row, $index}">
                  <i class="s-btn-del el-icon-remove" @click="removeRow('series',$index)"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          
          <el-col :span="12" style="padding:10px 20px;height:100%">
            <el-tabs v-model="activeName" style="height:100%;" class="s-tabs">
              <el-tab-pane label="图形实例" name="txsl">
                  <div class="s-optionDiv" ref="sOpt"></div>
                  <el-button  type="primary" class="s-btn-top"  icon="el-icon-refresh" @click="doFlush()">刷新</el-button>
              </el-tab-pane>
              <el-tab-pane label="源码" name="ym" >
                    <el-input :rows="30" type="textarea" v-model="optionCode" @change="ChangeOptions(optionCode)"></el-input>
                    <el-button @click="doJSON(optionCode)" class="s-btn-top" type="primary" icon="el-icon-tickets">格式化</el-button>
              </el-tab-pane>
              <el-tab-pane label="测试数据" name="cssj" >
                    <el-input :rows="30" type="textarea" v-model="optionData" @change="ChangeOptionsData(optionData)"></el-input>
                    <el-button @click="doJSON(optionData)" class="s-btn-top" type="primary" icon="el-icon-tickets">格式化</el-button>
              </el-tab-pane>
            </el-tabs>
           
          </el-col>
        </el-row>
        
      </el-form>
    </div>
    <div class="i-footer border">
      <el-button :loading="loading" type="primary" icon="el-icon-check" @click="update()">提交</el-button>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import { loadEntity, updateEntity, saveEntity,dictData,dictLoad } from "./data";
  export default {
    props: {
      params: {
        required: true,
        default: {}
      }
    },
    data() {
      return {
        activeName:"txsl",
        loading: false,
        dictData,
        optionItem:{},
        data: {},
        chart:null,
        // opts:[
        //   {label:"图表主标题",code:"title.text",type:"input",dict:""},
        //   {label:"主标题颜色",code:"title.textStyle.color",type:"input",dict:""},
        //   {label:"图表副标题",code:"title.subtext",type:"input",dict:""}, 
        //   {label:"副标题颜色",code:"title.subtextStyle.color",type:"input",dict:"",children:[
        // ]}, 
           
        // ],
        TBZL: [
          {
            text: '坐标系图',
            value:'zbxt',
            TBLX: [
              { "name": "柱状图", "value": "bar", "ptype": "zbxt" },
              { "name": "折线图", "value": "line", "ptype": "zbxt" },
            ]
          }, 
          {
            text: '非坐标系图',
            value:'fzbxt',
            TBLX: [
              { "name": "饼图", "value": "pie", "ptype": "fzbxt" },
              { "name": "雷达图", "value": "radar", "ptype": "fzbxt" },
            ]
          }, 
        ],
  
        options:{ 
          legend:{},
          series:[],
          title:{
            text:null,
            textStyle:{},
            subtext:null,
            subtextStyle:{}
          },
        },
        toption:{
          
        },
        optionCode:null,
        optionData:null,
        subConfig:{
          legend:true,
          grid:{},
        },
        validRules: {
          name: [
            { max: 255, message: "长度不能超过255", trigger: "blur" }
          ]
          ,option: [
            { max: 2000, message: "长度不能超过2000", trigger: "blur" }
          ]
          ,data: [
            { max: 2000, message: "长度不能超过2000", trigger: "blur" }
          ]
          ,type: [
            { max: 255, message: "长度不能超过255", trigger: "blur" }
          ]
        }
      };
    },
    computed: {
      selectionTBLX: {
        get: function() {
          let _this = this;
          return this.TBZL.filter(function(item) {
            return item.value == _this.subConfig.tbzl;
          })[0].TBLX;
        }
      }
    },
    watch:{
      options:{
        immediate:false,
        deep:true,
        handler(){
          const item = this.$refs.sOpt
          this.chart = echarts.init(item);
          this.chart.setOption(this.options,true); 
          this.optionCode =JSON.stringify(this.options);
          this.optionData =JSON.stringify(this.options.series)
          this.optionCode=this.doJSON(this.optionCode)
          this.optionData=this.doJSON(this.optionData)
        }
      },
    },
    mounted() {
      let _this = this;
      this.dictLoad();
      const id= this.params.id;
      if (id) {
        loadEntity({ id: id }).then(function(response) {
          _this.data = response.data;
          _this.options = JSON.parse(_this.data.options);

          //如果数据类型是折线图或柱状图, 则显示坐标系图 同时取位置信息出来
          if(_this.options.series[0].type=='line'||_this.options.series[0].type=='bar'){
            _this.subConfig.tbzl="zbxt";
            if(_this.options.grid!=null){
              _this.subConfig.posit=true;
              _this.subConfig.grid = _this.options.grid;
            }
          }else{
            _this.subConfig.tbzl="fzbxt";
          }
          //有工具开启工具栏
          if(_this.options.toolbox!=null){
            _this.subConfig.toolbox=true;
          }
        });
      }
    },
    methods: {
      dictLoad,
      setOptions(pcode){
        const val = this.optionItem[pcode]
        const codes = pcode.split(".") 
        let data = this.options;
        const size = codes.length;
        for(let i=0; i<size; i++){
          const code = codes[i];
          if((i+1)==size){
             data[code] = val;
          }else{ 
            if(!data[code]){ 
              this.$set(data,code,{}) 
            }
            data = data[code];
          }
        }
      },
      update() {
        let _this = this;
        this.$refs.dataForm.validate((valid)=>{
          if(valid){
		        if (_this.data.id) {
              _this.loading = true
              _this.data.options = JSON.stringify(_this.options);
		          updateEntity(this.data).then(function () {
		            _this.loading = false
		            _this.Alert("提交成功");
		            _this.close();
		          });
		        } else {
              _this.loading = true
              _this.data.options = JSON.stringify(_this.options);
		          saveEntity(_this.data).then(function () {
		            _this.loading = false
		            _this.Alert("提交成功");
		            _this.close();
		          });
		        }
        	}
        })
      },
      close() {
        this.$emit("close", { type: "edit" });
      },
      addRow(key) {
        if (!this.options[key]) {
          this.$set(this.options, key, []);
        }
        this.options[key].push({});
      },
      removeRow(key, index) {
        this.options[key].splice(index, 1);
      },
      doFlush(){
        this.chart.setOption(this.options,true); 
      },
      ChangeOptions(code){
        this.options = JSON.parse(code);
      },
      ChangeOptionsData(code){
        this.options.series = JSON.parse(code);
      },
      /**
       * 格式化JSON
       */
      doJSON(txt,sc){
        sc = sc?sc:"  ";
        txt = txt.replace(/\-\-(.+)\n/ig,function(code){
          return code.replace(/\[/ig,"#ZKL#").replace(/\]/ig,"#ZKR#").replace(/\{/ig,"#DKL#").replace(/\}/ig,"#DKR#").replace(/\,/ig,"#DH#");
        })
        txt = txt.replace(/\n\s*/ig,"");
        txt = txt.replace(/\<\!\[CDATA\[(.*)\]\]\>/ig,"#CD#$1#DC#");
        txt = txt.replace(/\"([^\"]*)\"/ig,function($0){
            var txt = $0;
            return txt.replace(/\[/ig,"#ZKL#").replace(/\]/ig,"#ZKR#").replace(/\{/ig,"#DKL#").replace(/\}/ig,"#DKR#").replace(/\,/ig,"#DH#");
          });
        txt = txt.replace(/(,|\[|\]|\{|\})/ig,"#SP#$1#SP#").replace(/(#SP#){2,}/ig,"#SP#").replace(/^#SP#/i,""); 
        var ta = txt.split("#SP#");
        var space="";
        for(var i=0;i<ta.length;i++){
          var f = ta[i];
          if(f=="{"||f=="["){
            ta[i] = space+ta[i];
            space+=sc;
          }else if(f=="}"||f=="]"){
            space = space.replace(sc,"");
            ta[i] = space+ta[i];
          }else{
            ta[i] = space+ta[i];
          }
        }
        var rstr =  ta.join("\n").replace(/\,\s*/ig,",").replace(/ \,/ig,",").replace(/#ZKR#/g,"]").replace(/#ZKL#/g,"[").replace(/#DKL#/g,"{").replace(/#DKR#/g,"}").replace(/#DH#/g,",")
        rstr = rstr.replace(/\:\n*\s*(\{|\[)/ig,":$1").replace(/#CD#/ig,"<![CDATA[").replace(/#DC#/ig,"]]>");
        return rstr;
      },
      /**
       * 切换图表类型,重置options
       */
      initOptions(value){
        this.options ={ 
          legend:{},
          series:[],
          title:{
            text:null,
            textStyle:{},
            subtext:null,
            subtextStyle:{}
          },
        };
        if(value=='zbxt'){
          var  tOptions = {
            xAxis:{type:"category",data:['实例一','实例二','实例三','实例四','实例五','实例六','实例七']},
            yAxis:{type:"value"},
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
          }
          this.options.xAxis = tOptions.xAxis;
          this.options.yAxis = tOptions.yAxis;
          this.options.tooltip = tOptions.tooltip;
        }else if(value=="fzbxt"){
        }
      },
      /**
       * 生成测试数据
       */
      initOptionSeriesData(type,index){
        //如果是坐标系图, 直接随机生成一个数组
        var array = [];
        if(this.subConfig.tbzl=='zbxt'){
          for(var i=1; i<8;i++){
            array.push(Math.floor(Math.random()*100+1))
          }
          this.options.series[index].data = array;
        }
        //非坐标系图 判断 是 圆图 还是雷达图
        else if(this.subConfig.tbzl="fzbxt"){ 
          //如果是圆图, 则随机生成7个对象存到数组里面 对象结构为 {value:xx,name:xx}
          //存储类目
           var tmpLegend = [];
          if(type=='pie'){
            for(var i=1; i<8;i++){
              var name  = "实例"+i*(index+1)
              tmpLegend.push(name)
              array.push({value:Math.floor(Math.random()*100+1),name:name})
            }
            this.options.series[index].data = array;
            var obj = {data:tmpLegend}
            //如果是第一条数据 直接赋值对象,如果不是第一条, 直接合并对象的data数组,避免覆盖
            if(this.options.legend.data!=null){
              this.options.legend.data = tmpLegend.concat(this.options.legend.data);
            }else{
              this.options.legend = obj;
            }
            var tooltip={trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'};
            this.options.tooltip = tooltip;
          }
          //如果是雷达图 则对象结构为 {value:[],name:xx}
          else if(type=='radar'){
            var tmpObj = [];
            var tmpindicator = [];
            
            //模拟数据
            for(var i=0;i<3;i++){
              var  name = "数据"+i;
              for(var j=1; j<6; j++){
                tmpObj.push(Math.floor(Math.random()*100+1))
              }
              tmpLegend.push(name);
              array.push({value:tmpObj,name:name})
              tmpObj = [];
            }

            //模拟项
            for(var i=1;i<6;i++){
              var name ="实例"+i*(index+1);
              tmpindicator.push({name:name,max:100});
            }
            this.options.series[index].data = array;
            var radar={indicator:tmpindicator}
            var legend = {data:tmpLegend}
            this.options.radar = radar;
            this.options.tooltip={ trigger: 'item'};
            this.options.legend =  legend.concat(this.options.legend);
          }
        }
        
      },
      /**
       * 针对坐标系 添加类目
       */
      initOptionSeriesName(type,name,index){
        if(type=='zbxt'){
          this.options.legend.data[index]=name;
        }
      },
      /**
       * 类目开关处理
       */
      initOptionsLegend(){
        //默认开启类目,当点击取消之后 再点击开启类目,就把之前已经保存的类目重新赋值
        if(this.subConfig.legend){
          for(var i=0; i<this.options.series.length; i++){
              var obj  = this.options.series[i];
              //坐标系图和非坐标系图的 数据结构不同,坐标系图 类目 直接 series[i].name 就行
              if(this.subConfig.tbzl=='zbxt'){
                this.options.legend.data.push(obj.name);
              }
              //非坐标系图类目 数据结构为 series[i].data[j].name;
              else if(this.subConfig.tbzl=='fzbxt'){
                var tmpObj = obj.data;
                for(var j=0; j<tmpObj.length; j++){
                   this.options.legend.data.push(tmpObj[j].name);
                }
              }
          }
        }else{
          //关闭类目,就把类目数据全部清空
          this.options.legend.data=[];
        }
      },
      /**
       * 工具栏开关处理
       */
      initOptionsToolbox(){
        //默认关闭工具栏
        var toolbox={
          show: true,
          feature: {
              dataZoom: { yAxisIndex: 'none'},
              dataView: {readOnly: false},
              // magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
          }
        }
        // 开启工具栏 把定好的对象赋值上去就行,
        // 关闭工具栏 把定好的对象赋空就行
        if(this.subConfig.toolbox){
          this.options.toolbox = toolbox;
        }else{
          this.options.toolbox =null;
        }
      },
      /**是否开启南丁格尔图 */
      initOptionsRoseType(type,index,bol){
        if(type=='pie' && bol){
          this.options.series[index].roseType='area';
        }else{
          delete this.options.series[index].roseType;
        }
      },
      //坐标系图开启位置调整
      initOptionsGrid(obj){
        if(this.subConfig.tbzl=='zbxt'){
          if(this.subConfig.posit==true){
            this.options.grid = obj;
          }else{
            delete this.options.grid;
          }
        }
      },

      //非坐标系开启位置调整
      initOptionsCenter(x,y,index,type){
        var array =[x,y];
        if(type=='pie'){
          this.options.series[index].center = array;
        }else if(type=='radar'){
          this.options.radar.center = array;
        }
      },
      //非坐标系开启大小调整
      initOptionsRadius(x,y,index,type){
        var array =[x,y];
        if(type=='pie'){
          this.options.series[index].radius = array;
        }
        // else if(type=='radar'){
        //   this.options.radar.radius = array;
        // }
      },

      /***
       * 雷达图调整区域透明度
       * data :数值
       * index:第几项数据
       * type:图表类型
       */
      initOptionsOpacity(data,index,type){
        if(type=="radar"){
          var areaStyle = {opacity:(data/100)}
          this.options.series[index].areaStyle = areaStyle;
        }
      },

      /**
       * value:值
       * type:类型
       */
      initOptionsLegendPoist(value,type){
        if(value==""){
          if(type=='left'){
            delete this.options.legend.left;
          }else if(type=='right'){
            delete this.options.legend.right;
          }else if(type=="top"){
            delete this.options.legend.top;
          }else if(type=="bottom"){
            delete this.options.legend.bottom;
          }
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .s-optionDiv{
    width: 100%;
    height: 100%;
    border: 1px solid #dddddd;
  }
  .s-tabs{
    position: relative;
    /deep/ .el-tabs__content{
      position: absolute;
      top:50px;
      bottom:0;
      left:0;
      right:0;
      overflow: inherit;
      .el-tab-pane{
        height: 100%;
      }
    }
    .s-btn-top{
      position: absolute;
      top:-50px;
      right:0;
    }
  }
</style>

四.总结

还存在的小bug

1. 非options的直接属性， 借用subConfig 来实现的数据 渲染不同步， 需要点击刷新重新渲染，右侧的图才会渲染成功
2. 类目位置调整， 应该是 有了 left有了值， right 就不能有值， 一样， top有值bottom 就不能有值，否则后者渲染失效
3. 数据源码的源码刷新不及时
4. 在选中饼图 调整位置的时候  会保存Xcenter ，Ycenter 俩个 无用参数
5. 等

代码存在的缺陷

1. 多次判断坐标种类  及 subConfig.tbzl 和 图表类型  options.type  是否可以统一处理，方便扩展
2. 每次切换坐标系图和非坐标系图的时候， 重置 this.options 是否可以事项保存一个值， 而不是用重新赋值的方法
3. 由于JS功力有限....多次借助其他对象来操作数据，造成Xcenter 等这样不需要的参数  参杂在option里面
4. 提供的可选功能有限
5. 等

可改进

1. 在非坐标系图多项数据的时候， 例如 俩个饼图， 是否可以初始化 位置，大小， 进行默认排位置
2. 需要提供， 主副标题及颜色的话， 加俩个属性就行了
3. 最主要的是 数据不能及时同步和渲染.功力太差
4. 等