前言
今天要分享的是一个折线图,其包含的效果有以下几点:
- 线条下方区域颜色渐变填充
- tooltip提示框内容格式化
- 提示框线的修改
完整效果如下:
任务点
图表基础
我们可以基于上一文中的基础示例来进行改造,最终达到我们想要的效果。
对于基础示例不清楚的同学可以通过echarts分享(一):项目基础进行查看了解。
左上角文字
这里的文字效果可以用两种方式来做:坐标轴名称、图表title。
图表标题(title)
在echarts数据的title属性中进行修改。
- text title的文字内容
- textStyle title的文字样式设置
title: {
text: "产量(公斤/亩)",
textStyle: {
color: "#fff",
fontSize: 16,
fontWeight: 200,
},
}
坐标轴名称(name)
在echarts数据的yAxis属性中进行修改
- name 坐标轴名称的文字内容
- nameLocation 坐标轴名称显示位置:start/middle/end
- nameTextStyle 坐标轴名称的文字样式设置
yAxis:{
name:"产量(公斤/亩)",
nameLocation:"start",
nameTextStyle:{
color: "#fff",
fontSize: 16,
fontWeight: 200,
padding:[0,0,20,50] //调节显示位置(与y轴label对应关系) 上、右、下、左
}
}
图表显示位置(grid)
在图表组件中,图表与模块的边距关系是通过grid属性来设置的。
grid: {
top: "18%", // 图表距组件上边距离
right: "8%", // 图表距组件右边距离
bottom: "16%",// 图表距组件下边距离
left: "8%", // 图表距组件左边距离
},
数据留白(boundaryGap)
首个数据的值与y轴相交,是设置了boundaryGap属性。
- true 坐标轴两侧留白,不与y轴相交
- false 不留白,首个数据与y轴相交
xAxis:{
boundaryGap:false
}
轴线刻度(min/max/interval)
坐标轴的刻度(类型是数值)相关由min/max/interval三个属性控制。
- min 刻度最小值(如0)
- max 刻度最大值(如100)
- interval 刻度区间值(如10)
当不设置时,也会根据数值自动调节,但可能会不符合特定的要求,所以有时会需要设置。
坐标轴刻度线(splitLine)
图表中与y轴刻度对应的蓝色线条,是基于yAxis的splitLine属性修改的。
yAxis:{
splitLine: {
show: true,
lineStyle: {
color: "rgba(0,90,198,.2)",
width:3
},
},
}
区域填充(areaStyle)
曲线下的区域填充是在series配置项下的折线图(Line)内容中的areaStyle属性中设置的。
series: [
{
type: "line",
...
areaStyle: {
color:"#f00"
}
}
]
这只是普通填充效果,渐变颜色填充需要进行特定设置。
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0,0,0,1,
[
{
offset: 0,
color: "rgba(0, 174, 255, 1)",
},
{
offset: 1,
color: "rgba(0, 174, 255, 0.02)",
},
],false
),
}
- 前4个参数分别是x0,y0,x2,y2(范围0~1)相当于图形包围盒中的百分比。
- 最后一个参数是‘true’,则该四个值是绝对像素位置。
提示框(tooltip)
这里对于提示框的修改主要是几点:
- 背景色修改
- 无边框线
- 提示框指示线
- 提示框内容格式化
tooltip: {
trigger: "axis",
backgroundColor: "rgb(113,200,255, 0.28)",
borderWidth: 0,
textStyle: {
fontSize: 15,
color: "#fff",
},
axisPointer:{ // 提示框指示线
type:"line",
lineStyle:{
color:"#3371FC"
}
},
formatter(params) {
return `<div style="font-size:18px;">${params[0].axisValue}</div>
<div style="font-size:16px;margin-top:9px;">产量:${params[0].value}公斤/亩</div>`;
},
},
注意点:只有tooltip的内容格式化formatter函数中可以使用html标签,其他配置属性的formatter格式化中不可使用