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. mac下 安装tomcat 后项目无法启动以及 错误 找不到或无法加载主类

    按照网上的步骤,在mac上安装tomcat后,写个简单的测试类报错:错误 找不到或无法加载主类 Class JavaLaunchHelper is implemented in both /Libra ...

  2. Linux动态链接库.so文件的创建与使用

    1. 介绍         使用GNU的工具我们如何在Linux下创建自己的程序函数库?一个"程序函数库"简单的说就是一个文件包含了一些编译好的代码和数据,这些编译好的代码和数据可 ...

  3. Linux watch命令详解

    watch可以帮你监测一个命令的运行结果,来监测你想要的一切命令的结果变化 常见命令参数 Usage: watch [-dhntv] [--differences[=cumulative]] [--h ...

  4. Exchange 2016 CU6 安装后,发生错误 出现意外错误,无法处理您的请求

    公司的Exchange2016环境准备上线了,今天owa打不开了.出现如下图的错误,更多详细信息没有截图,但最关键的一句记下来了. X-OWA-Error Microsoft.Exchange.Dia ...

  5. ASP.NET Core 2.1以上 Bootstrap 4前端模板文件,开发环境与发布环境前端模板 environment的使用

    笔者的前端文件如下 笔者增加Bootstrap 4 和 FontAwersome(字体图标),因为Bootsrap 4已经不再包含图标了. ASp.Net Core 中,通常在 _Layout.csh ...

  6. Android Proguard使用技巧

    1.混淆后解码 ProGuard运行结束后,输出以下文件: dump.txt :描述.apk文件中所有类文件间的内部结构 mapping.txt:列出了原始的类,方法和字段名与混淆后代码间的映射.这个 ...

  7. SAP ABAP里数据库表的Storage Parameters从哪里来的

    如何查看ABAP数据库表的storage parameter? 事务码SE11,utilities->Database Object->Database Utility: 点这个Stora ...

  8. linux服务器安全配置10大技巧

    1.禁止ping/etc/rc.d/rc.localecho 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all2.对用户和口令文件进行权限控制chmod 6 ...

  9. 使用android studio检测app内存泄漏【转载】

    Android开发中难免会遇到各种内存泄漏,如果不及时发现处理,会导致出现内存越用越大,可能会因为内存泄漏导致出现各种奇怪的crash,甚至可能出现因内存不足而导致APP崩溃. 一般检测android ...

  10. JavaScript中的值和引用

    JavaScript5中有6种基本数据类型:undefined.null.布尔值(Boolean).字符串(String).数值(Number).对象(Object) ES6中新引入一种原始数据类型: ...