ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

绘制数据图表

1、柱状图

柱状图效果浏览

代码实现

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="js/echarts.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

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

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

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

 tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

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

        myChart.setOption(option);

    </script>

</body>

</html>

2、折线图

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>数据统计图：折线图</title>

    <!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->

    <script src="js/echarts.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

           <div id="main" style="width: 600px;height:400px;"></div>

           <script type="text/javascript">

               // 基于准备好的dom，初始化echarts实例

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

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

        var option = {

            title: {

                text: '未来一周气温变化'

            },

            tooltip:{

                trigger: 'axis'

            },

            xAxis:{

                type: 'category',

                data: ['周一','周二','周三','周四','周五','周六','周日']

            },

            yAxis:{

                type: 'value',

                axisLabel: {  //坐标轴刻度标签的相关设置。

                    formatter: '{value} °C'  // 使用字符串模板，模板变量为刻度默认标签 {value}

                }

            },

            series:[

                {

                    name:'最高气温',

                    type:'line',

                    data:[11, 11, 15, 13, 12, 13, 10],

                },

                {

                    name:'最低气温',

                    type:'line',

                    data:[1, -2, 2, 5, 3, 2, 0],

                }

            ]

        };

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

        myChart.setOption(option);

    </script>

</body>

</html>

3、饼图

代码如下：

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

		   <div id="main" style="width: 600px;height:400px;"></div>

		   <script type="text/javascript">

		       // 基于准备好的dom，初始化echarts实例

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

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

		       var option = {

		           title: {

		               text: '小杰公司年龄阶段的员工占比',

					   x:'center'//水平居中

		           },

		       tooltip: {//提示框组件

				   trigger:'item',//'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用

				   formatter:"{a}<br/>{b}:{c} ({d}%)"

			   },

		       series:[

				   {

					   name:'年龄占比',

					   type:'pie',

					   radius:'55%',

					   center:['50%','60%'],

					   data:[

						   {value:80,name:'20-25岁'},

						   {value:30,name:'26-30岁'},

						   {value:20,name:'31-35岁'},

						   {value:8,name:'36-40岁'},

						   {value:5,name:'41岁以上'}

					   ],

					   itemStyle:{

						   emphasis:{

							   shadowBlur:10,

							   shadowOffsetX:0,

							   shadowColor:'rgba(0,0,0,0.5)'

						   }

					   }

				   }

			   ]

		       };

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

		       myChart.setOption(option);

		   </script>

　　

结语

以上绘制的图表是数据图中用的频率较高的三种。不仅如此，ECharts 还可用于地理数据可视化的地图，用于关系数据可视化的关系图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，并且支持图与图之间的混搭。更多有关 ECharts 的使用方法，可参考 ECharts 的官方文档：

https://echarts.baidu.com/index.html

ECharts的基本使用与方法的更多相关文章

  1. Echarts 多曲线“断点”问题解决方法

    Echarts 用来做可视化曲线是非常优秀的一个库.建议使用 Echarts 作为项目的可视化图标库时,仔细研究 官方实例,根据需求来选择类似的示例,下载实例模板来开发,节省时间,减少出错,提高效率. ...

  2. echarts 调整图表 位置 的方法

    ###内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以了### ###如果是想调整图表与div间上下左右留白,则设置grid属性就可以了### 如图所示: 具体 ...

  3. echarts 调整图表大小的方法

    第一次使用Echarts,大小用的不是那么随心应手,通过文档和百度出的结果,发现其实很简单: 内部图表大小是与div容器大小相关的,如果想调整图表大小,调整div就可以了 如果是想调整图表与div间上 ...

  4. echarts ajax数据加载方法

    一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...

  5. handsontable 和 echarts都定义了require方法，初始化时冲突了，怎么办?

    echarts初始化时报这个错误. require.config is not a function  方案一: 让其中一方的初始化不依赖于 require即可 1.去掉 var testDrowEc ...

  6. angular 实现 echarts 拖动区域进行放大 方法

    实现逻辑: 1.通过鼠标摁下事件  和弹出事件  获取x轴的index  之后去x轴的list中去获取两个坐标点 2.之后将这两个数据作为参数  传到后台更新数据 3.记录下来这两个坐标点 放到lis ...

  7. echarts图表里label文字过长换行的方法

    在做一些图标时,有时会出现显示文字过长的问题,需要将其按照指定的字数换行,像下图这样 而echarts没有提供换行的方法,但是可以使用fomatter方法进行设置,代码如下 formatter: fu ...

  8. Echarts 曲线数少于图例数解决方法

    在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法. 说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组 ...

  9. 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

随机推荐

  1. MyBatis学习01

    1.初识MyBatis 环境说明: jdk 8 + MySQL 5.7.19 maven-3.6.1 IDEA 学习前需要掌握: JDBC MySQL Java 基础 Maven Junit 什么是M ...

  2. Postman设置自动捕获传递Cookie教程

    目录 前言 一.安装 1.Postman安装Install Interceptor Bridge 2.谷歌浏览器安装扩展Postman Interceptor 二.使用 1. 打开Capture Co ...

  3. Echo Delay：FL中好用的声音制作处理方法

    今天来一起研究FL Studio的Echo Delay的作用,Echo Delay可以从MIDI输入创建回声,并允许我们通过音量,声像,切除和共振,音高和时间来操纵延迟. 图1:Echo Dealy ...

  4. 浅析Nginx与Apache的区别

    Nginx相对于Apache的优势: 1.轻量级,采用C进行编写,同样的web服务,会占用更少的内存及资源 2.抗并发,nginx以epoll and kqueue作为开发模型,处理请求是异步非阻塞的 ...

  5. .NetCore项目Linux部署总结

    Linux部署文档 1.常用指令 find [/根目录 .当前目录] -name [文件名]  --查找文件路径ps aux | grep [程序名] --查询查询启动状态ps -ef | grep ...

  6. sqli-labs-master less02-04

    sql注入0-4关只存在注入方式的区别 第一关 ?id=1'--+ ' 第二关 ?id=1--+ 无 第三关 ?id=1')--+ ') 第四关 ?id=1")--+ ") 过程同 ...

  7. KNN 算法-理论篇-如何给电影进行分类

    公号:码农充电站pro 主页:https://codeshellme.github.io KNN 算法的全称是K-Nearest Neighbor,中文为K 近邻算法,它是基于距离的一种算法,简单有效 ...

  8. 避开一部分安装问题的Burpsuite的安装教程

    Burpsuite的安装教程 前言: 既然网上有很多的Burpsuite的安装教程为什么笔者还要在写这篇文章呢? 笔者发现网上的许多安装教程都存在着许许多多的问题,有时候对于一些安装细节描述不是很深, ...

  9. python 二维数组赋值问题

    [[]]是一个含有一个空列表元素的列表,所以[[]]*3表示3个指向这个空列表元素的引用, 修改任何一个元素都会改变整个列表 所以需要用另外一种方式进行创建多维数组,以免浅拷贝 >>> ...

  10. 第7.13节 案例详解：Python类变量

    第7.13节 案例详解:Python类变量 上节介绍了类变量的定义和使用方法,并举例进行了说明.本节将通过一个更完整的例子来说明. 一.    定义函数dirp def dirp(iter): ret ...