HTML常用图表（柱状图，折线图，饼图，关联图，表格）的绘制
一：柱状图/折线图的绘制<!DOCTYPE html><head><meta charset="utf-8"><title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="widt
·
目录
一：柱状图/折线图的绘制
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:80%;height:400px;margin: 0 auto"></div>
<!-- ;margin-top:80px;控制距离顶部距离 -->
<div id="main2" style="width:80%;height:400px;margin: 0 auto"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var myChart2 = ec.init(document.getElementById('main2'));
var option = { //具体细节的描述
title: {
text: 'FAST和FAST_USP算法运行时间对比（小阈值）',
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontSize: 14,
fontStyle: 'normal',
fontWeight: 'bold',
},
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['FAST', 'FAST_USP']
},
toolbox: { //可以选择具体数据，柱状图，折线图，还原，保存图片的的切换选择
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar'] //可选折线图和柱状图
},
restore: {
show: true //恢复默认
},
saveAsImage: {
show: true // 存储为图片的功能
}
}
},
calculable: true,
xAxis: [{
type: 'category',
//name: 'min_sup(%)'
data: ['0.35', '0.3', '0.25', '0.2','0.15','0.1'],
name: 'min_sup(%)',
position: 'left'
}],
yAxis: [{
type: 'value',
name: '运行时间(s)',
position: 'left'
}],
series: [{
name: 'FAST',
type: 'line',// bar
data: [3.7, 4.2, 4.8, 5.6,7.9,18.2],
color: '#CC0066'
},
{
name: 'FAST_USP',
type: 'line',//bar
data: [1.6, 1.8, 2.0, 2.3,2.8,6.7],
color: '#009999'
}
]
};
var option2 = {
title: {
text: 'FAST和FAST_USP算法运行时间对比（大阈值）',
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontSize: 14,
fontStyle: 'normal',
fontWeight: 'bold',
},
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['FAST', 'FAST_USP']
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
//name: 'min_sup(%)'
data: ['1.2', '1.0', '0.8', '0.6','0.4','0.2'],
name: 'min_sup(%)',
position: 'left'
}],
yAxis: [{
type: 'value',
name: '运行时间(s)',
position: 'left'
}],
series: [{
name: 'FAST',
type: 'bar',
data: [19.5, 19.8, 21.7, 25.1,32.5,48.9],
color: '#CC0066'
},
{
name: 'FAST_USP',
type: 'bar',
data: [15.0, 16.6, 17.3, 17.4,19.6,22.7],
color: '#009999' // 设置颜色
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
myChart2.setOption(option2);
}
);
</script>
</body>二：柱状图、折线图、数据等的转换
toolbox: {
//可以选择具体数据，柱状图，折线图，还原，保存图片的的切换选择
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar'] //可选折线图和柱状图
},
restore: {
show: true //恢复默认
},
saveAsImage: {
show: true // 存储为图片的功能
}
}三：饼图的绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#pie { //设置饼图大小
width: 1200px;
height: 1200px;
}
</style>
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div id="pie" ,align ="center"></div>
<script>
// 饼状图
// 基于准备好的dom，初始化echarts实例
var pie = echarts.init(document.getElementById('pie'));
// 指定图表的配置项和数据
pieOption = {
// 标题
title: {
// text: 'echarts实现饼状图',
// align="center"
// text-align:center
},
// 图例
tooltip: {
show: true,
trigger: "item",
backgroundColor: "#1677FF",
// {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
formatter: "{a}：{b}<br/>{c}个({d}%)"
},
// 不同区域的颜色
color: ['#3e87ff', '#c0c0c0', '#b9cfec','#191970','#4B0082','#44ff99', '#8B0000',
'#0000ff','#ff1100', '#ff6600', '#ffbb00', '#020302','#ff0000','#ff00ff','#DC143C',
'#808000','#5F91A0','#FF1493','#000000','#008080','#800000','#FFFFFF','#006400'],
series: [
{
name: '课程种类',
type: 'pie',
// 数组的第一项是内半径，第二项是外半径；可以设置不同的内外半径显示成圆环图
radius: '50%',
// 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标；设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
center: ['50%', '40%'],
data: [
{ value: 9795, name: '创业' },
{ value: 19840, name: '电子' },
{ value: 38911, name: '工程' },
{ value: 6609, name: '公共管理' },
{ value: 3243, name: '化学' },
{ value: 1221, name: '环境' },
{ value: 111541, name: '计算机' },
{ value: 641, name: '建筑' },
{ value: 10783, name: '教育' },
{ value: 24394, name: '经管会计' },
{ value: 10380, name: '历史' },
{ value: 10380, name: '汽车' },
{ value: 46372, name: '社科法律' },
{ value: 3371, name: '生命科学' },
{ value: 14186, name: '数学' },
{ value: 17659, name: '外语' },
{ value: 15163, name: '文学' },
{ value: 14531, name: '物理' },
{ value: 68895, name: '医学健康' },
{ value: 20185, name: '艺术设计' },
{ value: 10012, name: '哲学' },
{ value: 1139, name: '职场' },
{ value: 9204, name: '其它' }
],
itemStyle: {
// 显示图例
normal: {
label: {
show: true
},
labelLine: {
show: true
}
},
emphasis: {
// 图形阴影的模糊大小
shadowBlur: 10,
// 阴影水平方向上的偏移距离
shadowOffsetX: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
pie.setOption(pieOption);
</script>
</body>
</html>
四：关联图的绘制
<!DOCTYPE html>
<html>
<head>
<title>ECharts 频繁序列模式</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:700px;border:1px solid #ccc;margin: 0 auto;margin-top:200px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var obj = {
relationList: {
data: [
{
name: '外科护理',
symbolSize: 150,
}, {
name: '护理学研究',
symbolSize: 120,
}, {
name: '社区护理',
symbolSize: 120,
},
{
name: '老年护理',
symbolSize: 120,
}
,
{
name: '中医养生',
symbolSize: 120,
}
],
link: [
{
source: '外科护理',
target: '护理学研究',
name: '关联',
}, {
source: '外科护理',
target: '社区护理',
name: '关联',
},
{
source: '外科护理',
target: '老年护理',
name: '关联',
},
{
source: '外科护理',
target: '中医养生',
name: '关联',
}
]
}
}
var relationData = obj.relationList;
var data = relationData.data;
var link = relationData.link;
option = {
series: [{
type: 'graph', // 类型:关系图
layout: 'force', //图的布局，类型为力导图
symbolSize: 5, // 调整节点的大小
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: ['circle'],
edgeSymbolSize: [10, 20],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
repulsion: 1500,
edgeLength: [100, 250]
},
draggable: true,
lineStyle: {
normal: {
width: 20,
color: '#ff0000'
}
},
edgeLabel: {
normal: {
color: '#ff0000',
// 线上的字体颜色
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {}
}
},
// 数据
data: data,
links: link,
color: ['#0d9e9e']
}]
};
myChart.setOption(option);
</script>
</body>
</html>五：本地文件的读取
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- <script src = "https://blog.csdn.net/weixin_35843410/article/details/114280865"> -->
</head>
<body>
<a href = "22.pdf">查看论文 </a>
</body>
<script>
</script>>
</html>
六：表格的展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<table border="2" width="45%" cellpadding="5" cellspacing="0" bgcolor="#f0ffff" align="center" style="margin-top:200px">
<caption>
MOOC数据集特征 //表格名称
</caption>
<thead>
<tr bgcolor="#ff7f50">
<th>特点</th>
<th>数量</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>时间跨度</td>
<td>547天</td>
</tr>
<tr>
<td>课程数量</td>
<td>1302个</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td>序列数量</td>
<td>82535条</td>
</tr>
</tfoot>
<tfoot align="center">
<tr>
<td>最长序列长度</td>
<td>398</td>
</tr>
</tfoot>
<tfoot align="center">
<tr>
<td>最短序列长度</td>
<td>3</td>
</tr>
</tfoot>
<tfoot align="center">
<tr>
<td>平均序列长度</td>
<td>5.19</td>
</tr>
</tfoot>
</table>
</body>
</html>
七：图片的展示
<div align ="center">
<img src = "pic\data.JPG">
</div>八：首页index的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>主页</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html" />
<![endif]-->
<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
<!--左侧导航开始-->
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="nav-close"><i class="fa fa-times-circle"></i>
</div>
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="nav-header">
<div >
<a href="#">
<span class="clear">
<span><strong class="font-bold">基于约束的序列模式挖掘算法研究</strong></span>
<span >系统展示</span>
</span>
</a>
</div>
<div class="logo-element">
</div>
</li>
<li>
<a href="#">
<i class="fa fa-bars"></i>
<span class="nav-label">小论文</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="https://ieeexplore.ieee.org/abstract/document/9667765">基于兴趣约束</a>
</li>
<li>
<a class="J_menuItem" href="https://xueshu.baidu.com/usercenter/paper/show?paperid=12620rw0mm230gt0825m00t0bv554218&site=xueshu_se&hitarticle=1">基于灵活约束</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!--左侧导航结束-->
<!--右侧部分开始-->
<div id="page-wrapper" class="gray-bg dashbard-1">
<div class="row border-bottom">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
</div>
</nav>
</div>
<div class="row content-tabs">
<nav class="page-tabs J_menuTabs">
<div class="page-tabs-content">
</div>
</nav>
</div>
<div class="row J_mainContent" id="content-main">
<iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="Cday.html?v=4.0" frameborder="0" data-id="index_v1.html" seamless></iframe>
</div>
</div>
<!--右侧部分结束-->
<!--右侧边栏开始-->
<!--右侧边栏结束-->
<!--mini聊天窗口开始-->
<!--mini聊天窗口结束-->
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<!-- 自定义js -->
<script src="js/hplus.js?v=4.1.0"></script>
<script type="text/javascript" src="js/contabs.js"></script>
<!-- 第三方插件 -->
<script src="js/plugins/pace/pace.min.js"></script>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
16
0- 0
已为社区贡献4条内容
所有评论(0)