一.背景

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

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

二.介绍

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. 解析WAV音频文件----》生成WAV音频文件头

    前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i WAV音频文件介绍: WAV文件是在PC机平台上很常见的.最经典的多媒体音频文件,最早于1991年8月出现在Windows3.1操作系统 ...

  2. laravel+vue+vuetify 前端匹配不到数据记录 No matching records found

    后端数据:使用guzzle获取api数据,(安装扩展包guzzle) use GuzzleHttp\Client; //获取请求远程产品信息需要的参数public function getParams ...

  3. OpenCV（Open Source Computer Vision Library）计算机视觉库

    OpenCV(最基本的滤波到高级的物体检测皆有涵盖) 简介: OpenCV 是跨平台的,可以在  Windows.Linux.Mac OS.Android.iOS 等操作系统上运行. OpenCV 的 ...

  4. Java 获取一段时间内的每一天

    有时候我们会遇到一些业务场景,需要去获取一段时间内的每一天日期 public static List<Date> findDates(Date dBegin, Date dEnd) { L ...

  5. Android开发之java代码工具类。判断当前网络是否连接并请求下载图片

    package cc.jiusan.www.utils; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; ...

  6. Java 中基本数据类型的变量的转换规则

    基本数据类型之间的转换 变量之间的转换规则 布尔型变量在和其他 7 种基本数据类型做运算时,无法转化为其他的数据类型,所以下面所说的运算都是除了布尔型的其他 7 种基本数据类型之间的转换. 1.自动类 ...

  7. Jmeter简单操作 取样器 ，监听器

    1.创建线程组 1.2 (1)  线程组主要包含三个参数:线程数.准备时长(Ramp-Up Period(in seconds)).循环次数. (2) 线程数:虚拟用户数.一个虚拟用户占用一个进程或线 ...

  8. 截图还在使用QQ的Ctrl + Alt + A 截图？还不会网页长截图？

    截图还在使用QQ的Ctrl + Alt + A 截图?还不会网页长截图?   手机自带快捷键,常常使用组合键进行快速截图编辑发好友.保存等,但是貌似到了电脑截图就出现了一大堆拍屏幕党,不少人需要打开微 ...

  9. 用于测试 SqlAnalyzer1.01 的21个测试用例

    感慨:当年看着 https://www.cnblogs.com/heyang78/p/11451814.html 一文望洋兴叹,如今我也自己做出来了! 21. 原文=select name, cnt ...

  10. yum wget rpm

    wget 类似于迅雷,是一种下载工具          下载安装包 yum: 是redhat, centos 系统下的软件安装方式 下载安装包并自动安装 以及一些依赖关系 基于RPM包管理,能够从指定 ...