网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highcharts使用方法也跟这个差不多,几乎一样。
 
1、使用基础图形引入js
<script type="text/javascript" src="/js/jBox/jquery-1.4.2.min.js"></script>
引入<script type="text/javascript" src="/js/echarts.min.js"></script>
 
2、需要显示组件,如图例,引入组件
还需要引入<script type="text/javascript" src="/js/echarts-all.js"></script>
 
3、画布:必须指定高度,否则不会显示
<div class="Chart" id="Chart" style="height: 500px;"></div>
 
4、使用,定义、显示
var cjhq_chart ;
var option = {
title: {
text: '均价(元/平米)'
},
tooltip : {
trigger: 'axis'
},
legend: {
data: legendData//数组
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type: 'category',
boundaryGap : false,
data : xAxisData//数组
}
],
yAxis : [
{
type : 'value'
} ],
series : ySeries//数组
};
cjhq_chart = echarts.init(document.getElementById('Chart'));
cjhq_chart.setOption(option, true);
 
5、动态创建
option.title.text = obj.busName;
option.xAxis[0].data = xAxisDataSingle;
option.series = ySeriesSingle;
option.legend.data = [];
重新赋值option里面的属性的值,再创建面板显示
var div = $('<div class="ChartSingle" id="'+obj.busCode+'" style="height: 300px;"></div>');
div.appendTo($('#single'));
cjhq_chart = echarts.init(document.getElementById(obj.busCode));
cjhq_chart.setOption(option, true);
 
6、更多功能参考echarts api
 
仅供参考,不足之处还请见谅,欢迎指正!转载请标明出处。如有疑问,欢迎评论或者联系我邮箱1034570286@qq.com

ECharts的简单使用过程的更多相关文章

  1. Tomcat_记一次tomcatwar包应用简单部署过程

    记一次tomcat war包应用简单部署过程 by:授客 QQ:1033553122 1.  实践环境 Linux apache-tomcat-7.0.73 2.  实践步骤 # 解压tomcat压缩 ...

  2. echarts之简单的入门——【二】再增加一个柱状图和图例组件

    echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...

  3. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  4. 李洪强漫谈iOS开发[C语言-002]-开发概述程序的本质与简单执行过程

    李洪强iOS开发之应用程序的本质与简单执行过程 什么叫程序? 就是一段执行指令 程序的两个状态: 保存状态(保存到硬盘上)   运行状态(由CPU执行) 代码可以执行吗? CPU(中央处理器-> ...

  5. echarts的简单应用之(二)饼图

    接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...

  6. 对echarts的简单封装

    看了echarts的官网介绍:http://echarts.baidu.com/doc/example.html 看了网上人使用js对echarts的封装:http://blog.csdn.net/x ...

  7. struts2的简单执行过程

    struts2是最近刚学的一个框架,想通过写篇文章来加深下印象,这也是本篇博文产生的由来,下面进入正题 Struts2本身是一个挺简单的框架,我们通过写一个登陆的过程来具体描述下其执行过程 1.首先我 ...

  8. ECharts.js 简单示例

    ECharts.js学习(一) 简单入门 EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Vi ...

  9. echarts的简单应用之(一)柱形图

    前段时间做项目需要绘制一些图表来展示信息,从网上资料来看用的比较多的是百度开源的echarts.echarts的官网上有API以及demo.上面的图形都是非常炫的,不过都是静态 数据,我们做项目时不可 ...

随机推荐

  1. javascript有用小功能总结(未完待续)

    1)javascript让页面标题滚动效果 代码如下: <title>您好,欢迎访问我的博客</title> <script type="text/javasc ...

  2. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  3. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  4. BPM的魅力何在?

    BPM(Business Process Management , 企业流程管理平台) 是带动企业流程自动化的帮 手,也是最能忠实反应出企业作业流程问题症结的系统工具,在管理上,BPM可以让管理者利用 ...

  5. MongoDB学习笔记三—增删改文档上

    插入insert 单条插入 > db.foo.insert({"bar":"baz"}) WriteResult({ }) 批量插入 > db.fo ...

  6. Entity Framework 6 Recipes 2nd Edition(10-6)译 -> TPT继承模型中使用存储过程

    10-6. TPT继承模型中使用存储过程 问题 想在一个TPT继承模型中使用存储过程 解决方案 假设已有如Figure 10-6所示模型. 在模型里, Magazine(杂志) and DVD继承于基 ...

  7. WCF学习之旅—WCF服务的WAS寄宿(十二)

    上接    WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一) 八.WAS宿主 IIS ...

  8. 计算机人物系列-Mauchly,Eckert,Goldstine

    关键词:莫尔学院(Moore School),阿伯丁试验场(Aberdeen Proving Ground), 雷明顿兰德公司(Remington Rand Corporation), IBM院士(I ...

  9. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  10. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...