代码如下:

// 基于准备好的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 做出数据折线图的更多相关文章

  1. Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

  2. Echart饼形图和折线图的循环展示及选择展示

    需求:根据不同的入参调同一接口,循环展示一组饼形图或折线图: 主要问题:在于给定的数据格式不符合图表的配置项格式,需要拆分组装数据:首先默认展示几个图表,当选中一个类别,需要展示其中一个的时候,页面中 ...

  3. react-echarts之折线图的显示

    react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...

  4. ECharts折线图多个折线每次只显示一条

    echart 两条折线图如何默认只显示一条,另一条隐藏呢 只需要在legend后加上, selectedMode: 'single', selectedMode [ default: true ] 图 ...

  5. 图表echarts折线图,柱状图,饼状图

    总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...

  6. Android 使用 MPAndroidChart 实现折线图

    Android 使用 MPAndroidChart 实现折线图 做Android项目的时候用到了折线图,不光折线图,还可能遇到很多的图表需要展示渲染,自己手画的话那好玩了,今天使用MPAndroidC ...

  7. 数据可视化(Echart) :柱状图、折线图、饼图等六种基本图表的特点及适用场合

    数据可视化(Echart) 柱状图.折线图.饼图等六种基本图表的特点及适用场合 参考网址 效果图 源码 <!DOCTYPE html> <html> <head> ...

  8. MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等

    @{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...

  9. echart折线图,柱状图,饼图设置颜色

    转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...

随机推荐

  1. MVVM以及vue的双向绑定

    原文:https://www.cnblogs.com/onepixel/p/6034307.html MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核 ...

  2. C# 说说lock到底锁谁?(1)

    写在前面 最近一个月一直在弄文件传输组件,其中用到多线程的技术,但有的地方确实需要只能有一个线程来操作,如何才能保证只有一个线程呢?首先想到的就是锁的概念,最近在我们项目组中听的最多的也是锁谁,如何锁 ...

  3. 无法启动iis express web 服务器

    删除项目文件夹下的隐藏文件夹 (.vs)文件

  4. transform:rotate3d/tranlate3d

    transform:rotate3d(x,y,z,angle); rotate3d 代表 在3D空间,元素沿着 经过原点(0,0,0) 和 三维坐标(x,y,z) 2点的直线进行旋转.其中: x:是一 ...

  5. 第 10 章 容器监控 - 079 - 监控利器 sysdig

    sysdig 是一个轻量级的系统监控工具,同时它还原生支持容器. 通过 sysdig 我们可以近距离观察 linux 操作系统和容器的行为. Linux 上有很多常用的监控工具,比如 strace,t ...

  6. (6)tcp-socket

    (1)client端口: import socket# 产生一个socket对象sk = socket.socket()# 建立连接sk.connect( ("127.0.0.1" ...

  7. python-获取URL中的json数据

    数据源为某系统提供的URL,打开是json文件,python代码获取如下: URL替换成自己的即可. import urllib.request def get_record(url): resp = ...

  8. 修改 input / textarea placeholder 属性的颜色和字体大小

    话不多说,直接上代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; fon ...

  9. ArcGIS中删除“点”附带的对应“文本信息”

    现状: 用ArcMap打开对应的.mxd文件,导入KML数据后,几何类型“点” - 每一个点都附带对应的文本信息“Placemark”,如下图: 问题:ArcGIS中如何 删除“点”附带的对应“文本信 ...

  10. vue刷新路由,不刷新页面

    1.路由介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来 ...