阅读(4925)
赞(27)
ECharts的数据视图工具
2017-09-22 11:49:44 更新
toolbox.feature.dataView | Object
数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
toolbox.feature.dataView.show | boolean
[ default: true ]
是否显示数据视图工具。
toolbox.feature.dataView.title | boolean
[ default: '数据视图' ]
数据视图工具的标题。
toolbox.feature.dataView.icon | *
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
toolbox.feature.dataView.iconStyle | Object
数据视图的 icon 样式设置。
toolbox.feature.dataView.readOnly | boolean
[ default: false ]
数据视图工具是否不可编辑(只读)。
toolbox.feature.dataView.optionToContent | Function
(option:Object) => HTMLDomElement|string
自定义 dataView 展现函数,用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串。
如下示例使用表格展现数据值:
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
toolbox.feature.dataView.contentToOption | Function
(container:HTMLDomElement, option:Object) => Object
在使用 optionToContent 的情况下,如果支持数据编辑后的刷新,需要自行通过该函数实现组装 option 的逻辑。
toolbox.feature.dataView.lang | Array
[ default: ['数据视图', '关闭', '刷新'] ]
数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']。
toolbox.feature.dataView.backgroundColor | string
[ default: '#fff' ]
数据视图浮层背景色。
toolbox.feature.dataView.textareaColor | string
[ default: '#fff' ]
数据视图浮层文本输入区背景色。
toolbox.feature.dataView.textareaBorderColor | string
[ default: '#333' ]
数据视图浮层文本输入区边框颜色。
toolbox.feature.dataView.textColor | string
[ default: '#000' ]
数据视图文本颜色。
toolbox.feature.dataView.buttonColor | string
[ default: '#c23531' ]
数据视图按钮的颜色。
toolbox.feature.dataView.buttonTextColor | string
[ default: '#fff' ]
数据视图按钮文本的颜色。