一.背景

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

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

二.介绍

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. 2020，你需掌握go 单元测试进阶篇

    本文说明go语言自带的测试框架未提供或者未方便地提供的测试方案,主要是用于解决写单元测试中比较头痛的依赖问题.也就是伪造模式,经典的伪造模式有桩对象(stub),模拟对象(mock)和伪对象(fake ...

  2. vue 在模板template中变量和字符串拼接

    例子:  :post-action="'/api/v1/reportPage/'+this.selectedPagerId+'/saveimg/'"

  3. Android开发之将图片文件转化为字节数组字符串，并对其进行Base64编码处理

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985, 转载请说明出处. /** * @将图片文件转化为字节数组字符串,并对其进行Base64编码处理 * ...

  4. HDU - 4548-美素数 (欧拉素数筛+打表）

    小明对数的研究比较热爱,一谈到数,脑子里就涌现出好多数的问题,今天,小明想考考你对素数的认识.  问题是这样的:一个十进制数,如果是素数,而且它的各位数字和也是素数,则称之为"美素数&quo ...

  5. 推荐一个IT老鸟肝了2月有余的免费开源WPF企业级开发框架

    一个新学WPF的IT老鸟,肝了2个月做了这么一个WPF企业级开发框架,站长clone学习,觉得甚是不错.这是一个使用了Prism搭建的插件式框架,封装了DataGrid的使用,使整个框架子模块简单易学 ...

  6. Java多线程--两个线程同时对一个人的年龄进行增加和修改

    public class Thread_A extends Thread { Human human; public Thread_A(String name, Human human) { supe ...

  7. why哥被阿里一道基础面试题给干懵了，一气之下写出万字长文。

    这是why的第 65 篇原创文章 荒腔走板 大家好,我是 why,欢迎来到我连续周更优质原创文章的第 65 篇.老规矩,先荒腔走板聊聊技术之外的东西. 上面这图是去年的成都马拉松赛道上,摄影师抓拍的我 ...

  8. 顶 最新简捷实用的JSP动态网站环境搭建详细步骤

    阿里西西小编给您推荐这个最新简捷实用的JSP动态网站环境搭建详细步骤讲解,这里还有关于JSP 动态网站 环境 搭建 的教程,希望您能够喜欢并学到东西提升自己的知识与技能,下面是内容详细阅读: 最新简捷 ...

  9. 【源码讲解】Spring事务是如何应用到你的业务场景中的？

    初衷 日常开发中经常用到@Transaction注解,那你知道它是怎么应用到你的业务代码中的吗?本篇文章将从以下两个方面阐述Spring事务实现原理: 解析并加载事务配置:本质上是解析xml文件将标签 ...

  10. [极客大挑战 2019]Secret File wp

    通过标题考虑可能为文件包含漏洞方面 打开网页 从页面并没任何思路,查看源代码 得到有一个跳转到./Archive_room.php的超链接,打开Archive_room.php 中央有一个secret ...