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. Android数据解析——JSON

    示例一: 有这样一个JSON需要解析,比如: {"thresholds": {"1e-3": 65.3,"1e-5": 76.5," ...

  2. css---颜色过渡渐变

    CSS---颜色过渡渐变 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  3. python 中 打印及格式化字符串的相关方法

    原文 将值转换为字符串 Python 有多种方式将任何值转为字符串: 将它传给 repr() 或 str() 函数. repr() 和 str() 的区别,看几个例子: >>> pr ...

  4. 在数组中寻找和为定值的n个数

    /*-------------------------------------------------------*/ /*寻找和为定值的两个数 输入一个数组A[0,N-1]和一个数字Sum,在数组中 ...

  5. python列表操作方法

    系统的列表操作方法不加赘述,这里增添一些列表操作技巧: 1.利用sum函数把多元列表变成一元: >>> texts_filtered_stopwords [['writing', ' ...

  6. ASP.NET Core 的Windows和IIS宿主(自动翻译记录)

    https://docs.microsoft.com/en-us/aspnet/core/publishing/iis?tabs=aspnetcore2x 支持的操作系统 以下操作系统的支持: Win ...

  7. d4

    # s = '132a4b5c'# s1 = s[0]+s[2]+s[1]# print(s1)#使用while和for循环分别打印字符串s=’asdfer’中每个元素.s = 'fkld'# for ...

  8. PAT甲级1075 PAT Judge

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805393241260032 题意: 有m次OJ提交记录,总共有k道 ...

  9. 跳石头|河中跳房子|NOIP2015提高组T4|二分法

    喵 提交地址:http://codevs.cn/problem/4768/ 题目: 题意:自己看 思路: 1.读入各个石头数据 2.直接二分答案: 枚举一个石头i和一个石头j,要求i和j之间的距离为m ...

  10. ASP.NET异步

    1.ASP.NET线程模型 在WEB程序中,天生就是多线程的,我们知道,一个WEB服务可以同时服务器多个用户,我们可以想象一下,WEB程序应该运行于多线程环境中,对于运行WEB程序的线程,我们可以称之 ...