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. Nginx采用yum安装方式及安装后的目录

    第一次写博客就不讲究格式了,纯文字了吧 开始 第一步先执行 rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release- ...

  2. 通过注解实现Spring 声明式事务管理

    小Alan接着上一篇Spring事务管理入门与进阶做一些补充,如果对Spring事务管理还不了解的可以看看上一篇文章. 实例 在我们开始之前,至少有两个数据库表是至关重要的,在事务的帮助下,我们可以实 ...

  3. Anjular中的路由配置以及服务等模块的一些基本操作

    1.路由的配置: 在Angular.js中,我们可以根据自己的需求来配置路由,以达到当url中的地址改变时,会跳转不同的页面 <script> //一开始的url:"http:/ ...

  4. 一些很酷的.Net技巧 .

    一..Net Framework 1.  如何获得系统文件夹 使用System.Envioment类的GetFolderPath方法:例如: Environment.GetFolderPath( En ...

  5. 网络编程进阶---->>> hamc模块 socketserver模块验证合法性 两者进行通信连接

    我们在工作中经常遇到,你公司内的某一台电脑要去访问你的服务器或者一个服务端电脑,那么你是让每一台都进行连接吗?  那不可能的  你肯定要进行限定的 验证客户端链接的合法性: hamc模块 hamc也是 ...

  6. Python入门学习网址

    Python入门学习网址:http://www.runoob.com/python/python-install.html

  7. 使用信号进行同步 sem_post

    使用信号进行同步 信号是 E. W. Dijkstra 在二十世纪六十年代末设计的一种编程架构.Dijkstra 的模型与铁路操作有关:假设某段铁路是单线的,因此一次只允许一列火车通过. 信号将用于同 ...

  8. Wannafly挑战赛18 E 极差(线段树、单调栈)

    Wannafly挑战赛18 E 极差 题意 给出三个长度为n的正整数序列,一个区间[L,R]的价值定义为:三个序列中,这个区间的极差(最大值与最小值之差)的乘积. 求所有区间的价值之和.答案对\(2^ ...

  9. linux setup 相关text mode图形配置工具的安装

    centos 6.4 x86_64 minimal安装后发现setup命令不可用 yum update yum install setup 安装完了还是不可用,不知为什么,难道装的那个包不对?yum ...

  10. java 包(package)

    package packageDemo2_5; public class packageDemo1 { String name;//同一个包里的类可以直接访问 //不同包里的类是不可以使用默认修饰符的 ...