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

更新时间：2022年03月17日 14:29:23 作者：Ciao_Traveler

EChart开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文将利用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折线图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

layui 富文本编辑器和textarea值的相互传递方法
今天小编就为大家分享一篇layui 富文本编辑器和textarea值的相互传递方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
javascript每日必学之运算符
javascript每日必学之运算符，javscript的逻辑中的正序，分支，循环以及一些简单的运算符，想要成为javascript大神的朋友不要错过，阅读一下
2016-02-02
JS从非数组对象转数组的方法小结
这篇文章主要给大家介绍了关于JS从非数组对象转数组的一些方法，分别是Array.prototype.slice.call(obj)、Array.from(obj)、[…obj]和Object.values(obj)等方法的详细实现方法，需要的朋友可以参考下。
2018-03-03
Math.js解决js中小数精度丢失问题
在JavaScript中进行小数运算时,会容易出现精度丢失的问题,例如在进行两个小数相加时,结果并不是预期的精确值,而是一个近似值,,使用第三方库Math.js可以避免精度丢失的问题,本文导入Math.js库和使用Math.js的方法来进行小数运算,同时还可以指定格式来保留小数位数
2023-12-12
基于Bootstrap实现Material Design风格表单插件附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载，感兴趣的朋友参考下
2016-04-04
JavaScript实现密码框验证信息
这篇文章主要为大家详细介绍了JavaScript实现密码框验证信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
发个自己写的表格操作类(添加，删除，排序，上移，下移)
发个自己写的表格操作类(添加，删除，排序，上移，下移)...
2006-11-11
JS实现图片翻书效果示例代码
图片翻书效果想必大家都有见过吧，在本文将为大家介绍下使用js是如何实现的，具体的代码如下，感兴趣的朋友可以参考下
2013-09-09
前端导航栏不变切换局部页面的3种方法
在开发网页的过程中,经常需要实现导航菜单的切换,下面这篇文章主要给大家介绍了关于前端导航栏不变切换局部页面的3种方法,文中给出了详细的代码示例,需要的朋友可以参考下
2023-12-12
JavaScript禁止复制与粘贴的实现代码
下面小编就为大家带来一篇JavaScript禁止复制与粘贴的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具