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__) ...
随机推荐
- MyBatis 学习资料
MyBatis 学习资料 table th:first-of-type { width: 90px; } table th:nth-of-type(2) { } table th:nth-of-typ ...
- malloc的使用、用malloc动态分配内存以适应用户的需求的源代码实例
int len; ; printf("please enter the size that you want: "); scanf("%d", &len ...
- monkey如何获取app包名
别人学习网址:http://www.51testing.com/html/58/15092658-2984032.html 使用aapt aapt是sdk自带的一个工具,在sdk\builds- ...
- 开通mysql root 用户远程访问权限(转)
基于安全考虑root账户一般只能本地访问,但是在开发过程中可能需要打开root的远程访问权限.下面是基本的步骤:1.登录到mysql中,为root进行远程访问的授权,执行下面的命令: mysql> ...
- Zookeeper权限acl,acl的构成 scheme与id
一.ACl(accerss control lists)权限控制 1 针对节点可以设置相关读写权限,目的为了保障数据安全性 2.权限permissions可以指定不同的权限范围以及角色 二.ACL命 ...
- FireDAC探索 (二)
又花时间试了试FireDAC,本想找到一些办法,让FireDAC取数据能和DBX样快,最终还是失败了,DBX实现是太快了,3472第记录(110个字段的表),0毫秒就抓过来了, FireDAC最快也要 ...
- golang查看channel缓冲区的长度
golang提供内建函数cap用于查看channel缓冲区长度. cap的定义如下: func cap(v Type) int The cap built-in function returns th ...
- HTML:meta标签使用总结 [转载] [360浏览器 指定极速模式]
meta标签作用 META标签是HTML标记HEAD区的一个关键标签,提供文档字符集.使用语言.作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO). PS:便于搜 ...
- Digispark红外接收器
一.红外协议之NEC协议原理 NEC协议格式: 首次发送的是9ms的高电平脉冲,其后是4.5ms的低电平,接下来就是8bit的地址码(从低有效位开始发),而后是8bit的地址码的反码(主要是用于校验是 ...
- linux下串口调试工具
apt install cutecom 或者 serialtool 后者github上搜索