数据可视化 echarts3

初识 echarts

　　ECharts，一个纯 Javascript 的数据可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender。

提供的图表类型

　　提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

数据可视化 echarts3

　　上面呢都是一些简单的介绍，如果想了解更多内容请移步官网：http://echarts.baidu.com/index.html

　　现在正式开始我们的工作，首先呢需要获取echarts这个库，关于获取的方式的有好几种，可以通过github、npm了这些都可以引入，如果不想下载echarts文件呢，就通过cdn引入就行了，我为了方便就直接cdn引入了，cdn引入可以到国内的 bootcdn 上找到 ECharts 的最新版本。

我们新建一个文件命名为echarts.html,然后直接引入在bootcdn上找到的echarts库并创建一个存放图表的容器div

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <!-- 引入 ECharts 文件 -->
 7 <script src="//cdn.bootcss.com/echarts/3.3.1/echarts.min.js"></script>
 8 </head>
 9 <body>
10 <!-- 创建 echarts 图表存放的容器 -->
11 <div id="echarts" style="height:240px;"></div>
12 </body>
13 </html>

接下来一段JS就是echarts的配置和数据，其中的配置项我们稍后说明

 1 <script type="text/javascript">
 2 // 获取存放图表容器的id，初始化echarts实例
 3 var myChart = echarts.init(document.getElementById('echarts'));
 4 
 5 // 指定图表的配置项和数据
 6 var option = {
 7     title: {
 8         text: '考试成绩',
 9         left: 'center',
10         bottom: 10
11     },
12     color: ['#2ec7c9'],
13     tooltip: {},
14     legend: {
15         data:['科目']
16     },
17     xAxis: {
18         data: ["语文","数学","英语","物理","化学"]
19     },
20     yAxis: {},
21     series: [{
22         name: '科目',
23         type: 'bar',
24         data: [88, 76,92, 68, 72]
25     }]
26 };
27 
28 // 使用刚指定的配置项和数据显示图表。
29 myChart.setOption(option);
30 </script>

完整代码可以点击查看

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <!-- 引入 ECharts 文件 -->
 7 <script src="//cdn.bootcss.com/echarts/3.3.1/echarts.min.js"></script>
 8 </head>
 9 <body>
10 <!-- 创建 echarts 图表存放的容器 -->
11 <div id="echarts" style="height:240px;"></div>
12 <script type="text/javascript">
13 // 获取存放图表容器的id，初始化echarts实例
14 var myChart = echarts.init(document.getElementById('echarts'));
15 
16 // 指定图表的配置项和数据
17 var option = {
18     title: {
19         text: '考试成绩',
20         left: 'center',
21         bottom: 10
22     },
23     color: ['#2ec7c9'],
24     tooltip: {},
25     legend: {
26         data:['科目']
27     },
28     xAxis: {
29         data: ["语文","数学","英语","物理","化学"]
30     },
31     yAxis: {},
32     series: [{
33         name: '科目',
34         type: 'bar',
35         data: [88, 76,92, 68, 72]
36     }]
37 };
38 
39 // 使用刚指定的配置项和数据显示图表。
40 myChart.setOption(option);
41 </script>
42 </body>
43 </html>
44 
45 完整代码

完整代码

接下来就是见证奇迹的时刻，在浏览器打开就会出现一个漂亮的数据图形界面

数据可视化 echarts3

 以上代码配置的说明, 如下图所示, 你可以狠狠的点击下图, 它会让你看的更加清晰。。。