首页 前端知识 echarts 图表 去掉x轴y轴

echarts 图表 去掉x轴y轴

2024-03-17 00:03:40 前端知识 前端哥 912 809 我要收藏
option_column: {
color: ['#9D509F'],
grid: {
left: '0',
right: '0',
bottom: '0',
top: '0',
// grid 区域是否包含坐标轴的刻度标签
containLabel: false
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
show: true
}
],
yAxis: [
{
show: false,
axisLine:{
show:false
},
axisTick:{
show:false
},
splitLine:{
show:false
}
}
],
series: [
{
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: '#9D509F'
},
emphasis: {
focus: 'series'
},
data: [140, 232, 101, 264, 90, 340, 250]
},
]
}
复制

在这里插入图片描述

option_column: {
grid: {
left: '0',
right: '0',
bottom: '0',
top: '0',
// grid 区域是否包含坐标轴的刻度标签
containLabel: false
},
xAxis: {
show: false,
type: 'category',
data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14']
},
yAxis: {
show: false,
type: 'value'
},
series: [
{
itemStyle: {
color: '#2D8BD2'
},
data: [120, 160, 150, 80, 70, 110, 130,200,300,250,120,50,180,30],
type: 'bar',
// 柱状图宽度
// barWidth: 10
}
]
}
复制

在这里插入图片描述

option_column: {
grid: {
left: '0',
right: '0',
bottom: '0',
top: '0',
containLabel: false
},
xAxis: {
show: false,
type: 'value',
boundaryGap: false
},
yAxis: {
show: false,
type: 'category',
data: ['Brazil']
},
series: [
{
type: 'bar',
data: [18203],
stack: 'sear',
itemStyle: {
color: '#39C44A'
},
barWidth: 10
},
{
type: 'bar',
data: [6000],
stack: 'sear',
itemStyle: {
color: '#EEEEEE'
},
barWidth: 10
},
{
type: 'custom',
stack: '总量',
data: [100],
renderItem: (params, api) => {
const value = api.value(0)
const endPoint = api.coord([value, 0])
return {
type: 'group',
position: endPoint,
children: [{
type: 'path',
shape: {
d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
x: 310,
y: -20,
width: 10,
height: 10,
layout: 'cover'
},
style: {
fill: '#45c946'
}
}, {
type: 'path',
shape: {
d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
x: 310,
y: 10,
width: 10,
height: 10,
layout: 'cover'
},
style: {
fill: '#45c946'
}
}]
}
}
}
]
}
复制

在这里插入图片描述

需求 效果实现

在这里插入图片描述

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3914.html
标签
评论
发布的文章

jQuery事件绑定

2024-04-13 09:04:31

Jquery——基础

2024-04-03 12:04:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!