Echarts动态加载柱状图的实例
一、引入echarts.js文件(下载页:http://echarts.baidu.com/download.html)
二、HTML代码:
<div style="width: 100%; height: 400px;" id="main">
</div>
三、js代码(加载图表的方法):
/**
* @param {String} p_chart 初始化报表的id
* @param {Object} p_obj 初始化报表的数据对象
* @param {String} p_obj.xAxis 初始化报表x轴的数据
* @param {String} p_obj.serise 初始化报表的数据列值
*/
function _loadChart(p_chart, p_obj) { // 加载图表的方法
if(this[p_chart]) { // 判断该图表是否存在,存在即只替换值
var option = {
xAxis: {
data: p_obj.xAxis
},
series: {
data: p_obj .series,
markPointer: {
data: [
{
value: p_obj.series[0],
xAxis: 0,
yAxis: p_obj.series[0]
},
{
value: p_obj.series[0],
xAxis: 0,
yAxis: p_obj.series[0]
}
]
}
}
}
} else {
var option = {
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选‘line | shadow’
}
},
calculable: true,
xAxis: [{
type: 'category',
top: 10,
axisTick: false, // 坐标轴小标记,默认为true
axisLabel: {
textStyle: {
color: '#CCC',
fontSize: 12,
fontFamily: 'Microsoft YaHei'
}
},
axisLine: {
lineStyle: {
color: '#00F3FF'
}
},
data: p_obj.xAxis
}],
yAxis: [{
type: 'value',
axisTick: false,
axisLabel: {
textStyle: {
color: '#CCC',
fontSize: 12,
fontFamily: 'Microsoft YaHei'
}
},
axisLine: {
lineStyle: {
color: '#00F3FF'
}
},
spllitLine: false // y轴分割线,默认为true
}],
series: [{
name: '实有人口',
type: 'bar',
barWidth: 20,
itemStyle: {
normal: {
barBorderRadius: 30, //柱子的圆角
color: new echarts.graphic.LinearGradient( //柱子的渐变色
0, 0, 0, 1, [{
offset: 0,
color: 'rgba(249, 241, 4, 1)'
},
{
offset: 1,
color: 'rgba(249, 241, 4, 0)'
}]
)
}
},
data: p_obj.series,
markPointer: { // 柱状图上方气泡值
data: [
{
value: p_obj.series[0],
xAxis: 0,
yAxis: p_obj.series[0]
},
{
value: p_obj.series[0],
xAxis: 0,
yAxis: p_obj.series[0]
}
]
}
}]
}; this[p_chart] = echarts.init(document.getElementById(p_chart));
} this[p_chart].setOption(option); // 设置报表数据
}
四、js方法(调用加载图表的方法):
_loadChart("main", {
xAxis: ['车辆卡口', '人员卡口'],
series: [(Math.random() * 100).toFixed(0), (Math.random() * 100).toFixed(0)]
})
Echarts动态加载柱状图的实例的更多相关文章
- Echarts动态加载柱状图和折线图混合展示的实例
一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...
- eCharts动态加载各省份的数据
假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事 ...
- echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.
今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...
- Echarts动态加载后台数据
注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...
- ECharts动态加载堆叠柱状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- Echarts动态加载饼状图实例(二)
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div class="ui-contai ...
- Echarts动态加载饼状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- echarts动态加载数据无法更新series 无法更新图表
最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
- Python3的动态加载模块简单实例
import os import sys import time import myconfig b = ['123'] a = os.path.abspath(myconfig.__file__) ...
随机推荐
- spark-streaming-kafka-0-8 和 0-10的使用区别
一.spark-streaming-kafka-0-8_2.11-2.0.2.jar 1.pom.xml <!-- https://mvnrepository.com/artifact/org. ...
- Spring Cloud(Dalston.SR5)--Feign 声明式REST客户端
Spring Cloud 对 Feign 进行了封装,集成了 Ribbon 并结合 Eureka 可以实现客户端的负载均衡,Spring Cloud 实现的 Feign 客户端类名为 LoadBala ...
- linux zip删除指定文件和追加文件
使用zip命令的-d参数即可删除zip包中的特定文件. 示例:假设有test.zip,包含_code(目录)._code.zip.readme.txt三个文件,现在要删除test.zip中的_code ...
- 利用event为z数据表定期添加和删除分区
我们去年就开始把zabbix数据库改成用TokuDB来支撑,并且启用了表分区(详情见:迁移Zabbix数据库到TokuDB).这样做的好处很明显,较早的历史数据可以通过删除分区快速废弃掉.要知道,za ...
- 错误 Run-time error nnn at xxxx; 错误
出现runtime error临时解决办法,于注册表位置中找到如下键值HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Gdiplus,然后把键DisableTIFFCo ...
- pytest.10.使用fixture参数化测试预期结果
From: http://www.testclass.net/pytest/test_api_with_expected_result/ 背景 接上一节v2ex网站的查看论坛节点信息的api. 我们在 ...
- windows cmd下ssh连接免密码问题解决
windows 7 cmd下 ssh -T username@serverip 免密码连接成功 有的同学在windows下开发,并且在windows下安装了git for windows,这些资源已经 ...
- 小程序支持打开APP
根据微信的官方文档,小程序支持打开APP,专门研究了下这个API有什么,官方文档地址如下 https://mp.weixin.qq.com/debug/wxadoc/dev/component/but ...
- PAT 乙级 1071 小赌怡情(15 分)
1071 小赌怡情(15 分) 常言道“小赌怡情”.这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计算机给出第二个数.若玩 ...
- mysql查询优化之四:优化特定类型的查询
本文将介绍如何优化特定类型的查询. 1.优化count()查询count()聚合函数,以及如何优化使用了该函数的查询,很可能是mysql中最容易被误解的前10个话题之一 count() 是一个特殊的函 ...