<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="pic4" style="width: 600px;height:400px;"></div>

    <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>

    <script>

        var myChart13 = echarts.init(document.getElementById('pic4'));

        var data = [];

        option15 = {

                title: {

                    text: '曲线',

                },

                tooltip: {

                    trigger: 'axis',

                },

                legend: {

                    data:['昨日(11月8日)','今日(11月9日)']

                },

                grid: {

                    left: '1%',

                    right: '1%',

                    bottom: '3%',

                    containLabel: true

                },

                toolbox: {

                    show: false,

                    feature: {

                        dataZoom: {

                            yAxisIndex: 'none'

                        },

                        dataView: {readOnly: false},

                        magicType: {type: ['line', 'bar']},

                        restore: {},

                        saveAsImage: {}

                    }

                },

                color:["red","#CD3333"],

                xAxis:  {

                    type: 'category',

                    boundaryGap: false,

                    data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']

                },

                yAxis: {

                    type: 'value',

                    name: '单位（kW）',

                    axisLabel: {

                        formatter: '{value}'

                    }

                },

                series: [

                    {

                        name:'昨日(11月8日)',

                        type:'line',

                        data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],

                        itemStyle: {

                            normal: {

                                //color: function(params) {

                  　　　　　　  //    var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];

                                //    //若返回的list长度不足，不足部分自动显示为最后一个颜色

                  　　　　　　  //      return colorList[params.dataIndex]

                 　　　　　　   //   },

                                label: {

                                    show: true,

                                    position: 'top'

                                }

                            }

                        }

                    },

                    {

                        type:'line',

                        name : '今日(11月9日)',

                        data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],

                    }

                        ]

            };

        myChart13.setOption(option15);

    </script>

</body>

</html>

效果如下：

Echarts 简单报表系列二：折线图的更多相关文章

  1. Echarts 简单报表系列四：雷达图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. Echarts 简单报表系列三：饼状图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. Echarts 简单报表系列一：柱状图

    见代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. 练习： bs4 简单爬取 + matplotlib 折线图显示 （关键词，职位数量、起薪）

    要看一种技术在本地的流行程度,最简单的就是找招聘网站按关键词搜索. 比如今天查到的职位数量是vue 1296个,react 1204个,angular 721个.国际上比较流行的是react,本地市场 ...

  5. echarts爬坑 : 怎么Line折线图设置symbol:none后Label不见了？

    用 echarts 时遇到了一个奇奇怪怪的问题. 这是一张折线图. 本来这个图是有数字显示的. series : [ { name:'搜索引擎', type:'line', stack: '总量', ...

  6. R in action读书笔记（15）第十一章 中级绘图 之二 折线图 相关图 马赛克图

    第十一章 中级绘图 本节用到的函数有: plot legend corrgram mosaic 11.2折线图 如果将散点图上的点从左往右连接起来,那么就会得到一个折线图. 创建散点图和折线图: &g ...

  7. echarts入门基础，画折线图

    注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  8. RDLC报表系列(二) 行分组

    接上一篇文章的内容,今天来说的是行分组.还是打开demo1.rdlc界面,拖入一个文本框和表 1.在表中随便选择一个字段,不然在添加行组的时候不会自动提示.我这里是选择的Dept 2.在下面的行组中右 ...

  9. arcgis api 3.x for js 入门开发系列二十二地图模态层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. Jdk在window环境下的安装与配置详解

    本文为博主原创,转载请注明出处: 1.2  Java程序开发环境的配置 java开发工具包:java开发工具:记事本 IDE,这个只能写小程序,写大程序需要集成开发工具:反编译工具(我们可以在网上找一 ...

  2. SVN的常用功能使用教程

    (一)导入项目到版本库中 1. 在SVN服务器的仓库中新建项目名称文件夹 2. 选择安装Visual SVN的本地计算机中的一个文件夹,右键选择导入,将本地项目导入到SVN服务中央仓库中 3. 输入在 ...

  3. 理解 Redis(8) - Ordered set 值

    ordered set 是根据 score值有序排列的数据集合. 首先还是清空数据, 并清屏, 此步骤省略~~~~ 新建一条 ordered set 数据 myset1, 并存入4个字符串, scor ...

  4. servlet中为什么doGet方法没有被调用的一种可能（笔记）

    创建了一个servlet,然后在doGet()方法内写一些简单的测试语句,但是在实际运行中发现并没有调用到doGet()方法,后来发现自己在创建servlet是将service()方法也勾选上去了,而 ...

  5. 查看GPU占用率以及指定GPU加速程序

    GPU占用率查看: 方法一:任务管理器 如图,GPU0和GPU1的占用率如下显示. 方法二:GPU-Z软件       下面两个GPU,上面是GPU0,下面是GPU1 sensors会话框里的GPU  ...

  6. 学习笔记21—PS换图片背景

    将照片红底的换成白底的. 操作步骤: 1 先上效果,照片来自网络反正不认识,法律问题找度娘 2 下面开始操作,打开图片进入通道面板,选择照片底色的那个通道,复制并调整色阶,确保黑白分明 3 回到图层面 ...

  7. numpy函数

    a=np.array([1,2,3,4,5,6]) a=a.reshape([2,-1])      # -1:表示3,此处将a数组设置为2行3列 a[1,2]=66  # 把a的6改成66 a=np ...

  8. 使用Qss设置QT程序界面的样式和皮肤

    1         使用Qss设置QT程序界面的样式和皮肤 1.1  Qss的功能 Qt程序界面中控件的背景图片.大小.字体颜色.字体类型.按钮状态变化等属性可以通过Qss文件来设置,美化UI界面.实 ...

  9. 浏览器缓存之Expires Etag Last-Modified max-age详解

    前段时间去面试移动端的H5开发工程师,在最后面试的时候被问到了max-age Expires Etag有什么不同,在什么情况下应用,当时乱编了一通,自我感觉良好,结果…… 大家懂得,现在讲他们几个的区 ...

  10. 动态规划-填格子问题 Domino and Tromino Tiling

    2018-09-01 22:38:19 问题描述: 问题求解: 本题如果是第一看到,应该还是非常棘手的,基本没有什么思路. 不妨先从一种简化的版本来考虑.如果仅有一种砖块,那么,填充的方式如下.