Vue+ElementUI（饿了么UI）+Echarts实现图表⾃适应配置接到⼀个需求，让⽤户能够通过配置, 配置出⾃⼰想要的统计图, 填⼊数据
分析需求:
需要客户配置的数据项有哪些?
客户配置数据的存储
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" >
<el-form ref="dataForm" :model="data" :rules="validRules" label-position="right" label-width="20%"
>
<el-row >
<el-col :span="12" >
<div class="i-title max bold">基本信息</div>
<el-form-item label="类型" prop="type">
<el-select v-model="pe">
<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-form-item :label="item.label">
<el-input v-if="pe=='input'" v-model="de]" @change="de)"/>
</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=""></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="图表主标题">
<el-input v-model="" />
<el-color-picker v-model="lor" show-alpha></el-color-picker>
</el-form-item>
<el-form-item label="图表副标题">
<el-input v-model="options.title.subtext" />
<el-color-picker v-model="options.lor" 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="lbox" @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="p" @change="initOptionsLegendPoist(p,'top')"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="下">
<el-input v-model="options.legend.bottom" @change="initOptionsLegendPoist(p,'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="id.x"  @change="id)" />
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="右">
<el-input v-model="id.x2" @change="id)"  />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="上">
<el-input v-model="id.y"  @change="id)" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="下">
<el-input v-model="id.y2" @change="id)" />
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="12">
<el-form-item label="宽度">
<el-input v-model="id.width" @change="id)" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="⾼度">
<el-input v-model="id.height" @change="id)" />
</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="pe" @change="pe,$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="pe!='radar'">
<el-input v-model="row.name" @change="pe,row.name,$index)" placeholder="类⽬名称"/>                  </el-form-item>
<el-form-item label="南丁格尔图" v-if="pe=='pie'">
<el-switch v-model="seType" @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="pe=='pie'||pe=='radar'">
<el-row>
<el-col :span="12">
<el-form-item label="X轴">
<el-input v-model="row.Xcenter" @change="initOptionsCenter(row.Xcenter,row.Ycenter,$pe)"></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,$pe)"></el-input>                        </el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="图表⼤⼩" v-if="pe=='pie'">
<el-form-item label="图表⼤⼩" v-if="pe=='pie'">
<el-row>
<el-col :span="12">
<el-form-item label="内圈">
<el-input v-model="row.Xradius" @change="initOptionsRadius(row.Xradius,row.Yradius,$pe)"></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,$pe)"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="透明度" v-if="pe=='radar'">
<el-slider v-model="row.Topacity" @change="initOptionsOpacity(row.Topacity,$pe)" ></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" >
<el-tabs v-model="activeName" 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>
textstyle</div>
</div>
</template>
<script>
import echarts from 'echarts'
import { loadEntity, updateEntity, saveEntity,dictData,dictLoad } from "./data";
export default {
props: {
params: {
required: true,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。