简单的写法,extjs可以直接引用插件来写,这里将我发表在百度文库的文档简述下来,有兴趣也可以关注我的百度文库,ID:该用户已失踪。

主要部分的代码:

$(document).ready(function(){
var myChart2 = echarts.init(document.getElementById('myChart2'));
var option = {
title: { //柱状图的表头
text: '时间、会员总数、总行程数和新增景点',
x:'center',
},
tooltip: {},
xAxis: {
data: ["出行时间","新增景点","总行程数","同比增长"]
},
yAxis:{},
series:[{
type:'bar',
data:[{
value:200,//单个高度值
itemStyle:{
normal:{color:'gray'} //单个柱状柱子的颜色
}
}, {
value:300,
itemStyle:{
normal:{color:'green'}
}
},{
value:1500,
itemStyle:{
normal:{color:'yellow'}
}
},{
value:300,
itemStyle:{
normal:{color:'red'}
}
}]
}]
} myChart2.setOption(option); })

2、引用的JS部分



3、HTML的内容



4、CSS部分

EXTjs开发————优雅的用extjs写一个柱状图的更多相关文章

  1. Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互

    框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java   model文件夹下的 Global ...

  2. ExtJS 开发总结

    1. ExtJS的定位是RIA,和Prototype.jQuery等类库的定位不同.使用ExtJS做开发,就是意味着以客户端开发为主,不然就不叫RIA框架了,而Prototype.jQuery等只是辅 ...

  3. 基于QT的webkit与ExtJs开发CB/S结构的企业应用管理系统

      一:源起       1.何为CB/S的应用程序       C/S结构的应用程序,是客户端/服务端形式的应用程序,这种应用程序要在客户电脑上安装一个程序,客户使用这个程序与服务端通信,完成一定的 ...

  4. Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?

    上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的 学习如何获取 ...

  5. Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能,无需写任何代码)

    JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式                      (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...

  6. Android开发技巧——写一个StepView

    在我们的应用开发中,有些业务流程会涉及到多个步骤,或者是多个状态的转化,因此,会需要有相关的设计来展示该业务流程.比如<停车王>应用里的添加车牌的步骤. 通常,我们会把这类控件称为&quo ...

  7. 开源一个Mac漂亮的小工具 PPRows for Mac, 在Mac上优雅的计算你写了多少行代码

    开源一个Mac漂亮的小工具 PPRows for Mac, 在Mac上优雅的计算你写了多少行代码. 开源地址: https://github.com/jkpang/PPRows

  8. 郑晔谈 Moco 框架的开发:写一个好的内部 DSL ,写一个表达性好的程序

    作者:张龙 出处:http://www.infoq.com/cn/news/2013/07/zhengye-on-moco 郑晔谈Moco框架的开发:写一个好的内部DSL,写一个表达性好的程序 作者  ...

  9. spring boot开发,jar包一个一个来启动太麻烦了,写一个bat文件一键启动

    spring boot开发,jar包一个一个来启动太麻烦了,写一个bat文件一键启动 @echo offcd D:\workProject\bushustart cmd /c "title ...

随机推荐

  1. [read -p应用]插拔光模块去检查port present状态

    #!/bin/bash path="/sys/devices/platform/soc/fd880000.i2c-pld/i2c-0/i2c-4/i2c-15/15-0060" a ...

  2. 华为事件对A股的影响思考

    美国对华为实施禁商令: 利好:自主可控-替代品 软件:国产操作系统(中国软件,浪潮软件,湘邮科技...) 芯片:国产芯片(士微兰,国民技术...) 利好:华为优势产品 5G: 利好:反制资源 稀土永磁 ...

  3. Periodic-table

    1. Periodic table 1.1 元素的排列 1.2 表中的行与列 1.3 元素区块 1.4 周期表中的一些趋势 1.5 元素周期律的本质 1.6 电子排布 2. 更多相关链接 2.1 维基 ...

  4. pdf.js-----后端返回utf-8数据流,前端处理数据展示pdf

    需求:做项目联调接口时,发现知识库展示pdf未果,经与后端人员沟通,发现以下问题: 1.接口返回的是utf-8数据流,但是前端调用的是base64解析方法: 导致功能有误: 方案一:将后端返回的utf ...

  5. winform跳转到bs

    private void button7_Click(object sender, EventArgs e) { System.Diagnostics.Process.Start("http ...

  6. swift正点

    Openstack Swift 原理.架构与 API 介绍 http://www.openstack.cn/?p=776 ——Openstack Swift 开源云存储技术解析 OpenStack S ...

  7. RedHat OpenShift QuickStart 1.1 OpenShift基础

    openshift 提供了命令行工具和web可视化页面,这些工具通过REST API去和openshift交互 一.开始为开发人员使用OpenShift 1. 探索命令行 2. 探索web conso ...

  8. DTS_E_CANNOTACQUIRECONNECTIONFROMCONNECTIONMANAGER. The AcquireConnection method call to the connection manager "XXX" failed with error code 0xC0209303.

    问题: 今天写了一个新的SSIS的ETL包,运行报如下错误. DTS_E_CANNOTACQUIRECONNECTIONFROMCONNECTIONMANAGER. The AcquireConnec ...

  9. Spark教程——(4)Spark-shell调用SQLContext(HiveContext)

    启动Spark-shell: [root@node1 ~]# spark-shell Setting default log level to "WARN". To adjust ...

  10. canvas象棋 画图

    今天写了一个canvas画图的象棋 .js基础不行,只画了个图,以后补充... <!DOCTYPE html> <html lang="en"> <h ...