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. visual box 安装 centos7后,无法上网

    ifconfig  命令后,只看到个回环网卡: 进入 /etc/sysconfig/network-scripts后,发现有设备 visual box 中设置为“桥接网卡”,也没问题,最后把控制芯片改 ...

  2. 使用dsoframer控件出现"Unable to display the inactive document. Click here to reactivate the document."的问题 .

    使用如下属性设置: axFramerControl.ActivationPolicy = DSOFramer.dsoActivationPolicy.dsoKeepUIActiveOnAppDeact ...

  3. Linux入门-3 Linux磁盘及文件系统管理

    1. 磁盘基本概念 1.1 磁盘结构:盘片(单碟vs多碟).磁头(读写数据) 1.2 磁盘在Linux中的表示 1.3 分区概念 2 使用fdisk进行磁盘管理 3 Linux文件系统 mke2fs ...

  4. MySQL 数据库 -- 操作

    初识sql语句 有了mysql这个数据库软件,就可以将程序员从对数据的管理中解脱出来,专注于对程序逻辑的编写. SQL语言主要用于存取数据.查询数据.更新数据和管理关系数据库系统,SQL语言由IBM开 ...

  5. 在oracle电子商务套件中输出信息

    一.用自定义用户HAND_SL登陆http://zd01.haasgz.hand-china.com:30000/ 添加可执行并发程序 执行文件名填写自己的包名称.入口函数/过程名 二.将可执行程序添 ...

  6. Asp.net core 项目实战 新闻网站+后台 源码、设计原理 、视频教程

    首先说明,视频教程.源码并非本人原创 本人将项目分割开,并写了一些说明. 该视频教程 地址  https://study.163.com/course/courseMain.htm?courseId= ...

  7. ZT android -- 蓝牙 bluetooth (五)接电话与听音乐

    android -- 蓝牙 bluetooth (五)接电话与听音乐 分类: Android的原生应用分析 2013-07-13 20:53 2165人阅读 评论(9) 收藏 举报 蓝牙android ...

  8. echo 与 od -x 与 %!xxd 命令

    echo 与 od -x 与 %!xxd 命令 echo 命令 -n 选项  可以使其不带换行符od -x 命令可以查看文件的16进制表示%!xxd 可以在vim编辑器中dump成16进制表示

  9. java 相等测试与继承

    内容中包含 base64string 图片造成字符过多,拒绝显示

  10. swift中的"类型擦除"

    代理模式.或者协议模式 因为swift泛型还不支持逆变和协变也就不会有真的类型擦除,而这里说的"类型擦除"是指:利用一个具体实现的通用泛型类(参看系统库的AnySequence), ...