使用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 ...
随机推荐
- linux中centros6.7安装php5.6,httpd-2.2.19(web产品化)遇到的问题总结
前段时间在公司实习,web系统产品化的过程踩了很多坑,在这边总结一下,由于对linux不是很懂,全是自己一步步一个一个问题解决的 1,查看系统中是否安装apache,php,mysql环境 Apach ...
- 渐变UI
1.h #import <UIKit/UIKit.h> @interface UIView (Gradient) /* The array of CGColorRef objects de ...
- tomcat中显示本地图片①(未解决)
<本模块文仅作为学习过程中的自我总结,有需要可参看,欢迎指导与提出建议,很多地方可能断章取义,理解不到位,虚心求学.谢谢!> 资料查阅原因:2018/7/10(做项目中显示详情页面,从数据 ...
- 一梦江湖费六年——QQ群聊天分析
本文结构: 一.那些年我们加过的QQ群 二.数据读入和整理(一)--来自蓝翔的挖掘机 二.数据读入和整理(二)--你不知道的事 三.聊天宏观(1)--寤寐思服 三.聊天宏观(2)日月篇 三.聊天宏观( ...
- Oracle 并发创建索引
建索引时,我们为了建索引快,会加上并行,加上并行之后,此列索引就会是并行了.访问有并行度的索引时,CBO可能可能会考虑并行执行,这可能会引发一些问题,如在服务器资源紧张的时候用并行会引起更加严重的争用 ...
- Kafka集群安装部署、Kafka生产者、Kafka消费者
Storm上游数据源之Kakfa 目标: 理解Storm消费的数据来源.理解JMS规范.理解Kafka核心组件.掌握Kakfa生产者API.掌握Kafka消费者API.对流式计算的生态环境有深入的了解 ...
- python高阶函数(Map、Reduce、Filter、lamba)
Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 代码如下: >>> def f(x): . ...
- [数据结构] 2.7 Heap 堆
* 注: 本文/本系列谢绝转载,如有转载,本人有权利追究相应责任. 1.堆是什么? (如图所示是一个小堆) 1)堆是一颗完全二叉树,它的最后一层不是满的,其他每一层都是满的,最后一层从左到右也没有空隙 ...
- 持续集成CI/CD
Gitlab+kubernetes+docker+jenkins+harbor搭建持续交付系统 http://blog.chenmiao.cf/2016/12/28/gitlab+kubernetes ...
- Lab 10-2
The file for this lab is Lab10-02.exe. Questions and Short Answers Does this program create any file ...