一.背景

最近产品叫我做一些集团系列的统计图，包括集团组织、协作、销售、采购等方面的。作为一名后端程序员，于是趁此机会来研究研究这个库。

如果你仅仅停留在用的层面，那还是蛮简单的。

二.介绍

ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足公司商业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。以前这些系统的图表需求我们都是使用flash去实现的，百度分工很细，有专门的flash组同学去做这个事情，这就不可避免多了一个沟通环节，作为前端工程师无法独立掌控，不管是数据接口的设计，个性化的需求都得沟通商定。而且一个系统内会有很多个flash在不同场景下出现，他们并没有实现通用。加上乔帮主不让i系列上运行flash以及html5的火热，我们需要寻求一个解决方案。于是在2012年初，当时还是凤巢前端技术负责人的Kener-林峰在凤巢数据平台项目中尝试使用Canvas去做图表，他写了一个全新的轻量级Canvas类库ZRender，那可以说是ECharts的原型，虽然跟现在已经相去十万八千里了。

更多详细的自己百度

三.使用

当拿到一到框架或者一个需求的时候，不要着急动手，先看文档或者理解需求

五分钟上手文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

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

        <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

        <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>

效果：

二.重要的属性

ECharts系列:玩转ECharts之常用图（折线、柱状、饼状、散点、关系、树）的更多相关文章

  1. ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. Echarts 几个常用图

    最近公司业务上的 需求,要求做一些图表,我们技术框架上选择方便使用的Echarts. 下面是效果图: 下面是具体代码: <!DOCTYPE html> <html> <h ...

  3. 深入浅出ECharts系列（一）地图+散点图

    深入浅出ECharts系列(一) 目标 本次教程的目标是实现“微博签到点亮中国”散点图,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你 ...

  4. 深入浅出ECharts系列 （二） 折线图

    深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载 ...

  5. ECharts 报表事件联动系列三：柱状图，饼状图实现联动

    源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  6. ECharts 报表事件联动系列二：柱状图，饼状图添加事件

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. Echarts 简单报表系列三：饼状图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. 【ECharts】1.学习ECharts从现在开始：第一个Echart图形

    首先,你需要下载ECharts所需的文件,我使用的是echarts-2.0.2版本,点击这里下载:echarts-2.0.2 下载解压后,下面有一系列文件夹,其中build中有我们需要引入的JS文件, ...

  9. Echarts常用API（echarts和echartsInstance）

    一.echarts上的方法 一般在项目中引入echarts之后,可以获得一个全局的echarts对象. 1.下面是几个比较常用的echarts方法 echarts.init() 创建一个echarts ...

随机推荐

  1. py_选择排序

    # 选择排序 # 一趟排序记录最小值,放到第一个位置 #再一趟排序记录记录列表无序区最小的数,放到第二个位置 #.... # 关键点:有序区.无序区.无序区最小值 #方法一 def select_So ...

  2. 同事跳槽阿里P7，甩我一份微服务架构设计模式文档，看完我也去

    给所有微服务架构开发者的忠告,我想对你们说: 第一,要记住微服务不是解决所有问题的万能“银弹”. 第二,编写整洁的代码和使用自动化测试至关重要,因为这是现代软件开发的基础. 第三,关注微服务的本质,即 ...

  3. AndroidStudio与eclipse打包的时候报错。Error:(4) Error: "ssdk_instapager_login_html" is not translated in "en"

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 博客园主页:http://www.cnblogs.com/mcxiaobing ...

  4. 数据库系统第一章【绪论】（B站视频）

    目录 数据库系统第一章[绪论](B站视频) 一.绪论 数据库的四大基本概念 数据 数据库 数据库管理系统 主要功能 数据库系统 数据管理 我的理解 数据系统的特点 数据结构化 数据系统的共享性 数据独 ...

  5. 按照BNF语法重新写就的JsonAnalyzer2

    本例源码:https://files.cnblogs.com/files/heyang78/JsonAnalyzer2-20200525-01.rar 自从按BNF重新书写了算术表达式解析(https ...

  6. PHP的七个数组指针函数

    1. PHP的七个数组指针函数 函数 描述 reset() 将一个数组的内部指针重置到首位,并返回第一个元素的值 end() 将一个数组的内部指针移动到数组的最后一个元素所在的位置,并返回最后一个元素 ...

  7. 在express中使用ES7装饰器构建路由

    在Java的Spring框架中,我们经常会看到类似于@Controller这样的注解,这类代码能够极大的提高我们代码的可读性和复用性.而在Javascript的ES7提案中,有一种新的语法叫做deco ...

  8. Django-配置镜像源，虚拟环境详解

    0.配源虚拟 全局配源 阿里云镜像站:https://developer.aliyun.com/mirror/ # 在cmd中操作,查找文件 C:\Users\Administrator>pip ...

  9. python中unittest查找测试用例

    将整个BeautifulReport文件夹放到site-packages目录下

  10. Linux驱动之设备树的基础知识

    前期知识   1. 如何编写一个简单的Linux驱动(一)--驱动的基本框架   2. 如何编写一个简单的Linux驱动(二)--设备操作集file_operations   3. 如何编写一个简单的 ...