【ECharts】折线图

已于 2023-12-20 19:21:34 修改
阅读量361 收藏
点赞数 1
分类专栏： 图表 文章标签： echarts 前端
于 2023-12-20 18:51:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trista_1999/article/details/135115114
版权

文章目录

参考：
Echarts官网
Echarts 配置项

折线图1

带X轴、Y轴标记线，其中X轴是’category’ 类目轴，适用于离散的类目数据。
在这里插入图片描述

let myChart = echarts.init(this.$refs.line_chart2);
let yList = [400, 500, 600, 800, 1200, 1500, 1300, 900, 700, 600, 500];
let xList = ['n-5', 'n-4', 'n-3', 'n-2', 'n-1', 'n', 'n+1', 'n+2', 'n+3', 'n+4', 'n+5'];
let option = {
  title: {
    text: '折线图2',
  },
  tooltip: { show: true },
  xAxis: {
    type: 'category',
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
    data: xList,
  },
  yAxis: {
    type: 'value',
    //网格线
    splitLine: {
      lineStyle: {
        type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
      },
    },
  },
  series: [
    {
      type: 'line',
      smooth: true,
      symbolSize: 6,
      symbol: 'circle',
      data: yList,
      color: '#FFC310',
      //区域填充样式
      areaStyle: {
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(246,198,56, 0.6)',
          },
          {
            offset: 1,
            color: 'rgba(246,198,56, 0)',
          },
        ]),
      },
      markLine: {
        silent: true,
        symbol: ['none', 'none'],
        lineStyle: {
          type: 'dashed',
          dashOffset: 1,
          width: 1,
          opacity: 0.6,
        },
        data: [
          {
            name: 'x轴标记线',
            xAxis: 'n',
            label: {
              formatter: '{b}：{c}',
            },
            lineStyle: {
              color: '#0050FF',
            },
          },
          {
            name: 'y轴标记线',
            yAxis: 800,
            label: {
              formatter: '{b}：{c}',
              position: 'insideEndTop',
            },
            lineStyle: {
              color: '#00C078',
            },
          },
        ],
      },
    },
  ],
};

myChart.setOption(option);

折线图2

带X轴、Y轴标记线，其中’value’ 数值轴，适用于连续数据。
在这里插入图片描述

let myChart = echarts.init(this.$refs.line_chart3);
let intervalNum = 2;
//  数据类型为二维数组
let dataArray = [
  [0, 400],
  [2, 500],
  [4, 800],
  [5, 1200],
  [7, 400],
  [8, 500],
  [10, 400],
  [12, 500],
];
let option = {
  title: {
    text: '折线图2',
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
    formatter: '{c}',
  },
  xAxis: {
    type: 'value',
    axisTick: {
      // 文字对准刻度
      alignWithLabel: true,
      color: '#C1C7D0',
    },
    minInterval: intervalNum,
    maxssInterval: intervalNum,
  },
  yAxis: {
    type: 'value',
    //网格线
    splitLine: {
      lineStyle: {
        type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
      },
    },
  },
  series: [
    {
      type: 'line',
      smooth: true,
      symbolSize: 6,
      symbol: 'circle',
      data: dataArray,
      color: '#FFC310',
      //区域填充样式
      areaStyle: {
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(246,198,56, 0.6)',
          },
          {
            offset: 1,
            color: 'rgba(246,198,56, 0)',
          },
        ]),
      },
      markLine: {
        silent: true,
        symbol: ['none', 'none'],
        lineStyle: {
          color: '#FFC310',
          type: 'dashed',
          dashOffset: 1,
          width: 1,
          opacity: 0.6,
        },
        data: [
          {
            name: 'x轴标记线',
            xAxis: 7.2,
            label: {
              formatter: '{b}：{c}',
            },
            lineStyle: {
              color: '#0050FF',
            },
          },
          {
            name: 'y轴标记线',
            yAxis: 800,
            label: {
              formatter: '{b}：{c}',
              position: 'insideEndTop',
            },
            lineStyle: {
              color: '#00C078',
            },
          },
        ],
      },
    },
  ],
};
myChart.setOption(option);

折线图3

多条折线图
在这里插入图片描述

 let myChart = echarts.init(this.$refs.line_chart4);
 let option = {
   title: {
     text: '折线图3',
   },
   tooltip: {
     trigger: 'axis',
     valueFormatter: value => value + '个',
   },
   legend: {
     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
   },
   grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true,
   },
   toolbox: {
     feature: {
       saveAsImage: {},
     },
   },
   xAxis: {
     type: 'category',
     boundaryGap: false,
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   },
   yAxis: {
     type: 'value',
   },
   series: [
     {
       name: 'Email',
       type: 'line',
       stack: 'Total',
       data: [120, 132, 101, 134, 90, 230, 210],
     },
     {
       name: 'Union Ads',
       type: 'line',
       stack: 'Total',
       data: [220, 182, 191, 234, 290, 330, 310],
     },
     {
       name: 'Video Ads',
       type: 'line',
       stack: 'Total',
       data: [150, 232, 201, 154, 190, 330, 410],
     },
     {
       name: 'Direct',
       type: 'line',
       stack: 'Total',
       data: [320, 332, 301, 334, 390, 330, 320],
     },
     {
       name: 'Search Engine',
       type: 'line',
       stack: 'Total',
       data: [820, 932, 901, 934, 1290, 1330, 1320],
     },
   ],
 };
 myChart.setOption(option);

示例

 <!--
 * @Description: 
 * @Author: HMM
 * @Date: 2023-05-22 10:49:48
 * @FilePath: \vue-antd-project2\src\views\LineChart.vue
-->
<template>
  <div class="lineChart">
    <div ref="line_chart1" style="width: 100%; height: 500px"></div>
    <div ref="line_chart2" style="width: 100%; height: 500px"></div>
    <div ref="line_chart3" style="width: 100%; height: 500px"></div>
    <div ref="line_chart4" style="width: 100%; height: 500px"></div>
    <br />
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  methods: {
    initLineChart1() {
      let myChart = echarts.init(this.$refs.line_chart1);
      let xData = ['9:00', '11:00', '', '15:00', '17:00', '', '20:00'];
      let valueData = [6.0, 8.5, 7.6, 3.5, 10.0, 9.5, 11.0];
      let option = {
        title: [
          {
            text: '恭喜您超过50%的组员！',
            top: '0',
            left: '20',
            textStyle: {
              color: '#FFA000',
              fontSize: 13,
            },
          },
        ],
        grid: {
          top: '50',
          left: '20',
          right: '20',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: { show: false },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: '#000000',
                margin: 15,
              },
            },
            axisTick: { show: false },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: 'value',
            // min: 1,
            // max: 100,
            splitLine: { show: false },
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: '金额',
            type: 'line',
            smooth: true, //是否平滑曲线显示
            symbol: 'none',
            color: '#1874FF',
            //区域填充样式
            areaStyle: {
              color: 'rgba(24,116,255, 0.2)',
              shadowColor: 'rgba(24,116,255, 0.9)',
              shadowBlur: 20,
            },
            data: valueData,
            markLine: {
              silent: true,
              symbol: ['none', 'none'],
              lineStyle: {
                width: 2,
                type: 'dotted',
                color: '#E9E9E9',
              },
              data: [
                {
                  name: '组均',
                  yAxis: 8,
                  label: {
                    position: 'insideStartTop',
                    formatter: '组均：{c} ',
                  },
                },
                {
                  name: '我的',
                  yAxis: 10,
                  label: {
                    position: 'insideStartTop',
                    formatter: '我的：{c} ',
                  },
                },
                {
                  name: '测试',
                  yAxis: 100,
                  label: {
                    position: 'insideStartTop',
                    formatter: '测试：{c} ',
                  },
                },
              ],
            },
          },
        ],
      };

      myChart.setOption(option);
    },
    initLineChart2() {
      let myChart = echarts.init(this.$refs.line_chart2);
      let yList = [400, 500, 600, 800, 1200, 1500, 1300, 900, 700, 600, 500];
      let xList = ['n-5', 'n-4', 'n-3', 'n-2', 'n-1', 'n', 'n+1', 'n+2', 'n+3', 'n+4', 'n+5'];
      let option = {
        title: {
          text: '折线图1',
        },
        tooltip: { show: true },
        xAxis: {
          type: 'category',
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          data: xList,
        },
        yAxis: {
          type: 'value',
          //网格线
          splitLine: {
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
            },
          },
        },
        series: [
          {
            type: 'line',
            smooth: true,
            symbolSize: 6,
            symbol: 'circle',
            data: yList,
            color: '#FFC310',
            //区域填充样式
            areaStyle: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(246,198,56, 0.6)',
                },
                {
                  offset: 1,
                  color: 'rgba(246,198,56, 0)',
                },
              ]),
            },
            markLine: {
              silent: true,
              symbol: ['none', 'none'],
              lineStyle: {
                type: 'dashed',
                dashOffset: 1,
                width: 1,
                opacity: 0.6,
              },
              data: [
                {
                  name: 'x轴标记线',
                  xAxis: 'n',
                  label: {
                    formatter: '{b}：{c}',
                  },
                  lineStyle: {
                    color: '#0050FF',
                  },
                },
                {
                  name: 'y轴标记线',
                  yAxis: 800,
                  label: {
                    formatter: '{b}：{c}',
                    position: 'insideEndTop',
                  },
                  lineStyle: {
                    color: '#00C078',
                  },
                },
              ],
            },
          },
        ],
      };

      myChart.setOption(option);
    },

    initLineChart3() {
      let myChart = echarts.init(this.$refs.line_chart3);
      let intervalNum = 2;
      let dataArray = [
        [0, 400],
        [2, 500],
        [4, 800],
        [5, 1200],
        [7, 400],
        [8, 500],
        [10, 400],
        [12, 500],
      ];
      let option = {
        title: {
          text: '折线图2',
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          formatter: '{c}',
        },
        xAxis: {
          type: 'value',
          axisTick: {
            // 文字对准刻度
            alignWithLabel: true,
            color: '#C1C7D0',
          },
          minInterval: intervalNum,
          maxssInterval: intervalNum,
        },
        yAxis: {
          type: 'value',
          //网格线
          splitLine: {
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
            },
          },
        },
        series: [
          {
            type: 'line',
            smooth: true,
            symbolSize: 6,
            symbol: 'circle',
            data: dataArray,
            color: '#FFC310',
            //区域填充样式
            areaStyle: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(246,198,56, 0.6)',
                },
                {
                  offset: 1,
                  color: 'rgba(246,198,56, 0)',
                },
              ]),
            },
            markLine: {
              silent: true,
              symbol: ['none', 'none'],
              lineStyle: {
                color: '#FFC310',
                type: 'dashed',
                dashOffset: 1,
                width: 1,
                opacity: 0.6,
              },
              data: [
                {
                  name: 'x轴标记线',
                  xAxis: 7.2,
                  label: {
                    formatter: '{b}：{c}',
                  },
                  lineStyle: {
                    color: '#0050FF',
                  },
                },
                {
                  name: 'y轴标记线',
                  yAxis: 800,
                  label: {
                    formatter: '{b}：{c}',
                    position: 'insideEndTop',
                  },
                  lineStyle: {
                    color: '#00C078',
                  },
                },
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
    },

    initLineChart4() {
      let myChart = echarts.init(this.$refs.line_chart4);
      let option = {
        title: {
          text: '折线图3',
        },
        tooltip: {
          trigger: 'axis',
          valueFormatter: value => value + '个',
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initLineChart1();
    this.initLineChart2();
    this.initLineChart3();
    this.initLineChart4();
  },
};
</script>
<style style="less" scoped></style>
劰的劰
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+VUE+Echarts折线图让某一个点闪烁
11-04
HTML+VUE+Echarts折线图让某一个点闪烁
手把手教你用ECharts画折线图
大数据
01-07 6519
导读：折线图是一种基础图表，适合表示数据的变化趋势，常用于时间序列数据的表示。作者：王大伟来源：大数据DT（ID：hzdashuju）在正式学习之前，先来了解一个ECharts官网提供的...
echarts 图例 && 折线图
weixin_40030173的博客
11-22 6478
【代码】echarts 图例 && 折线图。
echarts设置x轴的文字换行
hello world
10-14 3229
有时候文字长度过长，会导致某些值消失，所以设置换行能够解决 xAxis : [ { type : 'category', data : [], axisLabel: { show: true, textStyle: { color: '#000000', fontSize:'16' } }, axisLabel...
vue实现echarts中 9种 折线图图例
最新发布
懒虫的博客
10-09 1854
vue实现echarts中 9种 折线图图例
ECHARTS-折线详解
qq_44718666的博客
05-28 1059
option = { backgroundColor: '#fff', // 背景颜色 title: { //标题 text: '堆叠区域图', //主 subtext: '数据来自网络', // 副 textStyle: { //标题样式 color: '#00F6FF', fontSize: 24 }, subtextStyle:{ //副.
echarts 图表折线图 实例
zhang_zan
07-31 538
echarts绘制折线图
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
echarts折线图line动态显示阈值警
07-20
根据实时数据变换markLine的展示效果。比如温度超过设置的警戒线，就会出现警报效果
uni-app封装echarts折线图，安卓真机测试可以使用
02-09
echarts直接使用h5方式渲染在真机里会报错和显示不了，所以需要使用renderjs配合使用才可以
echarts折线图.zip
11-18
经典的web端echarts折线图示例，调用方便，代码简洁，亲测可用。折线图的样式种类也有很多，图例什么的都有
echarts折线图/柱状图/饼图自定义图例（图例过多使用滚动条）
Nancyeah的博客
04-22 5878
文章目录前言一、数据处理二、示例1.根据设计需要写出自定义图例2.自定义图例能和echarts的图互动总结 前言 echarts的图例滚动是通过点击按钮实现的，而本次设计需要可以使用滚动条/鼠标滚轮进行滚动并支持模糊搜索，echarts不支持，那么就只能通过自定义整个图例来实现。 提示：以下是本篇文章正文内容，下面案例可供参考 一、数据处理 图例的数据要和图的series的数据对应上，比如折线图的series里每个对象的name就应该.
超全的echarts折线图样式整理
qq_41648113的博客
11-16 7757
本次记录了echarts的折线颜色修改、自定义展示折线最后一个数值内容、自定义折线内容颜色、自定义折线图缩放展示、x轴线条粗细调整、x轴箭头单箭头调整、y轴线条粗细调整、自定义图例位置、自定义下载按钮颜色和大小设置等功能。
echarts折线图实例
热门推荐
qq_38822390的博客
05-29 2万+
五分钟上手： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之折线图</title> <!-- 引入 echarts.js --> <...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
狼丶宇先森的网络科技空间
05-30 3849
一、echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一，是用折线将各个数据点标志连接起来的图表，不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况以及变化趋势。 看着官网示例的这些花花绿绿的折线图，相信在日常的开发中，只要稍加配置调一下，已经可以满足9成的需求了。 二、echarts的下载、安装与使用 在上一篇的文章里，我们主要是学习如何快速上手Echarts的一些属性设置，我们演示的时候用的引入方式是一次性引入所有的资源。 如这样： i
echarts 折线图实例
smileonlytoyou的博客
09-02 683
定义div <div id="moreColumn" style="width: 80%; height: 70%;float: left;"></div> 定义一个mycharts var myChart = echarts.init(document.getElementById('moreColumn')); 定义方法 function loadCol...
ECharts折线图
萤烛末光,增辉日月
08-30 2117
了解和使用ECharts折线图，包括基础设置，多折线图，阶梯折线图，双轴折线图，动态折线图等。
Echarts折线图
~~
08-30 5188
效果图1： option:{ backgroundColor: "rgba(255,255,255,0)", tooltip: { trigger: "axis", axisPointer: { lineStyle: { color: { type: "linear", x: 0, .
echarts 折线图案例
weixin_44486632的博客
01-16 2148
var myChart = echarts.init(selft.$refs.chartsBox); var option = { //dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移：在坐标系中滑动拖拽进行数据区域平移。2缩放：PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同;移动端：在移动端触屏上，支持两......
echarts 折线图
08-10
Echarts折线图是一种常用的图表形式，可以展示多组数据在一个图表中，以直观的方式呈现数据。我们可以通过简单的配置，使用Echarts制作基本的折线图，并逐步完善，使其更具可读性和可视化效果。12...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值