使用echart 做出数据折线图
代码如下:
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById("main"));
//异步获取数据
var cate=[];
var da=[];
function getsomething(i){
var cate=[];
var da=[];
var id= i.value;
var option=$("#year option:selected").val();
$.get('getsj',{id:id,option:option},function(data){
var b=JSON.parse(data);
for(var i=0;i< b.length;i++){
cate.push(b[i].days);
da.push(b[i].sums);
}
myChart.setOption({ //加载数据图表
title: {
text: '车场收益折线图'
},
tooltip: {},
legend: {
data:['收入']
},
xAxis: {
data: cate
},
yAxis: {},
series: [{
name: '收入',
type: 'line',
data: da
}]
});
})
}
在测试过程中,将 myChart.setOption() 加载数据图表放在方法外导致无法实例出图表,要注意。
---恢复内容结束---
使用echart 做出数据折线图的更多相关文章
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- Echart饼形图和折线图的循环展示及选择展示
需求:根据不同的入参调同一接口,循环展示一组饼形图或折线图: 主要问题:在于给定的数据格式不符合图表的配置项格式,需要拆分组装数据:首先默认展示几个图表,当选中一个类别,需要展示其中一个的时候,页面中 ...
- react-echarts之折线图的显示
react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...
- ECharts折线图多个折线每次只显示一条
echart 两条折线图如何默认只显示一条,另一条隐藏呢 只需要在legend后加上, selectedMode: 'single', selectedMode [ default: true ] 图 ...
- 图表echarts折线图,柱状图,饼状图
总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...
- Android 使用 MPAndroidChart 实现折线图
Android 使用 MPAndroidChart 实现折线图 做Android项目的时候用到了折线图,不光折线图,还可能遇到很多的图表需要展示渲染,自己手画的话那好玩了,今天使用MPAndroidC ...
- 数据可视化(Echart) :柱状图、折线图、饼图等六种基本图表的特点及适用场合
数据可视化(Echart) 柱状图.折线图.饼图等六种基本图表的特点及适用场合 参考网址 效果图 源码 <!DOCTYPE html> <html> <head> ...
- MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
@{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...
- echart折线图,柱状图,饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...
随机推荐
- SAP 跨公司销售业务
SAP 跨公司销售业务 http://blog.sina.com.cn/s/blog_95ac31e30102x5wh.html 分类: SAP_SD SAP 跨公司销售业务 一.业务简介 在由 ...
- mybatis第一次搭建出错
### Error building SqlSession. ### The error may exist in com/test/pojo/UserMapper.xml ### Cause: or ...
- Hadoop2.X管理与开发
Hadoop 2.X 管理与开发 一.Hadoop的起源与背景知识 (一)什么是大数据 大数据(Big Data),指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新处理模式 ...
- 手动调用dubbo接口
1. 打开命令窗口,telnet IP地址 dubbo端口号 telnet 127.0.0.1 28001 2. 找到service ls 列出所有服务 dubbo>cd com.faaaaa. ...
- 《R语言入门与实践》第五章:对象改值
本章将了如何对一个数据对象中的数据进行改动,分为以下方法: 直接改值 条件取值然后改值 直接改值 单个改值:vec[1] <- 1000多个改值: vec[c(1,3,5)] <- 100 ...
- Nginx缓存
一.基于proxy_cache的缓存 worker_processes ; events { worker_connections ; } http { include mime.types; def ...
- SQL查询【根据生日计算】
根据生日日期,获取当前年龄.年龄单位. Select Case when DateDiff(Year, BirthDate, GetDate()) > 0 then DateDiff(Year, ...
- JAVA程序设计的第一次作业
这是我第一次接触博客,刚开始用博客很生疏,感觉很麻烦,但是后来慢慢从老师那里了解到了许多博客可以带给我们的便利.通过博客,我们不仅可以记录自己从刚开始进入程序学习的懵懵懂懂到后来想要学,想深究,想探讨 ...
- Dockerfile封装Django镜像
部署过程 1.查看镜像 docker images 2.在/opt下建立了docker目录,下载一个django-2.1.7的源码包, mkdir -p /opt/docker cd /docker ...
- Codeforces Round #422 (Div. 2)E. Liar sa+st表+dp
题意:给你两个串s,p,问你把s分开顺序不变,能不能用最多k段合成p. 题解:dp[i][j]表示s到了前i项,用了j段的最多能合成p的前缀是哪里,那么转移就是两种,\(dp[i+1][j]=dp[i ...