1.引入完整版echarts.min.js.

2.为ECharts准备一个具备大小(宽高)的Dom .

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

3.script下面基于准备好的dom,初始化echarts实例.

var myChart = echarts.init(document.getElementById('main'));

4.复制所需要格式echarts的图表option粘贴.  url: http://www.echartsjs.com/examples/

 // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [, , , , , ]
}]
};

5.使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

echarts使用方法的更多相关文章

  1. js调用echarts getImage方法 将图表转换为img

    function chart(opt,id,chartName){//配置option的方法 var chartName = echarts.init(document.getElementById( ...

  2. ECharts学习总结(二):标签式单文件引入echarts的方法

    下载好echarts的库文件.然后在script里面引入. //from echarts example <body> <div id="main" style= ...

  3. echarts 自适应方法 x和y x2和y2

    grid:{ x:65, y:20, x2:30, y2:30},

  4. Echarts 曲线数少于图例数解决方法

    在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法. 说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组 ...

  5. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

  6. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

  7. echarts学习总结

    ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...

  8. 【WEB前端】使用百度ECharts,绘制项目质量报表

    一.下载ECharts的js库 下载地址:http://echarts.baidu.com/download.html 由于我们对体积无要求,所以我们采用了完整版本,功能齐全,在项目中,我们只需要像普 ...

  9. 5 分钟上手 ECharts

    获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...

随机推荐

  1. synchronized修饰普通方法,修饰静态方法,修饰代码块,修饰线程run方法 比较

    synchronized用于多线程设计,有了synchronized关键字,多线程程序的运行结果将变得可以控制.synchronized关键字用于保护共享数据. synchronized实现同步的机制 ...

  2. OkHttp3源码详解(三) 拦截器-RetryAndFollowUpInterceptor

    最大恢复追逐次数: ; 处理的业务: 实例化StreamAllocation,初始化一个Socket连接对象,获取到输入/输出流()基于Okio 开启循环,执行下一个调用链(拦截器),等待返回结果(R ...

  3. OpenStack 学习笔记 (三)

    个人网站:臭蛋www.choudan.net 一直苦于不知道如何加入到开源社区参与开发,感受开源社区分布式协作开发和巨神们coding的魅力,特意在网上查了资料,直接指导的很少,还得的靠官网上的文档. ...

  4. D3 JS study notes

    如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited t ...

  5. C# 五大修饰符

    修饰符 访问权限 public 关键字是类型和类型成员的访问修饰符. 公共访问是允许的最高访问级别. 对访问公共成员没有限制 private 私有访问是允许的最低访问级别. 私有成员只有在声明它们的类 ...

  6. HTML简单框架网页制作 吴昊

  7. setfacl 命令的常用用法

    setfacl命令----可以用来细分linux下的文件权限. chmod命令----可以把文件权限分为u,g,o三个组,而setfacl可以对每一个文件或目录设置更精确的文件权限. 换句话说,set ...

  8. PDF转WORD工具推荐:迅捷PDF转换器6.8版

    迅捷PDF转换器是一款功能强大的pdf转换成word转换器软件.它不仅支持pdf转换成word,word转pdf,还可以实现excel,ppt,jpg与pdf文件的一键式转换.有了它,你可以很轻松转换 ...

  9. Unable to perform unmarshalling at line number 16 and column 63 in RESOURCE hibernate.cfg.xml. Message: cvc-elt.1: 找不到元素 'hibernate-configuration' 的声明。

    七月 02, 2017 4:32:37 下午 org.hibernate.Version logVersionINFO: HHH000412: Hibernate Core {5.2.10.Final ...

  10. Jenkins Gitlab持续集成打包平台搭建

    http://www.cnblogs.com/skyseraph/p/5695021.html 1. 相关概念 Jenkins Jenkins,一个用Java编写的开源的持续集成工具,提供了软件开发的 ...