图表开发
一个完整的图表由样式配置（styleConfig）、数据配置（dataConfig）、主文件（CustomChartBar）组成，下面的示例展示了各个文件的编写规范及图表必须实现的四个接口。
编辑src/CustomChartBar/config/styleConfig.js（样式配置）
const styleConfig = { xAxis:{ name:'X轴', sub:{ show:{ name:'是否显示', comType:'radio', defaultValue:true, comInfo:[{ 'name': '是', 'value': true }, { 'name': '否', 'value': false }] }, name:{ name:'坐标轴名称', comType:'input', defaultValue:'' }, nameTextStyle:{ name:'坐标轴名称样式', sub:{ color:{ name:'颜色', comType:'colorPicker', defaultValue:'#fff' }, fontSize:{ name:'字体大小', comType:'slider', defaultValue:12, comInfo:{ min:12, max:50 } } } }, axisLine:{ name:'轴线设置', sub:{ show:{ name:'是否显示', comType:'radio', defaultValue:true, comInfo:[{ 'name': '是', 'value': true }, { 'name': '否', 'value': false }] }, lineStyle:{ name:'样式', sub:{ width:{ name:'宽度', comType:'slider', defaultValue:1, comInfo:{ min:1, max:10 } } } } } } } }, color:{ name:"系列色" sub:{ color:{ name:'系列色', comType: 'colorPickerList', defaultValue:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] } } } }; export default styleConfig;以上配置添加了X轴的部分配置和系列色设置，对应echarts的配置为：
xAxis:{ show:true, name:'', nameTextStyle:{ color:'#fff', fontSize:12 }, axisLine:{ show:true, lineStyle:{ width:1 } }, color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] }- 建议样式配置中字段名称和层级结构参照echarts。如xAxis表示X轴、X轴下有属性show、name、nameTextStyle等
- 所有配置必须在sub下：如系列色的具体配置放在了color的sub下
- 字段说明：
- name：配置名称（第一层配置的name值会渲染成切换菜单 ）
- comType：调用相应的组件渲染配置。具体请看 组件配置规则
- defaultValue：配置的默认值
- sub：子属性
编辑src/CustomChartBar/config/dataConfig.js（数据配置）
const dataConfig = { configList:[{ name:'分类名称', type:'value', comType:'single', defaultKey:'商品' },{ name:'数值名称', type:'key', comType:'multi', defaultKey:['销量', '收入'] }] defaultData:{ '销量': [5, 20, 36, 10, 10, 20], '收入': [50, 100, 136, 70, 40, 80], "商品": ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], } } export default dataConfig;- configList字段中规定了X轴绑定商品数据、Y轴绑定销量和收入数据
- defaultData用于存放图表的默认数据
- 字段说明：
- name：字段说明
- type：唯一id
- comType：single表示只能绑定一行数据，multi表示可以绑定多行数据。comType为multi时，defaultKey值是数组
- defaultKey：绑定的数据
编辑src/CustomChartBar/CustomChartBar.js（主文件）
3.1 创建图表类
//工具集合 import utils from 'utils/index.js'; //echarts图表 import echarts from './echarts.js'; //样式配置 import styleConfig from './config/styleConfig'; //数据配置 import dataConfig from './config/dataConfig'; export default class CustomChartBar{ constructor(dom, opts, data){ opts = opts || {}; if(opts.getConfig === true){ //当opts.getConfig为true时表示只是为了获取图表的数据和样式配置，不需要渲染图表 return; } this.chart = null; this._dom = dom; this.init(); } init(){ this.chart = echarts.init(this._dom); } }字段说明：
- dom：渲染图表的dom对象
- opts：样式
- opts.getConfig：true表示为了获取getConfig内容，不需要渲染图表
- data：数据
3.2 实现mergeOption方法。（目的是为了将配置和数据组合成echarts所需要的格式）
export default class CustomChartBar{ mergeOption(style, dataConfig){ style = utils.deepCopy(style); style.xAxis.data = dataConfig.defaultData[dataConfig.configList[0].defaultKey]; style.yAxis = { type:'value' } style.series = []; let series = dataConfig.configList[1].defaultKey; if(Array.isArray(series) === true){ series.forEach( item => { style.series.push({ data:dataConfig.defaultData[item], type:'bar' }) }) }else{ style.series = [ { data: dataConfig.defaultData[series], type: 'bar' } ] } return style; } }3.3，3.4，3.5，3.6是图表必须实现的接口:
- getConfig（获取图表配置）
- setOption（设置样式和数据）
- resize（图表自适应容器大小）
- dispose（销毁图表）
3.3 实现getConfig方法（获取图表样式和数据配置）
export default class CustomChartBar{ getConfig:{ styleConfig:utils.deepCopy(styleConfig), dataConfig:utils.deepCopy(dataConfig) } }utils.deepCopy：深拷贝方法
3.4 实现setOption方法（设置数据和样式的主方法）
export default class CustomChartBar{ setOption(opts, dataConfig){ this.chart.setOption(this.mergeOption(opts, dataConfig)); } }3.5 实现resize方法（图表自适应容器大小）
export default class CustomChartBar{ resize(){ this.chart.resize(); } }3.6 实现dispose方法（销毁图表）
export default class CustomChartBar{ dispose(){ this.chart.dispose(); } }src/CustomChartBar/CustomChartBar.js文件最终输出为：
import utils from 'utils/index.js'; import echarts from './echarts.min.js'; import styleConfig from './config/styleConfig'; import dataConfig from './config/dataConfig'; export default class CustomChartBar{ constructor(dom, opts){ opts = opts || {}; if(opts.getConfig === true){ return; } this.chart = null; this._dom = dom; this.init(); } init(){ this.chart = echarts.init(this._dom); } setOption(opts, dataConfig){ this.chart.setOption(this.mergeOption(opts, dataConfig)); } mergeOption(style, dataConfig){ style = utils.deepCopy(style); style.xAxis.data = dataConfig.defaultData[dataConfig.configList[0].defaultKey]; style.yAxis = { type:'value' } style.series = []; let series = dataConfig.configList[1].defaultKey; if(Array.isArray(series) === true){ series.forEach( item => { style.series.push({ data:dataConfig.defaultData[item], type:'bar' }) }) }else{ style.series = [ { data: dataConfig.defaultData[series], type: 'bar' } ] } return style; } resize(){ this.chart.resize(); } dispose(){ this.chart.dispose(); } getConfig(){ return{ styleConfig:utils.deepCopy(styleConfig), dataConfig:utils.deepCopy(dataConfig), } } }