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地图图表.我们会将数据库中的数据映射到地图上. 首先查看下默认地图图表绑定的数据.以下是系统自带的美国地图数据,主要有两列,一列为地名,一列为度量数据.地图会根据 ...
随机推荐
- 3,LinkedList
一,LinkedList简介 1,LinkedList 是一个继承于AbstractSequentialList的双向链表.它也可以被当作堆栈.队列或双端队列进行操作. 2,LinkedList 实现 ...
- 16 :IDEA快速键
ctrol+z ctrol+shift+z 重做 复制,粘贴,删除,(行操作,光标放在那里就可以操作,不要全选择) 注:特别:查询出来,文件是可以直接编辑的 crtol+F double +shif ...
- No module named 'requests'---问题解决记录
今天在用Pycharm执行脚本时,报错.如下: 问题排查: 1,检查是否安装了requests cmd输入命令:pip install requests 提示有新版本可以升级,那 我就升级了. 然后输 ...
- C#防止窗口重复打开
修改Program.cs文件 using System; using System.Collections.Generic; using System.Linq; using System.Windo ...
- 用flask写一个简单的接口
用falsk写一个简单的接口,这个接口的数据本来是爬虫爬取的数据,但是今天只写一个flask接口,数据就用测试数据好了. import random import re import time imp ...
- day35—JavaScript操作元素(创建、删除)
转行学开发,代码100天——2018-04-20 JavaScript对DOM元素的创建.删除操作. 1.创建DOM元素 appendChild方法 createElement(ochild); op ...
- jmeter之JDBC请求
jmeter不仅可以测试http请求,也可以执行JDBC请求的测试.本次以mysql为例,介绍JDBC请求如何完成发送 目录 1.环境配置 2.数据库连接配置 3.添加一个JDBC请求 1.环境配置 ...
- delphi 按钮 2 行
http://bbs.csdn.net/topics/390230792 回复于: 2015-06-01 21:11:02 最简单的办法:------------------------以下是转载的, ...
- HTML-lang属性规定元素内容的语言
所有浏览器均支持 lang 属性. 属性lang是英语language的缩写,意思是语言,”en”代表英语,”zh-CN”代表中文 注释:lang 属性在以下标签中无效:<base>, & ...
- SqlServer 事物
Ø 事务 在数据库中有时候需要把多个步骤的指令当作一个整体来运行,这个整体要么全部成功,要么全部失败,这就需要用到事务. 1. 事务的特点 事务有若干条T-SQL指令组成,并且所有的指令昨晚一个整体提 ...