使用EXCEL绘制
折线图
,为了表现两条折线的差经常会需要将两条折线之间的面积填充颜色,那么怎么实现这一效果呢?
直接使用折线图,没有办法实现这一功能,但是通过面积图,只要稍微做些设置,就可以实现这一效果,如下举例说明:
如下数据,先对其增加辅助列(两列数据之差):
选中第一列数据和辅助数列,插入堆积面积图。
选中下面的面积图,填充为无色。
右击图表,选则源数据,将第二列数据(乙列)添加到图表中。
右击图表,点击【更改系列图表格式】,在组合中将新添加的系列设置为折线图
点击新添加的折线图,可以更改颜色和宽度,折线图交叉阴影完成
如何用Echarts制作标准折线图我们经常使用Echarts制作各种图表,那么如何运用Echarts制作标准折线图呢?下面我给大家演示一下。
01
首先打开SublimeText软件,新建一个HTML文档,并在文档中添加如下图所示的HTML结构
02
接下来运用scripts标签在HTML中引入echarts的库文件,如下图所示
03
然后我们在body标签中创建一个div区域用来存放折线图,如下图所示,注意给div设置高度
04
接下来我们通过echarts的init方法对刚才创建的div区域进行初始化,如下图所示
05
然后我们设置折线图的参数,包括X,Y坐标轴数据,折线图标题等信息,如下图所示
06
接下来在series参数中设置折线图所需要的数据,如下图所示,一条折线配置一个大括号
07
参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域,如下图所示
08
最后我们运行HTML文件,就可以看到如下图所示的标准折线图了,点击顶部的折线标题可以隐藏或者显示折线
Vue-ele中echart折线图动态展示和修改<LineChart:reportsList="reportsList"_-if="(reportsList).length"/>
data(){
return{
reportsList:{},
};
},
created(){
reportsGet("reports/type/1").then((res)=>{
(res);
let{meta,data}=;
if(==200){
=data;
}else{
this.$();
}
});
},
data(){
return{
lineList:{},
};
},
props:{
reportsList:{
type:Object,
default:()=>{
return{
title:{
text:"折线图",
},
tooltip:{},
xAxis:{
axisLabel:{interval:0,rotate:0,margin:15},
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
},
yAxis:{},
series:[
{
name:"销量",
type:"line",
data:[5,20,36,10,10,20],
},
],
};
},
},
},
mounted(){
varmyChart=(this.$);
=(());
={
text:"折线图",
};
/*给折线图设置上下左右的距离*/
='10%';
[0].axisLabel=
{interval:0,rotate:30,margin:15};
={
top:"30%",
width:"80%",
height:"50%",
left:"20%",
};
/*把折线图所属区域删掉*/
(r=>{
deleter.areaStyle;
r.smooth=true
})
();
=myChart;
},
};