JSRUN 用代码说话

数据视图工具

编辑教程

数据视图工具


toolbox.feature.dataView

Object 数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。


toolbox.feature.dataView.show

boolean [ 默认值: true ]

是否显示数据视图工具。


toolbox.feature.dataView.title

boolean [ 默认值: '数据视图' ]

数据视图工具的标题。


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 [ 默认值: 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 [ 默认值: ['数据视图', '关闭', '刷新'] ]

数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']。


toolbox.feature.dataView.backgroundColor

string [ 默认值: '#fff' ]

数据视图浮层背景色。


toolbox.feature.dataView.textareaColor

string [ 默认值: '#fff' ]

数据视图浮层文本输入区背景色。


toolbox.feature.dataView.textareaBorderColor

string [ 默认值: '#333' ]

数据视图浮层文本输入区边框颜色。


toolbox.feature.dataView.textColor

string [ 默认值: '#000' ]

数据视图文本颜色。


toolbox.feature.dataView.buttonColor

string [ 默认值: '#c23531' ]

数据视图按钮的颜色。


toolbox.feature.dataView.buttonTextColor

string [ 默认值: '#fff' ]

数据视图按钮文本的颜色。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟