ECharts多折线图——自定义悬浮提示框内容、自定义折线图线条颜色、自定义y轴单位、气泡单位,轴线颜色、图表网格容器大小
1、自定义tooltip悬浮提示框内容(数据处理后加单位),需要在tooltip配置项的formatter使用回调函数的形式参数详解:https://echarts.baidu.com/option.html#legend.formatter2、自定义折线图线条颜色,直接在color配置项数组中写自己喜欢的颜色,在线条绘制的时候就会在数组中自动选择。具体如下配置:option = {...
·
如图效果:
1、自定义tooltip悬浮提示框内容(数据处理后加单位),需要在tooltip
配置项的formatter
使用回调函数的形式
参数详解:https://echarts.baidu.com/option.html#legend.formatter
2、自定义折线图线条颜色,直接在color
配置项数组中写自己喜欢的颜色,在线条绘制的时候就会在数组中自动选择。
3、自定义y轴单位和线条颜色,在yAxis
中配置
4、自定义气泡单位,在series
对应数据项的markPoint
中设置
5、自定义网格容器大小,在grid
中设置
具体如下配置:
option = {
title: {
text: '自定义echarts样式'
},
tooltip : {
trigger: 'axis',
// axisPointer: { // 横坐标指示器
// type: 'cross',
// label: {
// backgroundColor: '#6a7985'
// }
// },
// 自定义悬浮提示框内容(数据处理后加单位)
formatter (params) { // params的个数等于折线的条数(对多条折线数据进行加单位,就需要遍历)
var relVal = params[0].name
for (var i = 0, l = params.length; i < l; i++) {
// circle变量是在数据前画一个对应颜色的圆形
let circle = `<i class="iconfont icon-yuan" style="margin-right:4px;font-size:14px;color:${params[i].color}">o</i>`
if (params[i].value / 1000000 >= 1.0) {
params[i].value = params[i].value / 1000000
params[i].value = params[i].value.toFixed(2)
relVal += '<br/>' + circle + params[i].seriesName + ' : ' + params[i].value + 'Gbps'
}else if (params[i].value / 1000 >= 1.0) {
params[i].value = params[i].value / 1000
params[i].value = params[i].value.toFixed(2)
relVal += '<br/>' + circle + params[i].seriesName + ' : ' + params[i].value + 'Mbps'
} else {
params[i].value = params[i].value.toFixed(2)
relVal += '<br/>' + circle + params[i].seriesName + ' : ' + params[i].value + 'Kbps'
}
}
return relVal
}
},
grid:{ // 直角坐标系内绘图网格,网格大小影响画图的大小(想铺满整个容器就全设置为0,但是注意这样会有些看不见了)
left:'10%',
// top:0,
right:'2%',
bottom:40
},
// 自定义线条颜色,所描绘的线条会在这里选颜色渲染
color: ['#409EFF', '#67C23A'],
legend: {
data:['带宽','HTTPS带宽']
},
toolbox: {
feature: { // 各工具配置项:下载,刷新,图表转化等图标功能
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
xAxis : [
{
type : 'category',
boundaryGap : false, // 坐标轴两边留白策略
data : ['周一','周二','周三','周四','周五','周六','周日'],
//设置x轴线的属性
axisLine:{
lineStyle:{
color:'#409EFF'
}
}
}
],
yAxis : [
{
// type : 'value'
//设置y轴线的属性
axisLine:{
lineStyle:{
color:'#67C23A'
}
},
splitLine :{ // 设置网格线
lineStyle:{
type:'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show:true //隐藏或显示
},
axisLabel:{
formatter: (value) => { // 自定义y轴的单位
if (value / 1000000 >= 1.0) {
value = value / 1000000
value = value.toFixed(1)
return value + 'Gbps'
}else if (value / 1000 >= 1.0) {
value = value / 1000
value = value.toFixed(1)
return value + 'Mbps'
} else {
value = value
return value + 'Kbps'
}
}
}
}
],
series : [
{
name:'带宽',
type:'line',
smooth: true, // 是否平滑曲线显示
data:[200.5, 300.20, 1200.02, 100.85, 189.02, 256.206, 345.96],
markPoint: { // 最大、最小值气泡
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
],
label: { // 最大最小值标注上的自定义单位
formatter (params) {
let relVal = ''
if (params.value / 1000000 >= 1.0) {
params.value = params.value / 1000000
params.value = params.value.toFixed(2)
relVal = params.value + 'Gbps'
}else if (params.value / 1000 >= 1.0) {
params.value = params.value / 1000
params.value = params.value.toFixed(2)
relVal = params.value + 'Mbps'
} else {
params.value = params.value.toFixed(2)
relVal = params.value + 'Kbps'
}
return relVal
}
}
}
},
{
name:'HTTPS带宽',
type:'line',
smooth: true,
data:[196.5, 500.40, 600.02, 210.25, 310.02, 156.103, 700.526]
}
]
}
更多推荐
已为社区贡献3条内容
所有评论(0)