一.背景

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

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

二.介绍

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. Qt 如何使窗体初始最大化

    Qt 如何使窗体初始最大化 使用以下函数即可解决: void QWidget::setWindowState ( Qt::WindowStateswindowState ) 这样的函数,通过它可以设置 ...

  2. RabbitMQ 3.8.7 在 centos7 上安装

    1.安装 erlang 因为 RabbitMQ 是 erlang 语言开发,所以需要依赖 erlang 环境,所以在安装 RabbitMQ 前需要先安装 erlang wget https://pac ...

  3. Activiti7 绑定业务主键以及流程定义 流程实例的挂起和激活

    绑定业务主键businessKey /** * 绑定业务主键 */ @Test public void bindingBusinessKey() { // 获取RuntimeService Runti ...

  4. Django 页面之间传递MySql数据表（Django八）

    之前实现了页面传递多个参数,但没有实现页面间传递一整个数据表 session传递几个参数:https://blog.csdn.net/qq_38175040/article/details/10496 ...

  5. mysqli报错注入常见函数

    以下均摘自<代码审计:企业级Web代码安全架构>一书 1.floor() select * from test where id=1 and (select 1 from (select ...

  6. 解读Java NIO Buffer

    从jdk1.4开始,java中引入了nio包,提供了非阻塞式的网络编程模型,提供网络性能.nio中核心组件有三个:channel.buffer.selector.这里主要探讨buffer的概念和使用. ...

  7. Docker网络（五）

    本章内容 1.dokcer默认自带的几种网络介绍 2. 自定义网络 3. 容器间通信 4. 容器与外界交互 docker网络分为单个主机上的容器网络和多个主机上的哇网络,本文主要讲解单个主机上的容器网 ...

  8. 217。数据中是否有重复元素(哈希表/set简法)

    给定一个整数数组,判断是否存在重复元素. 如果任意一值在数组中出现至少两次,函数返回 true .如果数组中每个元素都不相同,则返回 false . 示例 1: 输入: [1,2,3,1] 输出: t ...

  9. matlab外部程序接口-excel

    在excel中使用matlab 内容: 1.Spreadsheet Link 程序 安装与启动 1 打开excle->文件->选项 2.加载项->转到 3.浏览(可用加载宏,本来没有 ...

  10. 出行即服务（MAAS）框架

    转自 出行即服务(MAAS)框架 一.概况 在共享交通模式和智能信息技术的基础之上,城市出现了全新的交通理念——“出行即服务(Mobility-as-a-Service,简称MaaS)”.MaaS将各 ...