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. MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

    MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...

  2. jQuery实现动态选中select

    // jquery实现动态选中select var active = $('.all_sla_title1 .active') var group_name = active.html(); var ...

  3. 关于serialVersionUID与序列化"

    java序列化trick and trap 厂内经常出现序列化对象版本不匹配问题,于是发本文说明一些序列化的注意点 调用MQ.memcached.rpc等等涉及到远程通讯的都会经过序列化,虽然客户端透 ...

  4. INFA Transformation组件

    RouterRouter和Filter很相似,Router可以用一或多个Filter来取代,不同的是用Router来生成多个组时输入数据只需处理一次,所以效率更高:Router 由一个输入组,一到多个 ...

  5. 提示"libc.so.6: version `GLIBC_2.14' not found"

    启动php 提示"libc.so.6: version `GLIBC_2.14' not found",原因可能是glibc版本太低,php使用了较高的glibc版本引起的 1,首 ...

  6. django的orm操作的补充

    ---恢复内容开始--- 你在建立一个登陆的时候需要用到auth这个用户登陆模块 这个时候就需要用到user表中的信息你就可以继承 这个时候我们的用户表中继承我们user继承的表 ABstractUs ...

  7. chchc

    ---恢复内容开始--- 51CTO博客-原创IT文章分享平台 Logo 首页 文章 专家 专家博客 博客之星 推荐博客 我的博客 网站导航 学院 博客 下载 家园 论坛 CTO训练营 WOT 51C ...

  8. 51nod 1952 栈

    题目链接戳这 如果只是从尾端插入,那么问题就是基础的:求取栈内最大值的问题,这用单调栈解决即可. 但是前端也能插入,一般的单调栈已经不能满足.那么想象,如果在前端插入一个小值,相当于在栈底多加一个值罢 ...

  9. Java面试基本知识

    Java基本知识 基本知识 服务器:Tomcat 支持Servlet jsp JBoss 开源应用服务器 Apache:最广泛的http服务器,只支持静态网页 String是长度不可变,用+=的时候会 ...

  10. iOS动画的逻辑结构:动画的定义--动画是采用连续播放静止图像的方法产生物体运动的效果。

    动画的定义:视图+时间+空间+速度 视图信息的时空变换: 视图组的按时间逐帧展示: Core Animation 类的继承关系图 各类常用属性 CAMediaTiming:CALayer和Core A ...