echarts图表
<div id="main" style="width: 37.5rem;height: 25rem;"></div>
<script>
var myChart = echarts.init(document.getElementById("main"), 'light');
$(function () {
$.ajax({
url: '/post/console.do',
type: 'post',
dataType: 'json',
success: function (e) {
$("#count1").text(e.userCount);
$("#count2").text(e.userRegCount);
$("#count3").text(e.galleryCount);
$("#count4").text(e.galleryUploadCount);
var option = {
title: {
text: '论坛发帖统计'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
var date = new Date(params.value[0]);
date = date.getFullYear() + '-' +
(date.getMonth() + 1) + '-' +
date.getDate();
return date + '<br/>' +
params.value[1];
}
},
dataZoom: {
show: true,
start: 70
},
legend: {
data: ['论坛发帖统计']
},
grid: {
y2: 80
},
xAxis: [{
type: 'time',
splitNumber: 10
}],
yAxis: [{
type: 'value'
}],
series: [
{
name: '论坛发帖统计',
type: 'line',
data: (function () {
var arr = e.echarts;
var d = [];
for (var i in arr) {
d.push([new Date(arr[i].dateTime), arr[i].countNumber])
}
return d;
})()
}
]
};
myChart.setOption(option);
}
})
})
</script>
echarts图表的更多相关文章
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line,Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
- 怎样把echarts图表做成响应式的
如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...
- Echarts图表统计学习
史上最全的Echarts图表学习文档 http://echarts.baidu.com/doc/doc.html 勤加练习,多做总结! http://www.stepday.com/topic/?79 ...
- 基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
随机推荐
- C语言常用的编程规范
1排版 1-1相对独立的程序块之间.变量说明之后必须加空行. 示例:如下例子不符合规范. if (!valid_ni(ni)) { ... // program code } repssn_ind = ...
- Python入门(青铜篇)
一.定义变量 print('hello world \n') 定义变量name='单宝梁' #定义字符串一定加‘’age=28 引号使用words="i'm 单宝梁" #字符串里有 ...
- Hadoop 学生平均成绩
1.实例描述 通过一个计算学生平均成绩的例子来讲解开发MapReduce程序的流程.输入文件都是纯文本文件,输入文件中的每行内容均为一个学生的姓名和他相应的成绩,如果有多门学科,则每门学科为一个文件. ...
- 数据库sql常见优化方法
以前刚开始做项目的时候,开发经验尚浅,每次遇到查询比较慢时,项目经理就会问:是不是又用select * 了?查询条件有没有加索引?一语惊醒梦中人,赶紧检查..果然如此! 有时我们写sql语句时,没有考 ...
- 吴恩达机器学习笔记57-基于内容的推荐系统(Content Based Recommendations)
假使我们是一个电影供应商,我们有 5 部电影和 4 个用户,我们要求用户为电影打分. 前三部电影是爱情片,后两部则是动作片,我们可以看出Alice 和Bob 似乎更倾向与爱情片, 而 Carol 和 ...
- \r,\n,\r\n的区别和用法
https://blog.csdn.net/xiaofei2010/article/details/8458605
- ELK之filebeat、logstash多个topic配置
启动多个进程收集日志.直接output到kafka,output到不同的topiccat filebeat.ymlfilebeat.prospectors:- input_type: log path ...
- Git的使用--如何将本地项目上传到Github(三种简单、方便的方法)
一.第一种方法: 1.首先你需要一个github账号,所以还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路(傻瓜式安装) ...
- 简单实现 C# 与 Javascript的兼容
本文章介绍下自己这刚实现的一个c#与js交互的插件.需求来源于一次与朋友的讨论.主要对话如下: 朋友:最近我想模拟一些数据,来测试我现在写的接口,但手工编写这些测试数据太麻烦了 本人:是啊,.net能 ...
- Vue生命周期详解
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...