❤echarts折线图完整使用及详细配置参数 |
您所在的位置：网站首页 › 网络画板制作折线图怎么做 › ❤echarts折线图完整使用及详细配置参数 |
❤echarts折线图完整使用及详细配置参数
|
❤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}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）实现基础版本的折线图以及预览 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这个属性
🍎 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 } } ] },
🍎 title 可以帮助我们实现 echarts y轴顶部的标题，层级与xAxis平级 title: { text: 'Stacked Line' }, （2） 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轴内容文字颜色 } }, },
🍎 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} 检测趋势：{c}', }, （1）{a}：系列名，series.name。 （2）{b}：数据名，xAxis.data。 （3）{c}：数据值，yAxis.data。 （5）{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。 （6）{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。 ———————————————— 换行添加多个属性 formatter:"{b0}:{c0}{b1}:{c1}" 自定义格式 formatter(params) { return ` ${params[0].name} ${params[0].value}% `; }, 自定义提示数据的类型 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、图表动画
‘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: '最小值' } // 添加最小值的标记点 ] } }]
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 则锁定选择区域的大小，也就是说，只能平移，不能缩放。 }],
以下折线图直接复制到echarts官网可以直接使用： 【折线图效果1】
【折线图源码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】
【折线图源码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轴刻度的值跟实际值不对应：
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 更多相关源码已经放进个人开源项目中：评论获取地址 |
代码：
代码配置如下：
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |