Echart-web可视化分析
实验环境
eclipse
MacOS
JDK1.8
Tomcat v8.0
实验步骤
（一）环境搭建
点击file->New，建立动态web项目
选择我们之前安装好的Tomcat版本，以及版本对应的项目版本
点击next，在此页勾选
在Webcoment文件夹内创建HTML文件
点击window->Show View,选择Servers,打开服务窗口
选择对应的Tomcat版本的服务
双击Servers窗口内的链接，打开如下窗口，而后选择如下。
将窗口链接点击右键，选择Add and Remove,弹出如下窗口，而后将我们新建的web项目添加在其中。
点击start即可，等待加载即可
此时我们在web窗口输入localhost:8080,可观察到以连同Tomcat
（二）Echart-web开发
1.柱状图
在WebContent目录下新建HTML文件，新建js目录将echarts.js文件放在该文件夹中
而后进行HTML的编写代码如下
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 标题 --> <title>柱状图显示</title> <!-- 引入js文件 --> <script type="text/javascript"src="js/echarts.js"></script> </head> <body> <!-- 为echarts准备一个容器 宽高所具有的属性--> <div id="main" style="width:800px;height:400px"></div> <script type="text/javascript"> //根据div中的属性初始化echart内置对象 var myChart=echarts.init(document.getElementById("main")); //定义数据 var data1=['上衣','外套','裤子','衬衫','短袖','帽子']; //定义分数 var data2=['230','430','210','550','440','330']; //制定图表位置 var option={ //标题 title:{ text:"各产品的销量柱状图" }, //提示框 tooltip:{}, //图例 legend:{ data:["产品"] }, xAxis:{ data:data1 }, yAxis:{}, //为图标制定系列项 series:[{ name:"产品", type:"line",//bar 为柱状图 data:data2 }] } //显示图标 myChart.setOption(option) </script> </body> </html>
结果输出
在web窗口输入http://localhost:8080/web_test/lines.html（其中web_test是我的工程名）即可显示。
同理，只需要将type中的类型改为line即可
2.圆饼图
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 标题 --> <title>饼状图显示</title> <!-- 引入js文件 --> <script type="text/javascript"src="js/echarts.js"></script> </head> <body> <!-- 为echarts准备一个容器 宽高所具有的属性--> <div id="main" style="width:800px;height:400px"></div> <script type="text/javascript"> //根据div中的属性初始化echart内置对象 // 绘制图表。 //定义数据 var myChart = echarts.init(document.getElementById('main')) var data1=['上衣','外套','裤子','衬衫','短袖','帽子']; //定义分数 var data2=['230','430','210','550','440','330']; var option={ title:{ text:"各产品的销量圆饼图" }, legend:{ data:["衣服"] }, series: [{ name: "衣服", type: 'pie', data: [ {name: data1[0], value:data2[0]}, {name: data1[1], value:data2[1]}, {name: data1[2], value:data2[2]}, {name: data1[3], value:data2[3]}, {name: data1[4], value:data2[4]}, {name: data1[5], value:data2[5]}, ] }] }; myChart.setOption(option); </script> </body> </html>
实验结果
3.南丁格尔图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 标题 --> <title>南丁格尔图显示</title> <!-- 引入js文件 --> <script type="text/javascript"src="js/echarts.js"></script> </head> <body> <!-- 为echarts准备一个容器 宽高所具有的属性--> <div id="main" style="width:800px;height:800px"></div> <script type="text/javascript"> //根据div中的属性初始化echart内置对象 // 绘制图表。 //定义数据 var myChart=echarts.init(document.getElementById("main")); //制定图表位置 option = { backgroundColor: '#2c343c', visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1] } }, series : [ { name: '访问来源', type: 'pie', radius: '55%', data:[ {value:235, name:'视频广告'}, {value:274, name:'联盟广告'}, {value:310, name:'邮件营销'}, {value:335, name:'直接访问'}, {value:400, name:'搜索引擎'} ], roseType: 'angle',//显示成南丁格尔图 label: { normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, labelLine: { normal: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, itemStyle: { normal: { color: '#c23531', shadowBlur: 200, //阴影的样式 shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; //显示图标 myChart.setOption(option) </script> </body> </html>
4.多图显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>显示多张图表</title> <!--引入js --> <script type="text/javascript"src="js/echarts.js"> </script> <script type="text/javascript"src="js/jquery-1.11.0.min.js"></script> </head> <body> <div id="pie" style="width:600px;height:300px;float:left"></div> <script type="text/javascript" src="js/pie.js"></script> <div id="bar" style="width:600px;height:300px;float:left"></div> <script type="text/javascript" src="js/bar.js"></script> <div id="lines" style="width:600px;height:300px;float:left"></div> <script type="text/javascript" src="js/lines.js"></script> </body> </html>
bar.js、lines.js、pie.js分别为图像的js文件
结果输出
