1. 简单的立体柱形图 实现方式
const dataList =
[
{ name: '周一', value: '120' },
{ name: '周二', value: '200' },
{ name: '周三', value: '150' },
{ name: '周四', value: '80' },
{ name: '周五', value: '70' },
{ name: '周六', value: '110' },
{ name: '周天', value: '130' },
]
option = {
xAxis: {
type: 'category',
data: dataList.map(item => item.name),
axisLabel: {
margin: 20
}
},
yAxis: {
type: 'value'
},
series: [
{
// /数据图
data: dataList.map(item => item.value),
type: 'bar',
barWidth: 40,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#3398BC' },
{ offset: 1, color: '#3C7AB9' }
])
},
z: 1,
},
{
// 最上面菱形
data: dataList.map(item => item.value),
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'end',
symbolOffset: ['', '-50%'],
itemStyle: {
color: new echarts.graphic.LinearGradient(0,0,1,0,[
{ offset: 0, color: '#3391BC' },
{ offset: 1, color: '#3C71B9' }
])
},
z: 2
},
{
// 最下面的菱形
data: dataList.map(item => item.value),
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'start',
symbolOffset: ['', '50%'],
itemStyle: {
color: new echarts.graphic.LinearGradient(1,0,0,0,[
{ offset: 0, color: '#3391BC' },
{ offset: 1, color: '#3C71B9' }
])
},
z: 2
}
]
};
2. 利用两条数据图设置不同颜色让柱子更加立体
这种主要是在方式一种 多生成一个柱形数据 利用
series
中的barGap属性 把两个柱形图的间距改成0,可使两个柱形图并排显示设置不同颜色让立体效果更加明显
注意:barGap是通用的,无论设置多少次 还是会以最后一个为主
const dataList =
[
{ name: '周一', value: '120' },
{ name: '周二', value: '200' },
{ name: '周三', value: '150' },
{ name: '周四', value: '80' },
{ name: '周五', value: '70' },
{ name: '周六', value: '110' },
{ name: '周天', value: '130' },
]
option = {
xAxis: {
type: 'category',
data: dataList.map(item => item.name),
axisLabel: {
margin: 20
}
},
yAxis: {
type: 'value'
},
series: [
{
// /数据图
data: dataList.map(item => item.value),
type: 'bar',
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#3C7AB9' },
{ offset: 1, color: '#3398BC' }
])
},
z: 1,
},
{
// /数据图
data: dataList.map(item => item.value),
type: 'bar',
barGap: 0,
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#4DACFF' },
{ offset: 1, color: '#44D9FC' }
])
},
z: 1,
},
{
// 最上面菱形
data: dataList.map(item => item.value),
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'end',
symbolOffset: ['', '-50%'],
itemStyle: {
color:'#44D5FC'
},
z: 2
},
{
// 最下面菱形
data: dataList.map(item => item.value),
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'start',
symbolOffset: ['', '50%'],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#3C7AB9' },
{ offset: 0.5, color: '#3C7AB9' },
{ offset: 0.51, color: '#4DACFF' },
{ offset: 1, color: '#4DACFF' }
])
},
z: 1
},
]
};
3. 含背景的立体柱形图
这种主要是在图二基础上再加一个数据图 数据图需要重叠,就需要把
barGap
属性设置成“-100%”让所有图形全重叠。把方式二中一个图形设置成最宽 也就是我这儿的barWidth: 40
,另一个设置成40的一半并且 把z的层级变高这样就会形成小图在上大图在下。再在这个基础上添加一个数据图,数据都为最大,宽度也设置为40;顶部菱形也同理。
const dataList =
[
{ name: '周一', value: '120' },
{ name: '周二', value: '200' },
{ name: '周三', value: '150' },
{ name: '周四', value: '80' },
{ name: '周五', value: '70' },
{ name: '周六', value: '110' },
{ name: '周天', value: '130' },
]
let max = dataList.map(item => item).sort((a,b) => b.value - a.value)[0]
let dataMaxList = new Array(dataList.length).fill(max)
option = {
xAxis: {
type: 'category',
data: dataList.map(item => item.name),
axisLabel: {
margin: 20
}
},
yAxis: {
type: 'value'
},
series: [
{
// /数据图
data: dataList.map(item => item.value),
type: 'bar',
barGap: '-100%',
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#3C7AB9' },
{ offset: 1, color: '#3398BC' }
])
},
z: 2,
},
{
// /数据图
data: dataList.map(item => item.value),
type: 'bar',
barWidth: 40,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#4DACFF' },
{ offset: 1, color: '#44D9FC' }
])
},
z: 1,
},
{
// 最上面菱形
data: dataList.map(item => item.value),
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'end',
symbolOffset: ['', '-50%'],
itemStyle: {
color:'#44D5FC'
},
z: 3
},
{
// 最下面菱形
data: dataList.map(item => item.value),
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'start',
symbolOffset: ['', '50%'],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#3C7AB9' },
{ offset: 0.5, color: '#3C7AB9' },
{ offset: 0.51, color: '#4DACFF' },
{ offset: 1, color: '#4DACFF' }
])
},
z: 1
},
{
// 背景图数据图
data: dataMaxList,
type: 'bar',
barWidth: 40,
itemStyle: {
color: "rgba(77, 172, 255, 0.2)"
},
z: 0,
},
{
// 背景图最上面菱形
data: dataMaxList,
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'end',
symbolOffset: ['', '-50%'],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: 'rgba(77, 172, 255, 0.1)' },
{ offset: 1, color: 'rgba(77, 172, 255, 0.2)' }
])
},
z: 3
},
]
};
4. 补充 柱形图上面显示数据
{
// 最上面菱形
data: dataList.map(item => item.value),
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'end',
symbolOffset: ['', '-50%'],
// 添加的属性。
label: {
show: true,
position: 'top',
color: '#f00'
},
itemStyle: {
color:'#44D5FC'
},
z: 3
},
5. 补充 柱形图中数据带负值的 需要单独处理
const dataList =
[
{ name: '周一', value: '-120' },
{ name: '周二', value: '200' },
{ name: '周三', value: '150' },
{ name: '周四', value: '80' },
{ name: '周五', value: '70' },
{ name: '周六', value: '110' },
{ name: '周天', value: '130' },
]
option = {
xAxis: {
type: 'category',
data: dataList.map(item => item.name),
axisLabel: {
margin: 20
}
},
yAxis: {
type: 'value'
},
series: [
{
// /数据图
data: dataList.map(item => item.value),
type: 'bar',
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#3C7AB9' },
{ offset: 1, color: '#3398BC' }
])
},
z: 1,
},
{
// /数据图
data: dataList.map(item => item.value),
type: 'bar',
barGap: 0,
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#4DACFF' },
{ offset: 1, color: '#44D9FC' }
])
},
z: 1,
},
{
// 最上面菱形
data: dataList.map(item => {
return {
value: item.value,
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'end',
symbolOffset: item.value>=0? ['', '-50%']:['', '50%'],
itemStyle: {
color: item.value>=0?'#44D5FC':new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#3C7AB9' },
{ offset: 0.5, color: '#3C7AB9' },
{ offset: 0.5, color: '#4DACFF' },
{ offset: 1, color: '#4DACFF' }
])
},
}
}),
type: 'pictorialBar',
z: 2,
},
{
// 最下面菱形
data: dataList.map(item => {
return {
value: item.value,
symbol: 'diamond',
symbolSize: ['40', '30'],
symbolPosition: 'start',
symbolOffset:item.value>=0? ['', '50%']:['', '-50%'],
itemStyle: {
color: item.value>=0?new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#3C7AB9' },
{ offset: 0.5, color: '#3C7AB9' },
{ offset: 0.5, color: '#4DACFF' },
{ offset: 1, color: '#4DACFF' }
]):'#44D5FC'
},
}
}),
type: 'pictorialBar',
z: 2
},
]
};
原文地址:https://blog.csdn.net/qq_35438952/article/details/129744355
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_27694.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。