一.背景

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

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

二.介绍

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. 04.简单了解一下Redis企业级数据备份方案

    一.企业级的持久化的配置策略 (1)每隔1分钟去检查如果超过10000个可以变更,则生成一个快照.RDB最多丢1分钟的数据. save 60 10000 (2)AOF一定要打开,fsync,every ...

  2. Xutils 的框架问题retry error, curr request is null Android开发之网络请问问题

    没有网络权限也能导致这个问题 也可能是因为模拟机没联网的问题

  3. 整理最全的Android开发工程师面试题，面试题详解。java、Android程序员

    1.    请描述下Activity的生命周期. 必调用的三个方法:onCreate()--> onStart() --> onResume(),用AAA表示 (1)父Activity启动 ...

  4. Unity Prefab关联

    Unity3D研究院之Prefab里面的Prefab关联问题http://www.xuanyusong.com/archives/3042

  5. 笔记-Linux 内存优化

    1.清理前内存使用情况 free -m2.开始清理 echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: d ...

  6. [BUUOJ记录] [GYCTF]EasyThinking

    主要考察ThinkPHP6.0的一个任意文件写入的CVE以及突破disable_function的方法. ThinkPHP6.0.0任意文件操作漏洞 理论分析 进入题目是一个简单的操作页面,dirma ...

  7. Content Security Policy (CSP)内容安全策略总结

    跨域脚本攻击 XSS 是最常见.危害最大的网页安全漏洞. 为了防止它们,要采取很多编程措施,非常麻烦.很多人提出,能不能根本上解决问题,浏览器自动禁止外部注入恶意脚本?这就是"网页安全政策& ...

  8. Activiti7 启动流程实例

    package com.itheima.activiti; import org.activiti.engine.ProcessEngine; import org.activiti.engine.P ...

  9. Redis Sentinel结构 及相关文档

    Redis Sentinel是一个用来监控redis集群中节点的状态,不用来存储数据.当集群中的某个节点有故障时,可以自动的进行故障转移的操作.通常为了保证sentinel的高可用,sentinel也 ...

  10. 微信小程序爬坑记

    1.this.setData修改数组里的值1).data: { hide:[true,true] },this.setData({ 'hide[0]': false});2).var str = &q ...