数据可视化 echarts3

初识 echarts

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

提供的图表类型

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

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

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

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <!-- 引入 ECharts 文件 -->

 <script src="//cdn.bootcss.com/echarts/3.3.1/echarts.min.js"></script>

 </head>

 <body>

 <!-- 创建 echarts 图表存放的容器 -->

 <div id="echarts" style="height:240px;"></div>

 </body>

 </html>

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

 <script type="text/javascript">

 // 获取存放图表容器的id，初始化echarts实例

 var myChart = echarts.init(document.getElementById('echarts'));

 // 指定图表的配置项和数据

 var option = {

     title: {

         text: '考试成绩',

         left: 'center',

         bottom: 10

     },

     color: ['#2ec7c9'],

     tooltip: {},

     legend: {

         data:['科目']

     },

     xAxis: {

         data: ["语文","数学","英语","物理","化学"]

     },

     yAxis: {},

     series: [{

         name: '科目',

         type: 'bar',

         data: [88, 76,92, 68, 72]

     }]

 };

 // 使用刚指定的配置项和数据显示图表。

 myChart.setOption(option);

 </script>

完整代码可以点击查看

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <!-- 引入 ECharts 文件 -->

 <script src="//cdn.bootcss.com/echarts/3.3.1/echarts.min.js"></script>

 </head>

 <body>

 <!-- 创建 echarts 图表存放的容器 -->

 <div id="echarts" style="height:240px;"></div>

 <script type="text/javascript">

 // 获取存放图表容器的id，初始化echarts实例

 var myChart = echarts.init(document.getElementById('echarts'));

 // 指定图表的配置项和数据

 var option = {

     title: {

         text: '考试成绩',

         left: 'center',

         bottom: 10

     },

     color: ['#2ec7c9'],

     tooltip: {},

     legend: {

         data:['科目']

     },

     xAxis: {

         data: ["语文","数学","英语","物理","化学"]

     },

     yAxis: {},

     series: [{

         name: '科目',

         type: 'bar',

         data: [88, 76,92, 68, 72]

     }]

 };

 // 使用刚指定的配置项和数据显示图表。

 myChart.setOption(option);

 </script>

 </body>

 </html>

 完整代码

完整代码

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

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

 title: {   //标题组件，包含主标题和副标题。

     show: true,   //是否显示标题组件,默认显示

     text: '标题文字',   //主标题文本，支持使用 \n 换行。

     link: 'https://www.baidu.com/',   //主标题链接,(.com后面记得添加 / )

     target: 'blank | self',   //指定窗口打开主标题超链接，默认blank新窗口打开，self当前窗口打开

     textStyle: {   //主标题文字样式的配置

         color: '#333',  //主标题文字颜色

         fontStyle: 'normal(标准) | italic(斜体) | oblique(倾斜)',  //主标题文字字体的风格

         fontWeight: 'normal | bold | bolder | lighter | 100(数字)', //主标题文字字体的粗细

         fontFamily: 'sans-serif',  //主标题文字的字体系列

         fontSize: 18   //主标题文字的字体大小

     },

     textAlign: 'left | center | right',  //标题文本水平对齐

     textBaseline: 'top | middle |bottom', //标题文本垂直对齐

     subtext: '副标题文本', //副标题文本，支持使用 \n 换行

     sublink: 'https://www.baidu.com/',   //副标题链接,(.com后面记得添加 / )

     subtarget: 'blank | self',   //指定窗口打开副标题超链接，默认blank新窗口打开，self当前窗口打开

     subtextStyle: {   //副标题文字样式的配置

         color: '#aaa',  //副标题文字颜色

         fontStyle: 'normal(标准) | italic(斜体) | oblique(倾斜)',  //副标题文字字体的风格

         fontWeight: 'normal | bold | bolder | lighter | 100(数字)', //副标题文字字体的粗细

         fontFamily: 'sans-serif',  //副标题文字的字体系列

         fontSize: 12   //副标题文字的字体大小

     },

     padding: 5,  //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距

     itemGap: 10,  //主副标题之间的间距

     zlevel: 0,  //用于 Canvas 分层,相当于psd图层,值大的会放在值小的上面,会创建新的 Canvas

     z: 2,  //控制图形的前后顺序。z值小的图形会被z值大的图形覆盖,不会创建新的 Canvas

     left: 'auto', //grid 组件离容器左侧的距离,值可以是具体数字也可以是'left | center | right'

     top: 'auto', //grid 组件离容器上侧的距离,值可以是具体数字也可以是'top | middle | bottom'

     right: 'auto', //grid 组件离容器右侧的距离,值可以是具体数字也可以是'left | center | right'

     bottom: 'auto', //grid 组件离容器下侧的距离,值可以是具体数字也可以是'top | middle | bottom'

     backgroundColor: 'transparent',  //标题背景色，默认透明

     borderColor: '#ccc',  //标题的边框颜色

     borderWidth: 0,  //标题的边框线宽

     shadowBlur: 数字, //图形阴影的模糊大小,需要配合以下三个属性使用

     shadowColor: '颜色', //阴影颜色

     shadowOffsetX: 0,  //阴影水平方向上的偏移距离

     shadowOffsetY: 0,  //阴影垂直方向上的偏移距离

 }

title配置

未完待续。。。。。。

根据以上的配置说明，你可以在下面的编辑器里小试身手~