echarts折现图的配置

Echarts折线图的配置

（1）去掉折线图的边框线及其加入阴影效果

lineStyle: {normal: {type: 'solid',/*color:"#28a5fc",*/color:"red",opacity :"0.5"}}

如下图所示：

（2）设置移动折线图的 “上下左右” 的位置

代码片段：

grid:{x:40,y:20,x2:20,y2:60,show:true,  //表示开启borderColor:"#e4e4e4",//折线图的边宽颜色shadowBlur:50,containLabel:50,}

（3）设置折线图的 “x轴的、y轴” 数值区域

{type: 'value',max: 80,//区域最大值，同时还可设置[0,'100%']，来自适应最大值interval:20,//每隔区域20axisLabel:{textStyle:{color:"#a7aab3"//x轴，y轴的数字颜色，如图1}},axisLine:{//x轴、y轴的深色轴线，如图2show: true,lineStyle:{color:"red",}},axisTick:{//图3所示show: false,}
}

图1：

图2：

图3：

（4）网格边框线（y轴内绘边框线）

splitLine: {//终于找到了，背景图的内置表格中“边框”的颜色线条  这个是x跟y轴轴的线      show: true,  lineStyle:{color:"#e4e4e4",    type:"solid"}
}

效果图：

最后效果代码附上：

option = {
tooltip : {trigger: 'axis'
},
title: {x: 'center',text: '',
}
,legend: {top: 'bottom',data:['意向'],
},grid:{x:10,y:20,x2:30,y2:20,show:true,borderColor:"#e4e4e4",//网格边框线shadowColor:"#e4e4e4",borderWidth:"0.2",containLabel:true,
},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},restore: {show: true},saveAsImage: {show: true}}
},xAxis: [{type: 'category',splitNumber:6,boundaryGap: false,data: date,axisLabel:{textStyle:{color:"#a7aab3"}
},axisLine:{//x轴的横坐标边框线show: false},axisTick:{show: false,},axisLabel:{show:true,textStyle:{fontSize:"8px",color:"#a7aab3",align:"center"},formatter:function(e){return e;}},splitLine: {//终于找到了，背景图的内置表格中“边框”的颜色线条  这个是x轴的竖线show: true,
lineStyle:{
color:"#e4e4e4",
type:"solid"}}
}
],yAxis: [
{type: 'value',max: yAxisMax,splitNumber:5,interval:interval,axisLabel:{textStyle:{color:"#a7aab3"},},axisLine:{show: true,lineStyle:{color:"#e4e4e4"}},axisTick:{show: false,},axisLabel:{show:true,textStyle:{fontSize:"8px",color:"#a7aab3"}},splitLine: {//终于找到了，背景图的内置表格中“边框”的颜色线条   这个是y轴的横线show: true,lineStyle:{color:"#e4e4e4",type:"solid",}}}],dataZoom: {type: 'inside',start: 23,end: 100,},lineStyle: {normal: {type: 'solid',color:"#28a5fc",opacity :"0.5"}
},
backgroundColor:"#FFFFFF",//背景颜色
borderWidth:0.1,
series: [{name:'成交', type:'line',/*smooth:true,//表示折线图的气泡smooth:true,不显示，false显示 symbol: 'none'symbol: 'none',*/stack: 'a',show :false,lineStyle:{//折线的颜色normal: {color:"#1ba0fc",width:1.5,//shadowBlur:80},},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(40, 182, 252, 0.85)'}, {offset: 1,color: 'rgba(28, 159, 255, 0.2)'}])}},itemStyle:{normal:{color:"#e4e4e4",barBorderColor:"#e4e4e4",}},data: data}]
};

（7）文案与轴线的距离

xAxis: [{axisLabel: {textStyle: {color: "#a7aab3",fontSize: "18",},margin: 16,//刻度标签与轴线之间的距离。}}],

（8）文案与轴线的距离

markPoint: {symbolSize:60,//标记的大小label:{normal:{textStyle:{fontSize: 19,//文字的大小}}}
}

http://www.cnblogs.com/zhaoyingjie/p/5963056.html（动态数据的调取）

echarts折现图的配置相关推荐

echarts折现图柱状图饼图资料大全整理
line(折线图) line: { name: ...,//折现名称 coordinateSystem: 'cartesian2d', // 坐标系 xAxisIndex: 0, yAx ...
echarts 折现图和柱状图样式修改设置折线样式背景（文末附带完整代码）
1.设置折线图样式(修改后)(背景竖条纹间隔,去掉边框,设置折线和节点颜色,设置数据字体颜色) 设置折线样式: 设置折线图的背景样式: 2.设置柱状图样式(修改后) 设置柱子的样式设置柱状图背景完 ...
vue项目中使用 Echarts的一些总结，包括饼图，折现图，折柱混图，年月日切换
先奉上官网地址,一切以官网为主 Echrts官网 Echarts的基本使用安装 cnpm i echarts -S 全局使用在main.js中引入,然后用变量,将其挂载到vue的原型上 impor ...
关于echarts如何在折现图上展示异常点位
echarts展示异常点位主要用到的markPoint // 为了重复绘图添加定位点位let markPointData=[]if(model.data[0].errorCount&& ...
vue中使用echarts折现图表（多图表与定时递归刷新图表解决方案在附录1、2中）
1.首先在main.js中引入依赖,并挂载到原型链上: import * as echarts from 'echarts' Vue.prototype.$echarts = echarts; 2.创 ...
python简单的绘制折现图
在做一些数据统计时,折现图能够看出变化的趋势,最近查内存泄漏,跑了一个晚上的数据,想查查,那么折现图能够给一个很直观的结果. 我们使用pylab包来绘制图形. 我使用pip来管理python包 sud ...
matlab中的折现图
列表造折现图 x=1:1:5;%x轴上的数据,第一个值代表数据开始,第二个值代表间隔,第三个值代表终止a=[203.024,113.857,256.259,244.888,293.376]; %a数据 ...
echarts折现变曲线_echarts将折线图改为曲线图
[开源ORM] SqliteSugar 3.x .net Core版本成功上线 SqliteSqlSugar 3.X API 作为支持.NET CORE 为数不多的ORM之一,除了具有优越的性能外,还 ...
vue中使用echart绘制柱状图、折现图、饼状图
echarts有几个主要的字段,title.legend.xAxis. yAxis.tooltip.series. title 图表的标题 legend 用来标志图表数据,data字段的数组需要对应每 ...

echarts折现图的配置

Echarts折线图的配置

（1）去掉折线图的边框线及其加入阴影效果

（2）设置移动折线图的 “上下左右” 的位置

（3）设置折线图的 “x轴的、y轴” 数值区域

（4）网格边框线（y轴内绘边框线）

最后效果代码附上：

（7）文案与轴线的距离

（8）文案与轴线的距离

echarts折现图的配置相关推荐

最新文章

热门文章