使用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 ...
随机推荐
- ssm+redis整合(通过aop自定义注解方式)
此方案借助aop自定义注解来创建redis缓存机制. 1.创建自定义注解类 package com.tp.soft.common.util; import java.lang.annotation.E ...
- shell 的多进程
例子 #!/bin/bash temp_fifo_file=$$.info #以当前进程号,为临时管道取名 mkfifo $temp_fifo_file #创建临时管道 exec <>$t ...
- MAVEN中的Scope
Dependency Scope 在POM 4中,<dependency>中还引入了<scope>,它主要管理依赖的部署.目前<scope>可以使用6个值: *im ...
- 修改Ubuntu锁屏快捷键
修改为Win + L. 避免与Phpstorm中的代码格式化冲突.
- DAY 30 网络编程基础
一.软件开发架构 1.c/s架构 c:客户端 s:服务端 2.b/s架构 b:浏览器 c:服务器 手机端:好像C/S架构比较火,其实不然,微信小程序.支付宝第三方接口 B/S架构的优点是统一接口 PC ...
- Java多线程之volatile关键字《一》
关键字volatile的主要作用是使变量在多个线程间可见. 1.关键字volatile与死循环 如果不是在多继承的情况下,使用继承Thread类和实现Runnable接口在取得程序运行的结果上并没有什 ...
- 第 8 章 容器网络 - 072 - 一文搞懂各种 Docker 网络
Docker 起初只提供了简单的 single-host 网络,显然这不利于 Docker 构建容器集群并通过 scale-out 方式横向扩展到多个主机上. 跨主机网络方案: Docker Over ...
- label 的for属性总结
一.使用介绍 1. 定义:for属性规定label与哪个表单元素绑定. <label>是专门为<input>元素服务的,为其定义标记. label 和表单控件绑定方式有两种: ...
- ibm产品系列架构师技术路线
- wpf 实现 css3 中 boxshadow inset 效果
using System; using System.Linq; using System.Windows; using System.Windows.Controls; using System.W ...