1,准备好样式

<style>
.myTable {
margin: 0 auto;
/* height: 300px; */
width: 700px;
}

.myTitle {
background-color: #F2F3F5;
}

tr:hover {
background: #edffcf;
}

th {
font-size: 16px;
font-weight: bold;
}

td {
font-size: 14px;
}

th,td {
border: solid 1px black;
text-align: center;
}
</style>

2,toolbox中添加optionToContent

代码:

optionToContent: function(opt) {
var dataview = opt.toolbox[0].feature.dataView; //获取dataview
var table = '<div style="position:absolute;top: 5px;left: 0px;right: 0px;line-height: 1.4em;text-align:center;font-size:14px;">'+dataview.title+'</div>'
table += getTable(opt);
return table;
}

getTable方法:

function getTable(opt){
var axisData = opt.xAxis[0].data;//获取图形的data数组
var series = opt.series;//获取series
var num = 0;//记录序号
var sum = new Array();//获取合计数组(根据对应的系数生成相应数量的sum)
for(var i=0; i<series.length; i++){
sum[i] = 0;
}
var table = '<table class="myTable"><thead><tr class="myTitle"> ';
table += '<th>'+''+'</th>'
for(var i=0; i<series.length;i++){
table += '<th>'+series[i].name+'</th>'
}
table += '</tr></thead><tbody>';

//遍历x轴
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>';
//遍历y轴
for(var j=0; j<series.length;j++){
if(series[j].data[i]){
table += '<td>' + series[j].data[i] + '</td>';
}else{
table += '<td>' + 0 + '</td>';
}

}
table += '</tr>';
}

table += '</tr></tbody></table>';
return table;
}

echarts给数据视图添加表格样式的更多相关文章

  1. echarts优化数据视图dataView中的样式

    在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:改问题解决方案为,在optionTocontent回调函数中处理,具体代码如下: t ...

  2. echarts中折线图切换为数据视图(表格布局)表头无法对齐解决方法

                dataView: {               show: true,               readOnly: true,               option ...

  3. sharepint 数据视图 添加超链接

    1. 数值域清除数值,输入文本 详细进度 2. 添加连接 到 哪个页面 3. 将inteid拖过来 4. 连接到项目显示表单 5. 直接改下面的连接地址 <a href="http:/ ...

  4. Echarts 自定义数据视图

    toolbox : { show : true, feature : { dataView : { optionToContent : function(option) { // 行名称 var ax ...

  5. Echarts 数据视图 生成Excel的方法

    一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...

  6. ECharts – 大数据时代,重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...

  7. echarts如何修改数据视图dataView中的样式

    原文链接:点我 做了一个现实折线图的图表,通过右上角icon可以自由切换成柱状图,表格.在表格中遇到的一点小问题,解决方案如下: 1.场景重现 这是一个显示两个折线图的图表,一切看起来都很顺利.但是点 ...

  8. echart 数据视图 样式重写

    来源http://blog.csdn.net/u010705091/article/details/75212724 echarts折线图的数据视图样式重写 在echarts.js中,点击折线图的数据 ...

  9. 对ng-repeat的表格内容添加不同样式:ng-style

    对ng-repeat的表格内容添加不同样式,html代码: <tr ng-repeat="x in tableData"> <td>{{x.networkN ...

随机推荐

  1. Xlight FTP搭建FTP服务器教程

    Xlight FTP搭建FTP服务器教程 1. 服务器公共设置 设置FTP 端口, ip 等 FTP 服务器公共的设定 2. 设定 FTP 用户, FTP 目录 等信息    备注: 这个用户是非Wi ...

  2. linux命令学习(5):pwd命令

    Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. ...

  3. ASP.NET MVC与ASP.NET Web Form简单区别

    概论: Asp.net  微软 提供web开发框架或者技术.分Web Form和ASP.NET MVC.下面简单说明各自优缺点及使用场景. Web Form 优点: 1.支持丰富的服务器控件.如:Gr ...

  4. 关于ie6出现的问题的原因归结

    关于ie6出现的问题主要可以归结为以下几种情况把. 当然还存在各种原因,bug的情况也还有各种各样,我只是小结一下我自己经常遇到,比较有代表性的问题.会持续的更新. 1.浏览器本身存在的缺陷 比如: ...

  5. db2 reorg(转)

    DB2 reorg RUNSTATS: db2 connect to rmdb11 user rmadmin using rmadmin 对所有用户表执行runstats(reorgchk加updat ...

  6. Navicat工具、pymysql模块 sql注入

    cls超 Navicat工具.pymysql模块 阅读目录 一 IDE工具介绍 二 pymysql模块 一 IDE工具介绍(Navicat) 生产环境还是推荐使用mysql命令行,但为了方便我们测试, ...

  7. JavaScript中的Array类型详解

    与其他语言中的数组的区别: 1.JavaScript数组的每一项都可以保存任何类型的数据,一个数组的数组元素可以是不同类型的数据. 2.数组的大小是动态调整的,可以随着数据的添加自动的增长. 1.两种 ...

  8. app相关的一些网站

    https://www.qimai.cn   排名排行关键字原aso100

  9. stl, string不仅是charString, 更是byteString

     转载至:http://chzhou.blog.sohu.com/97459512.html 以前一直没有注意到STL中的string的length函数,但一直用它.天真的以为它会返回字符串的长度 ...

  10. 适配ipad Pro

    买了个新款ipad pro 11寸的,发现我们的ipad项目. 上下左右都有黑边 使用info.plist设置启动图,不用asset和launch storyboard 图片用如下格式命名,拖到项目中 ...