echarts简单的折线图
加jar包 <script src="<%=path %>/js/echarts.min.js"></script>
首先 在jsp页面中 选好地儿放图
<div class="col-xs-5" id="main1" style="width: 523px;height:336px;">
</div>
然后第一步 初始化echarts 实例
var myChart = echarts.init(document.getElementById('main1'));
var xdata = new Array();//求最近7天的时间
for(var i=0;i<7;i++){
var dates = new Date(new Date().getTime()-86400000*i);
xdata[6-i]=getDate(dates); //getDate是自己设置的时间格式化函数
}
function getDate(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y+'-' + m+'-'+ d;
};
var typedata=['万份收益(元)','净值信息'];
var data1=[1, 2, 3, 4, 5, 6, 7];
var data2=[1, 1, 1, 1, 1, 1, 1];
option = {
tooltip: {
trigger: 'axis'
},
legend: { //代表折线图上方的小标题
data:typedata
},
grid: {
containLabel: true,
right:78
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xdata //x轴 我显示的是最近7天日期
},
yAxis: {
type: 'value'
},
dataZoom: [{
show: true,
start: 50,
end: 100
}],
//每一个series中的{}中数据代表一条折线
series: [{
name:'万份收益(元)',
type:'line',
smooth: true,
data:data1
},
{
name:'净值信息',
type:'line',
smooth: true,
data:data2
}]
};
myChart.setOption(option);//将option放进去 就可以了
最后展示出来
echarts简单的折线图的更多相关文章
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- 用matplotlib.pyplot画简单的折线图,直方图,散点图
#coding=utf-8 """ 用matplotlib.pyplot画简单的折线图,直方图,散点图 """ import matplot ...
- 学习Qt Charts-创建一个简单的折线图
一.Qt Charts Qt Charts是基于Qt Graphics View实现的一个图表的组件,可以用来在QT GUI程序中添加现在风格的.可交互的.以数据为中心的图表,可以用作QWidget或 ...
- 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- 在微信小程序中使用 echarts 图片-例 折线图
首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...
- echarts 拼图和折线图的封装 及常规处理
1.html <div id="wrap"></div> 2.js ; (function ($) { $.fn.extend({ echartsPie: ...
- 【前端统计图】echarts实现单条折线图
五分钟上手: 图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- echarts多条折线图
折线图单只比较好配置,但是多只的话,楼主整整难了一下午才搞出来,下面分享下啦 var myChart = echarts.init(document.getElementById('series-ch ...
- ASP.NET MVC中使用highcharts 生成简单的折线图
直接上步骤: 生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...
随机推荐
- App_Code目录类文件无法被调用的解决方法
1.选中类文件,在属性中的“生成操作”默认的“内容”改为“编译”就可以了. 2.重新生成解决方案
- laravel-admin挖坑之旅
1.git-bash下使用命令php artisan admin:make UserController --model=App\User会报错Model does not exists 要加多一个“ ...
- 持续更新scrapy的错误,ValueError: Missing scheme in request url:
只需要将 for href in response.xpath('XX').extract(): yield Request(hrefs) 修改为下面,就可以显示出来 for href in resp ...
- js实时显示鼠标坐标
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title ...
- oracle_hc.sql
select event,count(1) from gv$session group by event order by 2;exec dbms_workload_repository.create ...
- MSVC中C++ UTF8中文编码处理探究
字符编码的问题,上大学那会儿就遇到过,一直都是云里雾里,没太搞清楚.最近又遇到了问题,想在C++的控制台上输出Utf-8编码的汉字字节流.尝试了好多次都是乱码,后来花了些时间查查资料,又和同事交流了一 ...
- C语言博客作业3--函数
C语言博客作业3--函数 1.本章学习总结 1.1思维导图 请以思维导图总结本周的学习内容,如下图所示: 1.2本章学习体会及代码量学习体会 1.2.1学习体会 描述本周学习感受,也可以在这里提出你不 ...
- Python 有道翻译 爬虫 有道翻译API 突破有道翻译反爬虫机制
py2.7 #coding: utf-8 import time import random import hashlib import requests while(1): url = 'http: ...
- Android 开发 倒计时功能 转载
原文地址:https://www.cnblogs.com/xch-yang/p/7920419.html Android为我们封装好了一个抽象类CountDownTimer,可以实现计时器功能: /* ...
- 学习excel的使用技巧复制一列文本成新列去重
学习excel的使用技巧复制一列文本成新列去重 其实比较简单的技巧 知道了就会 不知道就比较麻烦 直接复制到一列 找到 数据选项 删除重复项