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. 执行文件异常报错：ImportError: attempted relative import with no known parent package

    这个问题困扰了我很久了,网上的解决方法都很一致,找来找去都是一样的解决方法,在导入包的文件和执行文件加入 1 print('__file__={0:<35} | __name__={1:< ...

  2. 《图解TCP/IP》第四章

    <图解TCP/IP>第四章 4.1 IP 即网际协议 4.1.1 IP(IPv4.IPv6)相当于OSI参考模型中的第3层-网络层 4.1.2 数据链路层和网络层的关系: 数据链路层的主要 ...

  3. Java基础教程——打印流

    打印流 打印流可以把原本输出到控制台的信息输出到文件中.PrintStream是字节打印流(还有个对应的字符打印流是PrintWriter,这里不涉及) System类中有个变量: public fi ...

  4. C语言入门最后一阶，掌握这门知识，你就进入提高阶段~

    哈喽,伙伴们,我们前面讲了C语言的发展史,基本数据类型,变量与常量,表达式,基本结构等等,今天是作为C语言基础入门的最后一个阶段:输入与输出. 以上这些知识你能够掌握好,就可以开始进入C语言的进阶提高 ...

  5. mininet + opendaylight环境配置

    环境配置 ubuntu18.04 镜像 mininet2.2.2 apt-get install mininet 但这种安装只是TLS版本的mininet,与最新版本在功能上有所差距. 控制器(ope ...

  6. SpringBoot中的Tomcat是如何启动的?

    <dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>s ...

  7. 老哥们，请问我做的对么？(记一次失败的st表乱搞）

    今天a开始就不是很顺,然后到d,d努力读完题理解完题意,感觉自己又行了{ 问最大的jump,我觉得如果单纯贪心策略显然会t,问min,max这类rmq果断上了st表(这东西我隔离的时候写的,没想到被拉 ...

  8. moviepy音视频开发：使用volumex调节音量大小及其花式用法

    ☞ ░ 前往老猿Python博文目录 ░ 一.概述 音频数据的音量体现为声音的振幅,振幅越大则声音越大,具体到音频帧数据上,体现为声音的绝对值越大则振幅越大音量越大,调节音量大小的本质是调整帧数据的绝 ...

  9. 老猿学5G随笔：5G网元功能体NF以及NF之间的两种接口--服务化接口和参考点

    一.5G功能体之间的接口类型 5G不同功能体之间提供了两种接口: 服务化接口:Service-basedinterface,这个是类似微服务化架构的服务注册和服务发现来实现的功能体对外暴露的接口,这种 ...

  10. PyQt（Python+Qt）学习随笔：QDockWidget停靠部件的dockWidgetArea和docked属性

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 dockWidgetArea和docked属性这两个属性在Design ...