引入echarts.min.js或者使用CDN https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js

为ECharts准备一个具备大小（宽高）的DOM

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

Demo1：柱形图

<!DOCTYPE html><html>

<head>

<meta charset="utf-8">

<!-- 引入 ECharts 文件 -->

<script src="echarts.min.js">

</script>

</head>

<body>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

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

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

　　

EChars学习之路1的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  3. RPC远程过程调用学习之路（一）：用最原始代码还原PRC框架

    RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...

  4. webService学习之路（三）：springMVC集成CXF后调用已知的wsdl接口

    webService学习之路一:讲解了通过传统方式怎么发布及调用webservice webService学习之路二:讲解了SpringMVC和CXF的集成及快速发布webservice 本篇文章将讲 ...

  5. [精品书单] C#/.NET 学习之路——从入门到放弃

    C#/.NET 学习之路--从入门到放弃 此系列只包含 C#/CLR 学习,不包含应用框架(ASP.NET , WPF , WCF 等)及架构设计学习书籍和资料. C# 入门 <C# 本质论&g ...

  6. Redis——学习之路四（初识主从配置）

    首先我们配置一台master服务器,两台slave服务器.master服务器配置就是默认配置 端口为6379,添加就一个密码CeshiPassword,然后启动master服务器. 两台slave服务 ...

  7. Redis——学习之路三（初识redis config配置）

    我们先看看config 默认情况下系统是怎么配置的.在命令行中输入 config get *(如图) 默认情况下有61配置信息,每一个命令占两行,第一行为配置名称信息,第二行为配置的具体信息.     ...

  8. Redis——学习之路二（初识redis服务器命令）

    上一章我们已经知道了如果启动redis服务器,现在我们来学习一下,以及如何用客户端连接服务器.接下来我们来学习一下查看操作服务器的命令. 服务器命令: 1.info——当前redis服务器信息   s ...

  9. 踏上Salesforce的学习之路（一）

    相信通过前面的学习,大家已经拥有了一个属于自己的Salesforce开发者账号,下面,我们将用这个账号正式踏上Salesforce的学习之路. 首先,点击网址:https://developer.sa ...

随机推荐

  1. 《C#并发编程经典实例》学习笔记—2.3　报告任务

    问题 异步操作时,需要展示该操作的进度 解决方案 IProgress<T> Interface和Progress<T> Class 插一段话:读<C#并发编程经典实例&g ...

  2. Java continue的特殊用法 继续当前循环

    前言 今天java练习的时候,遇到了一道有趣的题目,加深了我对cotinue的理解,所以我写个笔记,记录一下continue的特殊用法 continue作用说明 这里我使用个例子来简单说明一下: fo ...

  3. WebUploader点击上传文件选择框会延迟几秒才会显示

    accept: { title: 'Images', extensions: 'jpg,jpeg,png', mimeTypes: 'image/*' } 改为 accept: { title: 'I ...

  4. 第九课 表单及表单控件 html5学习4

    表单有由表单域.提示文本.表单3部分构成 一.表单控件 input 控件 1.<input />单标签2.input属性: 可以通过type属性变换形状 value默认值 name名称 c ...

  5. 2019-02-18 扩展Python控制台实现中文反馈信息之二-正则替换

    "中文编程"知乎专栏原文地址 续前文扩展Python控制台实现中文反馈信息, 实现了如下效果: >>> 学 Traceback (most recent call ...

  6. 虚拟主机、VPS主机与云服务器的区别

    本文转载自星光云 http://www.365yun.top/news/list.asp?newsid=22 虚拟主机是利用虚拟技术将一台物理服务器划分成多个“虚拟”服务器,虚拟主机的出现大大节省了服 ...

  7. SVN拉取后撤销，恢复未拉取之前的状态

    在做项目的时候,一不小心将服务器上的代码覆盖了本地的代码,本来可以使用log查看svn上的历史列表,然后选中某个选项,右键,点击revert to this vision来使代码恢复到任意一个版本. ...

  8. Android远程桌面助手(Build 0787)

    Android远程桌面助手(Build 0787) 新增: 增加了输入法的快速切换功能,支持通过Google拼音输入法在PC端快速输入中文: 增加了Broadcast的暂停和继续功能: 某些应用截屏失 ...

  9. postgresql 日志报错could not write to log file: No space left on device，could not write lock file "postmaster.pid": No space left on device

    今天遇到了一个特别奇怪的问题,我在用docker容器的时候,发现我的postgresql怎么也启动不起来 尝试了N多种办法,最后看了看postgresql的日志发现 postgresql 日志中报错 ...

  10. 实现MongoDB读写分离的“读偏好”介绍

    在某些情况下,将读请求发送给副本集的备份节点是合理的,例如,单个服务器无法处理应用的读压力,就可以把查询请求路由到可复制集中的多台服务器上.现在绝大部分MongoDB驱动支持读偏好设置(read pr ...