Echarts 自定义数据视图
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
}
}
},
Echarts 自定义数据视图的更多相关文章
- echarts优化数据视图dataView中的样式
在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:改问题解决方案为,在optionTocontent回调函数中处理,具体代码如下: t ...
- echarts给数据视图添加表格样式
1,准备好样式 <style>.myTable {margin: 0 auto;/* height: 300px; */width: 700px;} .myTitle {backgroun ...
- Echarts 数据视图 生成Excel的方法
一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...
- ECharts – 大数据时代,重新定义数据图表
ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...
- echarts如何修改数据视图dataView中的样式
原文链接:点我 做了一个现实折线图的图表,通过右上角icon可以自由切换成柱状图,表格.在表格中遇到的一点小问题,解决方案如下: 1.场景重现 这是一个显示两个折线图的图表,一切看起来都很顺利.但是点 ...
- Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
- SharePoint开发 - Excel数据导入到SharePoint自定义列表(数据视图方式)
博客地址 http://blog.csdn.net/foxdave 本篇讲解一个有些新颖的SharePoint实例应用,给甲方做过项目的都有过体会,数据太多了,客户有Excel,要求实现批量导入. 效 ...
- echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
- Datazen地图Chart自定义数据
此篇介绍如何将数据关联到Datazen地图图表.我们会将数据库中的数据映射到地图上. 首先查看下默认地图图表绑定的数据.以下是系统自带的美国地图数据,主要有两列,一列为地名,一列为度量数据.地图会根据 ...
随机推荐
- python全栈开发,Day40(进程间通信(队列和管道),进程间的数据共享Manager,进程池Pool)
昨日内容回顾 进程 multiprocess Process —— 进程 在python中创建一个进程的模块 start daemon 守护进程 join 等待子进程执行结束 锁 Lock acqui ...
- 【CF1243B1】Character Swap (Easy Version)【思维】
题意:给你两个字符串,问是否存在交换方案使得两个字符串变成一样的,方案为只交换一次且只交换s1与s2里的一个字符 题解:若一开始就相同,则存在交换方案 若一开始不同的位置为1个或大于2个,则不存在方案 ...
- HDU 5179 beautiful number (数位dp / 暴力打表 / dfs)
beautiful number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- rem布局及响应式布局
流式布局(100%布局)(可能:做的页面不是很美观)效果与弹性布局一样 不设置宽高:表示宽 auto 最外层:保证100% 等比例缩放的算法: 320/10 已知的一个比例 = 已知的宽/x ...
- AndroidStudio3.4+Unity2018.3,导出JAR包给UNITY使用
环境 Android studio 3.4 + unity2018.3 1,android studio 新建空工程,一切默认,完成.这个空工程只是个壳,它的所有参数都没什么用,它存在的意义是为了后面 ...
- p5342 [TJOI2019]甲苯先生的线段树
分析 代码 #include<bits/stdc++.h> using namespace std; #define int long long ],yy[],cnt1,cnt2; ][ ...
- 前端二倍图的思考(涉及Retina)
EXCELL格式 1 csv格式导出来之后不能用EXCELL打开,会乱码.用记事本打开,然后将"(英文的引号出掉),就可以了. 关于二倍图的操作 概念: 设备像素:也叫物理像素,显示设备上最 ...
- PHP-会话技术
B/S 请求响应模式是无状态的.任意的请求间不存在任何的联系,不能将请求状态保持下去. 会话技术可以给每个浏览器分配持久数据,这些数据不会随着一次请求和相应结束而销毁. COOKIE cookie 是 ...
- 接口自动化之cookies登录
现在有很多网站有验证码,跳过验证码实现登录可以使用cookies登录 目录 1.requests的添加cookies的方法 2.举个栗子 1.requests的添加cookies的方法 request ...
- apt-get updete以及apt-get upgrade的区别
You should first run update, then upgrade. Neither of them automatically runs the other. apt-get upd ...