加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简单的折线图的更多相关文章

  1. echarts、higncharts折线图或柱状图显示数据为0的点

    echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...

  2. 用matplotlib.pyplot画简单的折线图,直方图,散点图

    #coding=utf-8 """ 用matplotlib.pyplot画简单的折线图,直方图,散点图 """ import matplot ...

  3. 学习Qt Charts-创建一个简单的折线图

    一.Qt Charts Qt Charts是基于Qt Graphics View实现的一个图表的组件,可以用来在QT GUI程序中添加现在风格的.可交互的.以数据为中心的图表,可以用作QWidget或 ...

  4. 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)

    一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...

  5. 在微信小程序中使用 echarts 图片-例 折线图

    首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...

  6. echarts 拼图和折线图的封装 及常规处理

    1.html <div id="wrap"></div> 2.js ; (function ($) { $.fn.extend({ echartsPie: ...

  7. 【前端统计图】echarts实现单条折线图

    五分钟上手: 图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. echarts多条折线图

    折线图单只比较好配置,但是多只的话,楼主整整难了一下午才搞出来,下面分享下啦 var myChart = echarts.init(document.getElementById('series-ch ...

  9. ASP.NET MVC中使用highcharts 生成简单的折线图

        直接上步骤:   生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...

随机推荐

  1. App_Code目录类文件无法被调用的解决方法

    1.选中类文件,在属性中的“生成操作”默认的“内容”改为“编译”就可以了. 2.重新生成解决方案

  2. laravel-admin挖坑之旅

    1.git-bash下使用命令php artisan admin:make UserController --model=App\User会报错Model does not exists 要加多一个“ ...

  3. 持续更新scrapy的错误,ValueError: Missing scheme in request url:

    只需要将 for href in response.xpath('XX').extract(): yield Request(hrefs) 修改为下面,就可以显示出来 for href in resp ...

  4. js实时显示鼠标坐标

    <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title ...

  5. oracle_hc.sql

    select event,count(1) from gv$session group by event order by 2;exec dbms_workload_repository.create ...

  6. MSVC中C++ UTF8中文编码处理探究

    字符编码的问题,上大学那会儿就遇到过,一直都是云里雾里,没太搞清楚.最近又遇到了问题,想在C++的控制台上输出Utf-8编码的汉字字节流.尝试了好多次都是乱码,后来花了些时间查查资料,又和同事交流了一 ...

  7. C语言博客作业3--函数

    C语言博客作业3--函数 1.本章学习总结 1.1思维导图 请以思维导图总结本周的学习内容,如下图所示: 1.2本章学习体会及代码量学习体会 1.2.1学习体会 描述本周学习感受,也可以在这里提出你不 ...

  8. Python 有道翻译 爬虫 有道翻译API 突破有道翻译反爬虫机制

    py2.7 #coding: utf-8 import time import random import hashlib import requests while(1): url = 'http: ...

  9. Android 开发 倒计时功能 转载

    原文地址:https://www.cnblogs.com/xch-yang/p/7920419.html Android为我们封装好了一个抽象类CountDownTimer,可以实现计时器功能: /* ...

  10. 学习excel的使用技巧复制一列文本成新列去重

    学习excel的使用技巧复制一列文本成新列去重 其实比较简单的技巧  知道了就会  不知道就比较麻烦 直接复制到一列 找到 数据选项 删除重复项