❤echarts折线图完整使用及详细配置参数

已于 2024-05-20 11:05:41 修改
阅读量1.5w 收藏 73
点赞数 9
分类专栏： Vue 文章标签： echarts vue.js 前端
于 2023-08-21 17:14:26 首次发布
林太白
本文链接：https://blog.csdn.net/weixin_43615570/article/details/132412630
版权

❤echarts折线图引入使用及详细配置

进入echarts官网 查看案例，下面说说一些echarts图的调节

1、介绍

（1） 官网案例地址：

https://echarts.apache.org/examples/zh/editor.html?c=line-simple

（2）引入和实现

引入

import * as echarts from 'echarts';

结构

id="echartline"

方法

this.xselinechartin('echartline');

xselinechartin(id) {
      // 折线图 3
      // console.log(document.getElementById(id));
      if (document.getElementById(id)) {

        let zhexian3 = echarts.init(document.getElementById(id));
        let optionzhexian = {
          
           grid: {
            left: '20%', //距离左侧边距
            right: '0%',
            top: '10%',
            bottom:'25%',
            containLabel: false
          },
          
          dataZoom: [{
              type: 'inside', //1平移 缩放
              throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
              minValueSpan: 5, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
              start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
              end: 10, //数据窗口范围的结束百分比。范围是：0 ~ 100。
              zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
            }],
          color:'#002f36',// #002f36  008297
          tooltip: {
            trigger: 'item', // 触发类型，可选值: 'item'（数据项触发），'axis'（坐标轴触发），'none'（不触发）
            axisPointer: {
                type: 'line', // 设置触发提示的指示器类型 
                // 可选值: 'line'（直线指示器），'shadow'（阴影指示器），'cross'（十字准星指示器）
            },
            backgroundColor: 'rgba(0,47,54,1)', // 设置背景颜色
            textStyle: {
                color: '#fff', // 设置文本颜色
                fontSize:12, // 设置文字大小

            },
            padding: [5, 10], // 内边距
            formatter: `2023年{b}<br/>US$ {c}`, 
           },

          
          xAxis: {
            type: 'category',
            data: ['11月26日', '11月27日', '11月28日', '11月29日', '11月30日', '12月1日', '12月2日']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [0,0,0,0,20,0],
            type: 'line',
            smooth: false,//
          }]
        };

        zhexian3.setOption(optionzhexian);
      }

    },

（3）实现

基础版本的折线图以及预览
在这里插入图片描述
代码：

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 250, 224, 218, 135, 147, 260],
      type: 'line',
    },
    {
      data:[15,51,150,18,25,29,59,56],
      type:'line',
    }
  ]
};

2、查看echarts结构参数

01 基础版本的折线图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

3、x轴详细配置-折线图

（1） x轴设置间隔个数显示

xAxis这个属性
在这里插入图片描述

（2）x轴分割线

在这里插入图片描述

splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(133, 194, 252, 0.2)',
              type: 'solid'
        }
 }

在这里插入图片描述

（3）x轴数据过多

🍎 dataZoom 拖动滑动x轴，为我们提供了巨大的帮助，层级与xAxis平级。


  dataZoom: [{
      type: 'inside', //1平移 缩放
      throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
      minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
      start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
      end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
      zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
    }],

axisLabel:{ interval:间隔数量 }

// 只是显示奇数个数
axisLabel:{ interval:0 }

（4） x轴数据格式自定义

重新定义x轴数据

axisLabel: {
            formatter: function (value, index) {
                // 在这里可以编写自定义的格式化逻辑
                // 例如，将日期格式转换为特定格式
                return value.replace(/(\d{4})-(\d{2})-(\d{2})/, `$2月'$3`);
                // return value.replace(/(\d{4})-(\d{2})-(\d{2})/, `$3/$2/$1`); // 2023年06月01 01-06-2023
   }
}

（5） 设置横向标记线

添加进入series下的[{}]里面的{}之中

 markLine: {
        silent: true,
        lineStyle: {
          type: 'dashed', // 基准线样式为虚线
          color: 'red'
        },
        data: [
          {
            yAxis: 200, // 自定义下限值
            // name: '最小值', // 基准线名称
            label: {
              show: false
            }
          }
        ]
      },

在这里插入图片描述

4、y轴详细配置-折线图

（1） y轴左侧顶部标题

🍎 title 可以帮助我们实现 echarts y轴顶部的标题，层级与xAxis平级

title: { text: 'Stacked Line' },

（2） y轴显示顶部数值

在这里插入图片描述

 label: {
        show: true,
        position: 'top'
      },

（3）y轴左边轴承数值背后添加单位

在这里插入图片描述

设置yAxis 》 axisLabel 》formatter

  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: function (value, index) {
        return value + ' kg'; // 将原始数值与单位字符串拼接起来
      }
    }
  },

（4）y轴左侧字体样式

yAxis: {
    type: 'value',
     axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: 'red' //Y轴内容文字颜色
            }
      },
  },

在这里插入图片描述

（5）y轴轴线

axisLine: {
            //y轴线的配置
            show: true, //是否展示
            lineStyle: {
              color: 'rgba(133, 194, 252, 0.8)', //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
              width: 1, //y轴线的宽度
              type: 'solid' //y轴线为实线
            }
   },

在这里插入图片描述

5、想要让折线图平滑

🍎 smooth 决定了线段的类型，直线或者曲线，层级与series下的data平级

 series: [
    // 折线图--人数
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true,
      // areaStyle: {}
    }
]
  
smooth: true，// true为平滑线段  false为折线，默认为false

6、想让你的echarts折线图变成面积图

🍎 areaStyle: {} 决定了你的图形是否是面积图 ，层级与series下的data平级

 areaStyle: {}

7、更改鼠标悬浮框效果tooltip

鼠标悬浮框显示

🍎 tooltip 可以帮助我们实现 echarts 鼠标悬浮上去的效果，层级与xAxis平级

tooltip: { trigger: 'axis'},

鼠标悬浮框辅助线

axisPointer

tooltip: {
    trigger: 'axis',
    // 辅助线
    axisPointer: {
      type: 'line', // 辅助线类型，可选为：'line' | 'shadow' | 'cross'
      lineStyle: {
        color: '#1890FF', // 辅助线颜色
        type: 'dashed'
      }
    }
  },

提示框formatter提示框数据

formatter

tooltip: {
    trigger: 'axis',
    // 悬浮框提示
    formatter: '{b} <br> 检测趋势：{c}',
  },

（1）{a}：系列名，series.name。

（2）{b}：数据名，xAxis.data。

（3）{c}：数据值，yAxis.data。

（5）{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。

（6）{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
————————————————
换行添加 <br/>

多个属性

formatter:"{b0}:{c0}<br/>{b1}:{c1}"
自定义格式
formatter(params) {
            return `
            <div>
              <div style="font-size:12px;color:#000">${params[0].name}</div>
                 <div style="font-size:12px;color:#1AB5AF"><span  style="font-size:12px;color:#000">${params[0].value}%</span></div>
              </div>`;
          },
自定义提示数据的类型
 formatter:function(v){
         vartext=v.name;
         returntext.length>10?text.substr(0,10)+"...":text;
}

鼠标悬浮框显示其他详细参数

tooltip: {
        show: true,                  // 是否显示提示框，默认为 true
        trigger: 'item',             // 触发类型，可选值: 'item'（数据项触发），'axis'（坐标轴触发），'none'（不触发）
        axisPointer: {               // 坐标轴指示器配置项
            type: 'line',            // 指示器类型，可选值: 'line'（直线指示器），'shadow'（阴影指示器），'cross'（十字准星指示器）
            lineStyle: {             // 直线指示器样式设置
                color: '#aaa'        // 线条颜色
            },
            crossStyle: {            // 十字准星指示器样式设置
                color: '#aaa'        // 线条颜色
            },
            shadowStyle: {           // 阴影指示器样式设置
                color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
        },
        backgroundColor: 'rgba(0,0,0,0.7)',  // 提示框背景色
        padding: [5, 10],                     // 内边距
        textStyle: {                           // 文本样式
            color: '#fff',                     // 文本颜色
            fontSize: 12                       // 文本字号
        },
        formatter: '{b}: {c}',                  // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
        // 更多配置项...
    },
    
    ```

8、调整折线图的边距和位置

🍎 grid 可以帮助我们实现 echarts 鼠标悬浮上去的效果，层级与xAxis平级

   grid: {
    left: '5%', //距离左侧边距
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

🍌 当然gaid还有另外一种写法，哪种需要就用哪种

  grid: { 
    x: "10%", //x 偏移量 
    y: "7%", // y 偏移量 
    width: "85%", // 宽度 
    height: "55%", // 高度 
    right: "15%", 
  },

9、图表动画

在这里插入图片描述

    animation: true,//动画 
    // animationEasing:'cubicOut',//动画的缓动方式
      animationDuration:15000,//持续时间

10、折线图拐点markPoint属性

option = {  
    series: [{  
        type: 'line',  
        data: [/* 数据 */],  
        markPoint: {  
            symbol: 'circle', // 设置拐点小圆点  
            // 其他配置项...  
        }, 
        symbolSize:8, // 设置拐点小圆点大小
        // 其他配置项...  
    }],  
    // 其他配置项...  
};

‘circle’: 圆形标记。
‘rect’: 矩形标记。
‘roundRect’: 带圆角的矩形标记。
‘triangle’: 三角形标记。
‘diamond’: 菱形标记。
‘pin’: 标记形状为图钉，这种类型主要用于地图上的标记。
‘arrow’: 标记形状为箭头，这种类型主要用于地图上的标记。

设置拐点小圆点大小

option = {  
    series: [{  
        type: 'line',  
        data: [/* 数据 */],  
        markPoint: {  
            symbol: 'circle', // 设置拐点小圆点  
        }, 
        symbolSize:8, // 设置拐点小圆点大小
        // 其他配置项...  
    }],  
    // 其他配置项...  
};

拐点自定义图片

 // 设置标记点的图片链接
 var markPointImage = 'https://echarts.apache.org/examples/data/asset/img/echarts-logo.png';
	series: [{
         type: 'line',
             data: data,
             markPoint: {
                 symbol: `image://${markPointImage}`, // 设置标记点的形状为图片
                 symbolSize: 40, // 设置标记点的大小
                 data: [
                     { type: 'max', name: '最大值' }, // 添加最大值的标记点
                     { type: 'min', name: '最小值' }  // 添加最小值的标记点
                 ]
             }
	 }]

在这里插入图片描述

11、拖动滑动x轴底部缩放 dataZoom

dataZoom 拖动滑动x轴，为我们提供了巨大的帮助，层级与xAxis平级。


  dataZoom: [{
      type: 'inside', //1平移 缩放
      throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
      minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
      start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
      end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
      zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
    }],

在这里插入图片描述

dataZoom: [
          {
            type: 'inside',
            start: 40,
            end: 100
          },
          {
            start: 40,
            end: 100
          }
 ],

12、折线图legend属性

自定义legend宽高

legend: {
   // 自定义 Legend 的显示内容
     data: ['数据1', '数据2'],
     // 自定义 Legend 的宽度和高度
     width: 300,
     height: 50
 },

自定义 Legend 中每个图例项的样式

//自定义 Legend 中每个图例项的样式
legend: {
    // 自定义 Legend 的显示内容
    data: ['数据1', '数据2'],
    color: ['#000', '#1890FF', '#1890FF'],
    // 自定义 Legend 的宽度和高度
    itemWidth: 10,// 设置每个小块的宽度和高度
    itemheight: 18,// 设置每个小块的宽度和高度
    itemStyle: { }
  },

13、折线图跳过空白

在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, , 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

二、效果源码

以下折线图直接复制到echarts官网可以直接使用：

【折线图效果1】

image.png

【折线图源码1】

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  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]
    }
  ]
};

【折线图效果2】

image.png

【折线图源码2】

option = {
        color: ['#1890FF', '#52E3A9'], //'#FFB566',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        splitLine: {
          color: '#85C2FC'
        },
        legend: {
          data: ['Evaporation', 'Precipitation', '22']
        },
        xAxis: [{
          boundaryGap: false, //过长隐藏x轴文字
          splitLine: {
            show: false,
            lineStyle: {
              color: ['rgba(133, 194, 252, 0.4)'],
              width: 1,
              type: 'solid'
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              // color: 'rgba(133, 194, 252, 0.4)', //坐标线的颜色
              color:'#DBD8D9',
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: '#808080',
              fontSize: '10px'
            }
          },
          type: 'category',
          data: [
            '2022年6月2号',
            '2日',
            '3日',
            '4日',
            '5日',
            '6日',
            '7日',
            '8日',
            '9日',
            '10日',
            '11日'
          ],
          axisPointer: {
            type: 'shadow'
          }
        }],
        yAxis: [{
            type: 'value',
            name: '',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              //y轴文字的配置
              formatter: '{value}',
              show: true,
              textStyle: {
                
                color: '#808080',
                fontSize: '10px'
              }
              // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(133, 194, 252, 0.4)', //坐标线的颜色
                width: '2' //坐标线的宽度
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                // color: ['rgba(133, 194, 252, 0.4)'],
                color:'#DBD8D9',
                width: 1,
                type: 'solid'
              }
            },
          },
          {
            type: 'value',
            name: '',
            show: false,
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'line',
            smooth: true, //平滑
            showSymbol: false,
            lineStyle: {
              // 阴影部分
              width: 3, // 线条颜色、粗细
              color: '#FFB566',
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 4, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: 'rgba(255, 181, 102, 0.4)' //折线颜色
            },
            color: '#FFB566',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value;
              }
            },
            data: [20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
          },
          {
            name: 'Precipitation',
            type: 'line',
            smooth: true, //平滑
            lineStyle: {
              // 阴影部分
              width: 3, // 线条颜色、粗细
              color: '#1791FF',
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 4, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: 'rgba(3,116,255,0.4)' //折线颜色
            },
            showSymbol: false,

            color: '#52E3A9',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
          {
            name: '22',
            type: 'line',
            showSymbol: false,
            lineStyle: {
              // 阴影部分
              width: 3, // 线条颜色、粗细
              color: '#52E3A9',
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 4, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: 'rgba(3,116,255,0.4);' //折线颜色
            },
            smooth: true,
            color: '#1890FF',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' °C';
              }
            },
            data: [2, 6.3, 5.0, 6, 7, 8, 9, 12.0, 6.2, 10.2, 20.3, 23.4]
          }
        ]
      };

三、echarts折线图问题

（1） y轴刻度的值跟实际值不对应：

在这里插入图片描述
代码配置如下：

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 250, 224, 218, 135, 147, 260],
      type: 'line',
      stack:'Total',
    },
    {
      data:[15,51,150,18,25,29,59,56],
      type:'line',
      stack:'Total',
    }
  ]
};
原因：

series设置了stack参数，并且stack 名称是一样的

官网对于stack参数属性介绍如下：

属性地址：
https://echarts.apache.org/zh/option.html#series-line.stack

介绍：
在这里插入图片描述

解决方案1:
将series中的”stack“属性删除 （推荐）
在这里插入图片描述

解决方案2:
将series中的”stack“属性名称改为不一致 （不推荐）

（2）echarts折线图x轴数据过多

dataZoom属性

4、实现效果

  • 效果1
    在这里插入图片描述

  • 效果2
    在这里插入图片描述

（3） 图表的清空与重新渲染

// 清空图表
myChart.clear();
将图表清空，但不会销毁 ECharts 实例


销毁 ECharts 实例，可以调用 dispose 方法

// 设置初始配置项
myChart.setOption(option);

四、完整使用案例

效果源码1

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 myChart.setOption(
 {
  tooltip: {
    trigger: ''
  },
  // legend: {
  //   data: ['Email', 'Union Ads']
  // },
  grid: { //距离各个地方的边距 1
    left: '10%',
    right: '5%',
    bottom: '10%',
    containLabel: true
  },
grid: {  //另外一种方式控制 2
        x: "12%",//x 偏移量
        y: "7%", // y 偏移量
        width: "87%", // 宽度
        height: "79%"// 高度
 },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',,
    // 隐藏y轴
        axisLine: {
          show: false
        },
   // 隐藏y轴刻度线
        axisTick: {
          show: false
        },
        // y轴网格线设置
        splitLine: {
          type: "dashed",
          color: "#eeeeee"
        },
  },
  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]
    }
  ]
 });

完整源码2

option = {
  tooltip: { trigger: 'axis' },
  dataZoom: [
    {
      type: 'inside', //1平移 缩放
      throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
      minValueSpan: 12, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
      start: 0, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
      end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
      zoomLock: true //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
    }
  ],

  grid: {
    x: '10%', //x 偏移量
    y: '7%', // y 偏移量
    width: '50%', // 宽度
    height: '55%', // 高度
    right: '20%'
  },

  xAxis: {
    type: 'category',

    data: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10'
    ],
    axisLabel: { interval: 1 }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 150, 230,
        224, 218, 135, 147, 260, 150, 230, 224, 218, 135
      ],
      type: 'line'
    }
  ]
};

更多相关源码已经放进个人开源项目中：评论获取地址

林太白
关注
  • 9
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
EasyUI表格合并，及echarts折线图，导出折线图为图片
01-23
接着，"Echarts折线图"部分则涵盖了如何使用Echarts库创建动态、交互式的折线图。Echarts提供了一系列参数供开发者配置，如`series`定义数据序列，`xAxis`和`yAxis`定义坐标轴，`tooltip`定义提示框等。通过灵活调整...
uni-app封装echarts折线图，安卓真机测试可以使用
02-09
1. 创建一个uni-app的Vue组件，例如`EchartsLine.vue`，用于封装ECharts折线图。 2. 在组件中引入ECharts的JS库，并配置好需要的图表选项。 3. 使用uni-app的`uni.createSelectorQuery()`方法获取canvas元素，这是...
Echarts折线图的30个配置项，折线图原来可以更美丽。
贝格前端工场的博客
04-17 654
Hi，大家好，我是贝格前端工场，echarts图表的配置项目非常多，如果能够掌握呢？
Echarts可视化教程（三）——折线图的绘制
fh8uuc的博客
10-21 6729
阶梯图是一种比较特殊的折线图，阶梯图使用间歇型跳跃的方式显示一种无规律的数据的变化。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码，这段代码由上面的堆积折线图示例代码修改而来，你需要补充完这段代码，实现将所有的四条折线都改成阶梯图：其中地铁。同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。中折线图的绘制，包括标准折线图、堆积折线图等。
Echarts各类图表常用配置项说明，附示例代码
最新发布
共同学习，共同成长
06-20 1380
​大家好，我是前端菜鸟的自我修养！今天给大家分享【Echarts各类图表常用配置项说明 】，并提供具体代码帮助大家深入理解，彻底掌握！
Vue | 使用 ECharts 绘制折线图
狂放不羁霸的博客
03-16 3551
一、安装和引入 ECharts 二、使用 ECharts 2.1 新增 div 盒子 2.2 编写画图函数 2.3 完整代码结构 三、各种小问题 3.1 函数调用问题 3.2 数据格式问题 3.3 坐标轴标签问题 3.4 间隔显示标签
前端echarts词云图完整demo，+配置参数详解
03-25
前端echarts词云图完整demo，+配置参数详解
Echarts---折线图配置
fankse的博客
07-31 403
var optionTutorTable = { title: { text: '教师实时课时数据统计折线图' }, tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '.
ECharts 折线图常用配置
yezi_12345的博客
03-31 1851
折线图
玩转ECharts制作图表之折线图
wenqi
11-11 3814
折线图适合二维的大数据集，尤其是那些趋势比单个数据点更重要的场合 markArea //标注空间 (xAxis的值要与xdata值中取出) markArea: { data: [ [{ xAxis: '1月' }, { xAxi.
Echarts折线图曲线图和三维图
qq_36982349的博客
03-04 7019
1 折线图 鼠标放在点上时显示的数据效果，在代码中用到的就是tooltip这个参数，其中show的默认值是true，可以省略，当我们不想显示悬浮提示效果，将show修改为false。trigger设置这个参数，效果是可以看到一个竖直的虚线，不添加则不显示。backgroundColor效果是显示数据的弹窗对应的背景色，需要什么颜色自行设置。extraCssText可以设置弹窗显示的阴影效果。 配置项的全部代码 options: {    title:&n
ECharts的基本配置-Y轴配置（yAxis）
Dreadom的博客
01-30 1578
【代码】ECharts的基本配置-Y轴配置（yAxis）
echarts设置阴影、折线条样式、圆点大小
weixin_44089126的博客
05-23 4358
echarts设置阴影、折线条样式、圆点大小
echarts 双折线图 实现 与虚线
05-15
echarts 双折线图 实现 与虚线
在vue中使用echarts(折线图的demo,markline用法)
10-15
在`mounted`生命周期钩子中，我们初始化ECharts图表，调用`this.$echarts.init()`方法创建图表实例，然后使用`setOption()`方法设置配置。 在`markLine`中，你可以根据需求配置不同类型的数据，如平均值、最大值、...
带时间轴的指标监控柱状图
09-20 1286
function getData(percent) { return [{ value: percent, name: percent, }, { value: 1 - percent, label: { show: false }, labelLine: { normal: { show: false }...
echarts 折线图
weixin_43931625的博客
10-31 3621
echarts 折线图
1.ECharts柱状图(横向+双Y轴)-部分配置项
weixin_46917162的博客
08-21 3317
1.横向柱状图+自定义提示信息 1.1效果图: 2.option的配置: var option1 = { //提示框，默认显示 tooltip: { trigger: 'axis', axisPointer: {// 坐标轴指示器，坐标轴触发有效 type: 'shadow'// 默认为直线，可选为：'..
echart折线图例配置，折点配置、最高值最低值设置
qq_47629187的博客
05-29 492
现在的大屏要求的折线图是不是越来越花里胡哨了，最近我做大屏项目的时候又遇到了这中图，既然用到这么频繁那就分享给大家。如下图：图例和折线图折点要求这样，用到了图例的一些配置属性那他转化成icon，还有symbolSize（图片大小），symbol（图片）这两个配置属性控制折点的样式，相关代码如下注：需要吧图片转成base64的格式。
echarts折线图完整代码
03-31
以下是一个简单的echarts折线图的完整代码示例： HTML： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 折线图示例</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> </head> <body> <!-- 用于显示折线图的 DOM 容器 --> <div id="chart" style="width: 600px; height: 400px;"></div> <!-- JS 代码 --> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { // 图表标题 title: { text: 'ECharts 折线图示例' }, // 图表提示框 tooltip: {}, // 图例 legend: { data:['销量'] }, // x轴 xAxis: { data: ['周一','周二','周三','周四','周五','周六','周日'] }, // y轴 yAxis: {}, // 数据 series: [{ name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20, 5] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在上述代码中，我们首先在HTML文件中引入了ECharts库，然后定义了一个DIV容器用于显示折线图。接着，在JavaScript代码中，我们初始化了一个ECharts实例，并配置了折线图的各项属性，包括标题、提示框、图例、x轴、y轴和数据。最后，我们使用`setOption`方法将配置项和数据渲染到图表中。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林太白

感谢打赏，你拥有了我VIP权限

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值