100字范文 > HTML常用图表（柱状图折线图饼图关联图表格）的绘制

HTML常用图表（柱状图折线图饼图关联图表格）的绘制

时间：2020-03-12 10:06:37

一：柱状图/折线图的绘制

二：柱状图、折线图、数据等的转换

三：饼图的绘制

四：关联图的绘制

五：本地文件的读取

六：表格的展示

七：图片的展示

八：首页index的代码

一：柱状图/折线图的绘制

<!DOCTYPE html><head><meta charset="utf-8"><title>ECharts</title></head><body><div id="main" style="width:80%;height:400px;margin: 0 auto"></div><div id="main2" style="width:80%;height:400px;margin: 0 auto"></div><script src="/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: '/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',// bardata: [3.7, 4.2, 4.8, 5.6,7.9,18.2],color: '#CC0066'},{name: 'FAST_USP',type: 'line',//bardata: [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: 5, 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></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等现代技术"><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="/abstract/document/9667765">基于兴趣约束</a></li><li><a class="J_menuItem" href="/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></div><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><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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。