需求,直接上设计图:
进入echats官网:
https://www.echartsjs.com/zh/index.html
找到官方实例:
随机选择一个顺眼的折线图:
进入后,开始改造。左边修改代码,右边则能够看到表现。
首先我们去除图中的区域填充效果,方便观察效果:删除掉左侧代码中的series.areaStyle:
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
/*areaStyle: {}删除掉这一行*/
}]
效果:
然后我们修改x、y轴上文字颜色和轴线、刻度线、网格线的显示效果,首先科普一下什么是轴线、刻度线、网格线。
轴线:即x轴和y轴。如下图
刻度线,就是轴线上用于标识刻度的线如下图:
网格线即刻度线的延长线,如下图:
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7'],
"splitLine": { //网格线:显示
"show": true
},
"axisLine": { //轴线:隐藏
"show": false
},
"axisTick": { //刻度线:隐藏
"show": false
}
},
yAxis: {
type: 'value',
"splitLine": { //网格线:隐藏
"show": false
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#5386C6'//y轴文字颜色
}
},
"axisLine": { //轴线:隐藏
"show": false
},
"axisTick": { //刻度线:隐藏
"show": false,
},
},
修改后效果如下:
然后我们来修改拐点样式和折线图线条的样式:
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbolSize: 5,//拐点的大小
smooth: true,//折线平滑化
lineStyle: {
normal: {
color: '#46CD8E'//折线颜色
}
},
itemStyle: {
normal: {
borderColor: '#46CD8E',//拐点正常情况的颜色
opacity: 0//正常情况下,不显示拐点
},
emphasis: {//选中情况下拐点的颜色
borderWidth: 3,
opacity: 1,
backgroundColor:'#fff'
}
},
}]
效果如下:
然后我们来把渐变色的填充效果加上:
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(70, 205, 142, 0.5)'
},{
offset: 1,
color: 'rgba(225,225,225,0)'
}])
}
}
最后来做弹出的提示气泡:
tooltip: {
trigger: 'axis',//触发方式
axisPointer:{
z:0//触发轴层级:默认时层级很高,会遮挡住拐点
},
formatter: function (params) {//提示框自定义
return formatterTip(params);
},
backgroundColor: 'rgba(255,255,255,0)',//默认有一个背景色,手动将背景色设置透明,只显示我们写入的样式
},
function formatterTip(params) {
//移除重复的数据
for (var i = 0; i < params.length; i++) {
for (var j = params.length - 1; j > i; j--) {
if (params[j].data == params[i].data) {
params.splice(j, 1);
break;
}
}
}
var tip = '';
for (var i = 0; i < params.length; i++) {//这里是自己定义样式, params[i].marker 表示是否显示左边的那个小圆圈
if (params[i].value != 0) {
tip = tip+'<div class="msg">'+'<p class="txt" >'+' 当日访问量'+'</p ><p class="num">'+params[i].value+'</p></div >';//html代码片段
}
}
return tip;
}
.dsjfx .cont .card .fwl .msg{
background: url(../images/Bg-line-hover.png) no-repeat;
width: 88px;
height: 48px;
}
.dsjfx .cont .card .fwl .msg .txt{
padding-top: 5px;
font-size: 13px;
line-height: 13px;
color: #333;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.dsjfx .cont .card .fwl .msg .num{
padding-top: 4px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #46CD8E;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
最后上一个最终的效果: