工业设计大学排名,保定网站seo技术,厦门 网站制作,海口网站开发找千素网❤echarts折线图完整使用及详细配置参数 进入echarts官网 查看案例#xff0c;下面说说一些echarts图的调节 一、配置echarts具体参数 01 基础版本的折线图 option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data…❤echarts折线图完整使用及详细配置参数 进入echarts官网 查看案例下面说说一些echarts图的调节 一、配置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}]
};【1】当echarts折线图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 则锁定选择区域的大小也就是说只能平移不能缩放。}],【2】想要让折线图平滑 smooth 决定了线段的类型直线或者曲线层级与series下的data平级
smooth: true// true为平滑线段 false为折线默认为false【3】想让你的echarts折线图变成面积图 areaStyle: {} 决定了你的图形是否是面积图 层级与series下的data平级 areaStyle: {} 【4】y轴顶部标题 title 可以帮助我们实现 echarts y轴顶部的标题层级与xAxis平级
title: { text: Stacked Line },【5】更改鼠标移动上去的效果 tooltip 可以帮助我们实现 echarts 鼠标悬浮上去的效果层级与xAxis平级
tooltip: { trigger: axis},【6】调整折线图的边距和位置 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%, },
【7】 x轴设置间隔个数显示
xAxis这个属性
axisLabel:{ interval:间隔数量 }二、效果源码
以下折线图直接复制到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]}]};三、完整使用案例
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: { //距离各个地方的边距 1left: 10%,right: 5%,bottom: 10%,containLabel: true},
grid: { //另外一种方式控制 2x: 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]}]});
