Echarts 自定义数据视图

简介: toolbox : { show : true, feature : { dataView : { optionToContent : function(option) { // 行名称 var axisData = option.

toolbox : {
show : true,
feature : {
dataView : {
optionToContent : function(option) {
// 行名称
var axisData = option.xAxis[0].data;
// 列名称
var header = option.legend[0].data;
var seriesarr = option.series;
var eldiv = '<div id="viewdata" style="width:100%;display:block;margin-left:85px;overflow:auto;">';
var firsttd = '<td></td>';
var table = '<table style="width:100%;text-align:left;overflow:scroll;"><tbody>'
+ '<tr>'
if (header != undefined) {
for (var i = 0; i < header.length; i++) {
firsttd += '<td>' + header[i] + '</td>'
}
} else {
table = '<table style="width:50%;text-align:left;overflow:scroll;"><tbody>';
for (var i = 0; i < 1; i++) {
firsttd += '<td>' + "分数" + '</td>'
}
}
// 表格列头拼装完毕
table += firsttd + '</tr>';
// 表格行头拼装完毕
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>' + '<td>' + axisData[i] + '</td>'
for (var j = 0; j < seriesarr.length; j++) {
table += '<td>' + seriesarr[j].data[i]
+ '</td>'

}
}
table += "</tr>";
table += '</tbody></table>';
return eldiv + table + "</div>";
}
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},

目录
相关文章
|
22天前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
|
3月前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
59 0
|
3月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
55 0
|
3月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
66 2
|
8天前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
17 0
|
7天前
|
新零售 分布式计算 数据可视化
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
18 0
|
7天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
24 0
|
4月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
164 2
react+datav+echarts实现可视化数据大屏
|
5月前
Echarts 设置数据条颜色 宽度
Echarts 设置数据条颜色 宽度