const options = {
grid: {
top: "20%",
bottom: "12%",
},
tooltip: {},
xAxis: {
type: "category",
data: ["石头村", "石城村", "杨堡村","黑石城", "曜石城", "王堡村"],
axisLabel: {
fontSize: 10, // 设置字体大小
// x轴的文本颜色
textStyle: {
color: "#b5c6d6", // 就是颜色
},
margin:15// 顶部距离
},
axisTick: {
show: false,
},
axisLine: {
show: true, // X轴 网格线 颜色类型的修改
lineStyle: {
color: "#336194",
},
},
},
yAxis: {
name: "亩",
type: "value",
axisLine: {
lineStyle: {
color: "#b5c6d6",
},
},
axisLabel: {
fontSize: 10, // 设置字体大小
// x轴的文本颜色
textStyle: {
color: "#b5c6d6", // 就是颜色
},
},
splitLine: {
show: false, // X轴线 颜色类型的修改
lineStyle: {
color: "#94B8DC",
},
},
},
series: [
// 底部的椭圆形(象形柱图):pictorialBar
{
type: "pictorialBar", // pictorialBar(象形柱图)
symbolSize: [20, 10], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
symbolOffset: [0, 5], // 图形相对于原本位置的偏移
z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
itemStyle: { // 图形样式
// echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
// 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "rgba(1, 230, 250,1)"
},
{
offset: 1, // 100%处的颜色
color: "rgba(1, 230, 250,1)"
}
])
},
data: [0, 0, 0, 0,0,0]
},
// 中间的长方形柱状图(柱状图):bar
{
showBackground: true,
backgroundStyle: {
color: 'rgba(37, 122, 198, 0.2)'
},
type: 'bar', // 柱状图
barWidth: 20, // 柱条的宽度,不设时自适应
barGap: '0%', // 柱子与柱子之间的距离
itemStyle: { // 图形样式
color: {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0, // 0%处的颜色
"color": "rgba(0, 103, 171,0.5)"
}, {
"offset": 1, // 100%处的颜色
"color": "rgba(1, 230, 250,1)"
}]
}
},
data: [22,44,224,334,112,324]
},
// 顶部的椭圆形(象形柱图):pictorialBar
{
type: "pictorialBar",
symbolSize: [20, 10],
symbolOffset: [0, -5],
z: 12,
symbolPosition: "end",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(21, 174, 242,0.5)"
},
{
offset: 1,
color: "rgba(1, 230, 250,1)"
}
], false)
},
data: [22,44,224,334,112,324]
}
]
};
echarts 渐变圆柱柱状图
最新推荐文章于 2024-07-23 11:06:08 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)