用过echarts的同胞们都知道,自带的数据视图是怎样的。在真正做项目时,肯定需要我们自己来写一个相对美观的数据视图。下面以表格样式的数据视图为例,来实现一个自己的数据视图。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.js"></script>
<style>
table {
cellspacing:0 ;
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
width: 100%;
}
.bordered tr:hover {
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered th {
padding: 7px;
text-align: center;
cellspacing:0;
}
.bordered td{
padding: 7px;
text-align: center;
cellspacing:0;
}
.bordered th {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}