基于Echart实现折线图的绘制详解

效果图

不显示折线图上的拐点方法 ,3个都可以使用,代码中有显示在什么位置使用。

symbolSize:0,

symbol:“none”,

showSymbol:false,

代码:

var mess = ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "24:00"];
    var mess3 = preData;
    var mess4 = curData;
    var option = {
      legend: {
        show: true,
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 10,
        textStyle: {
          fontSize: 10,
          color: "#ccc",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0, 255, 233,0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(255, 255, 255,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 233,0)",
                },
              ],
              global: false,
            },
          },
        },
      },
      grid: {
        top: "25%",
        left: "10%",
        right: "5%",
        bottom: "25%",
      },
      xAxis: {
        data: mess,
        axisTick: {
          show: false,//是否显示坐标轴刻度。
        },
        boundaryGap: false,//x轴留白,默认是true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间
        axisLine: {
          show: true,
          lineStyle: {
            color: "#414965",
          },
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: "#7089ba",
            fontSize: 12,
          },
          margin: 10, //刻度标签与轴线之间的距离。
        },
      },
      yAxis: {
        name:unit,
        nameTextStyle: {
          color: "#fff",
        },
        splitLine: { //是否显示分隔线
          show: true,
          lineStyle: {
            color: "#414965",
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#7089ba",
            fontSize: 12,
          },
        },
        splitNumber: 3//坐标轴的分割段数
      },
      series: [
        {
          name: "今日",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: false,//不显示折线图的拐点
          symbol: "circle",
          symbolSize: 2,
          lineStyle: {
            normal: {
              color: "#44b6fe",
            },
          },
          itemStyle: {
            color: "#44b6fe",
          },
          tooltip: {
            show: true,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: "rgba(53,194,246,0.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(53,194,246,0.1)",
                  },
                ],
                false
              ),
              shadowBlur: 20,
            },
          },
          data: mess4,
          markPoint: {
            symbolSize: 30,
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
        },
        {
          name: "昨日",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: false,
          symbol: "circle",
          symbolSize: 2,
          lineStyle: {
            normal: {
              color: "#ad16ff",
            },
          },
          itemStyle: {
            color: "#ad16ff",
          },
          tooltip: {
            show: true,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: "rgba(179,64,242,0.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(179,64,242,0.1)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(179,64,242, 0)",
              shadowBlur: 20,
            },
          },
          data: mess3,
          markPoint: {
            symbolSize: 30,
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
        },
      ],
    };

到此这篇关于基于Echart实现折线图的绘制详解的文章就介绍到这了,更多相关Echart折线图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Echart折线图手柄触发事件示例详解

    前言 这是我准备在这个项目中使用的图形库,这也是一款基于HTML5的图形库.图形的创建也比较简单,直接引用Javascript即可.使用这个库的原因主要有三点,一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 3:第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易:第三点是这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便. 下面话不多说了,来一起看看详细的介绍吧 1 环境: vue-cli(2.0)+ vue-echarts (

  • Echarts基本入门之柱状图、折线图通用配置

    1echarts的基本步骤 四步 1 找dom容器 2 初始化Init 3 配置options 4 setOptions 几乎124的步骤是一样的,options是配置项,想呈现什么图标就配什么. 最基本的带最大值最小值的柱状图 2 平均值 markLine属性 3 数值显示 柱宽度, 横向柱状图 数值显示 label属性 柱宽度 barWidth 横向的话只需要注意两个轴的转变就行 通用配置 即饼图散点图通用的配置 title 标题 tooltip: 提示 toolbox 工具按钮 legen

  • echarts多条折线图动态分层的实现方法

    1.关于Echarts 大家可以到这个网址看一下,还是比较详细的. http://echarts.baidu.com/doc/example.html 这个功能还是很强大的,对于喜欢做数据统计来说是美味的. 2.echarts多条折线图动态分层 var xData = param.xData; var data = param.yData let option = []; let num =param.num ? param.num : 0; let max = num ? num *100 :

  • Echarts动态加载多条折线图的实现代码

    背景:动态加载多条折线图,折线图条数不确定 页面效果: 页面代码 //气象数据 function serchQx(beginTime, endTime, str, parameter) { $("#rr").html("");//将循环拼接的字符串插入下拉列表 var t = $("#imageParameter").val(); $ .ajax({ type : "POST", data : { "str"

  • echarts实现折线图的拖拽效果

    使用echarts实现折线图的拖拽,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./echarts.js"></script> </head> <body> <div id="main" style="width: 600p

  • 基于Echart实现折线图的绘制详解

    效果图 不显示折线图上的拐点方法 ,3个都可以使用,代码中有显示在什么位置使用. symbolSize:0, symbol:“none”, showSymbol:false, 代码: var mess = ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00",

  • Python可视化Matplotlib折线图plot用法详解

    目录 1.完善原始折线图 - 给图形添加辅助功能 1.1 准备数据并画出初始折线图 1.2 添加自定义x,y刻度 1.3 中文显示问题解决 1.4 添加网格显示 1.5 添加描述信息 1.6 图像保存 2. 在一个坐标系中绘制多个图像 2.1 多次plot 2.2 显示图例 2.3 折线图的应用场景 折线图是数据分析中非常常用的图形.其中,折线图主要是以折线的上升或下降来表示统计数量的增减变化的统计图.用于分析自变量和因变量之间的趋势关系,最适合用于显示随着时间而变化的连续数据,同时还可以看出数

  • R语言学习之线图的绘制详解

    目录 线图 单线图 多线图 横轴文本线图 线图 线图是反映趋势变化的一种方式,其输入数据一般也是一个矩阵. 单线图 假设有这么一个矩阵,第一列为转录起始位点及其上下游5 kb的区域,第二列为H3K27ac修饰在这些区域的丰度,想绘制一张线图展示. profile="Pos;H3K27ac -5000;8.7 -4000;8.4 -3000;8.3 -2000;7.2 -1000;3.6 0;3.6 1000;7.1 2000;8.2 3000;8.4 4000;8.5 5000;8.5"

  • WPF实现雷达扫描图的绘制详解

    目录 前言 制作思路 具体实现 前言 实现一个雷达扫描图. 源代码在TK_King/雷达 (gitee.com),自行下载就好了 制作思路 绘制圆形(或者称之轮) 绘制分割线 绘制扫描范围 添加扫描点 具体实现 首先我们使用自定义的控件.你可以使用vs自动添加,也可以手动创建类.注意手动创建时要创建Themes/Generic.xaml的文件路径哦. 控件继承自itemscontrol,取名叫做Radar. 我们第一步思考如何实现圆形或者轮,特别是等距的轮. 我们可以使用简单的itemscont

  • D3.js实现折线图的方法详解

    前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

  • Android开发自定义控件之折线图实现方法详解

    本文实例讲述了Android开发自定义控件之折线图实现方法.分享给大家供大家参考,具体如下: 前言 折线图是Android开发中经常会碰到的效果,但由于涉及自定义View的知识,对许多刚入门的小白来说会觉得很高深.其实不然,接下来我就以尽量通俗的语言来说明下图折线图效果的实现过程. 效果图 实现过程 首先,选择自定义控件的方式. 自定义控件的实现有四种方式: 1.继承View,重写onDraw.onMeasure等方法. 2.继承已有的View(比如TextView). 3.继承ViewGrou

  • 基于javascript处理二进制图片流过程详解

    今天学习怎么生成二维码,我习惯所有请求都用ajax完成 但是今天发现jquery的ajax不支持二进制,只能搞纯文本 于是百度之后手动实现这一功能 function getBinary(url, args, success) { var xmlhttp = new XMLHttpRequest(); var data = eval(args); var i = 0; for (var key in data) { if (i++ === 0) { url += '?' + key + "=&qu

  • Matlab绘制雨云图的方法详解

    目录 介绍 横向雨云图 纵向雨云图 介绍 写了俩代码模板,用来绘制横向云雨图与纵向云雨图,云雨图其实就是用把小提琴图拆开来的模板,想获取小提琴图绘制函数的可以看这里:基于Matlab绘制小提琴图的示例代码 后面的俩模板用的时候只需要换换数据,颜色及每一类名称即可,雨云图绘制效果如下: 横向雨云图 function rainCloudsTMPL1 % @author: slandarer % 在这里放入你的数据============================================

  • R语言绘制维恩图ggvenn示例详解

    目录 引言 1.安装 2.基础用法 3.图形美化 4.提取交集部分并输出 引言 韦恩图,Venn diagram,常用图的一种,用来展示集合之间的特异性和共同性.现在有很多在线的网站都可以绘制,但是R来画也方便,其中ggvenn是基于ggplot2的专门绘制韦恩图的R包. 官方网站:https://github.com/yanlinlin82/ggvenn 1.安装 ggvenn在CRAN上,直接用Install.packages就可以完成安装: > install.packages("g

  • 基于RecyclerChart的KLine绘制详解

    本章节是KLine的绘制的第二章节,在原来的基础上绘制5.10.20日均线.下面是gif的效果. 其实只是把线性图表的绘制逻辑搬到这边一起,上篇文章提到在一个For循环里处理,减少遍历,之前是通过Entry的Y值找对应的PointF的Y值,这里需要用StockEntry中的5日.10日.20日均线值去求值.就是类似的一些逻辑替换,思想还是不变,然后左右边界的处理暂时先放一放,滑动到边界会有一些bug. 同时,这里的均值没有参与到图表YAxis的Max.min的计算中去,会有线出上下边界的情况,待

随机推荐