Echarts定制-立体圆柱
Echarts定制- 立体圆柱
一、基础学习
B站有超详细的基础教学视频，这里我推荐
黑马程序员pink老师[https://www.bilibili.com/video/BV1v7411R7mp]
非常的详细，风格幽默
charts社区[https://www.makeapie.com/explore.html]
这里有超多的炫酷效果
二、 立体圆柱
let data1 = ['游戏', '金融', '电商', '教育', '旅游'];
let data2 = [120, 160, 150, 80, 70];
let barTopColor = ["#02c3f1", "#ffe000", "#9a7fd1", "#06fdbc", "#006ced"];
let barBottomColor = ["rgba(2,195,241,0.1)", "rgba(83, 229, 104, 0.1)", "rgba(161, 84, 233, 0.1)", "rgba(83, 229, 104, 0.1)", "rgba(161, 84, 233, 0.1)"];
option = {
backgroundColor: '#0A2E5D',
//设置网格布局，影响图形位置top bottom left right (上下左右)
grid: {
top: 10,
left: 20,
right: 10,
bottom: 100,
},
xAxis: {
data: data1,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
margin: 18
},
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
data: data2,
name: '柱顶部',
type: 'pictorialBar', //指定类型
//symbol标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond','pin','arrow', 'none'
//默认为圆形
symbolSize: [16, 5], //指定大小，[宽,高]
symbolOffset: [0, -3], //位置偏移 [右，下] 负数反方向
z: 12,
itemStyle: {
normal: {
color: function(params) {
return barTopColor[params.dataIndex];
}
}
},
label: {
show: true,
position: 'top',
fontSize: 10
},
symbolPosition: 'end'
},
{
type: 'pictorialBar',
symbolSize: [16, 5],
symbolOffset: [0, 5],
z: 12,
itemStyle: {
normal: {
color: function(params) {
return barTopColor[params.dataIndex];
}
}
},
data: data2
},
{
name: '第一圈',
type: 'pictorialBar',
symbolSize: [20, 8],
symbolOffset: [0, 11],
z: 11,
itemStyle: {
normal: {
//transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
//将整个圆颜色设置为全透明黑色相当于把圆隐藏，然后只留下边框，变成一个环
color: 'transparent',
borderColor: '#3ACDC5',
borderWidth: 2
}
},
data: data2
},
{
name: '第二圈',
type: 'pictorialBar',
symbolSize: [32, 16],
symbolOffset: [0, 17],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: barTopColor[0],
borderWidth: 2
}
},
data: data2
},
{
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
//使用echarts内置的渐变色生成器echarts.graphic.LinearGradient
// //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位.
//而0 0 0 1则代表渐变色从正上方开始
return new echarts.graphic.LinearGradient(
0, 0, 0, 1,
//数组, 用于配置颜色的渐变过程. 每一项为一个对象,
//包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
[{
offset: 0,
color: barTopColor[params.dataIndex]
},
{
offset: 1,
color: barBottomColor[params.dataIndex]
}
]
);
},
opacity: 0.8
}
},
z: 16,
silent: true,
barWidth: 16,
barGap: '-100%', // Make series be overlap
data: data2
}
]
};