Echrts实现立体圆柱体 柱状图
就是这种效果，我用的echrts版本是5.4.1
废话不多说，直接上代码（里面代码有注释，我就不再解释了）
1.这个是html代码，我是vue2
<template>
<div style="display: flex; position: relative">
<div id="partEcharts" ref="partEcharts" style="width:100%;height:400px;">div>
div>
template>
2.下面是js代码
<script>
import * as echarts from "echarts";
export default {
data() {
return {
option:{
grid: {
left: '5%',
right: '5%',
top: '10%',
bottom: '12%',
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: function (parms) {
return parms.marker + " " + parms.name + "：" + parms.value + "%";
}
},
xAxis: {
type: 'category', // category(坐标轴类型)
data: ['上海', '许昌', '商丘', '北京', '西安', '苏州'],
axisTick: { // 坐标轴刻度相关配置
show: false // 是否显示坐标轴刻度
},
label:{
show:true
},
axisLine: { // 坐标轴轴线相关配置
lineStyle: { // 坐标轴轴线样式
color: 'rgba(255,255,255,0.15)' // 坐标轴轴线颜色
}
},
axisLabel: { // 坐标轴刻度标签相关配置
color: '#B7BDBF',
fontSize: 14,
fontWeight:600
}
},
yAxis: {
type: 'value', // value(数值轴,适用于连续数据)
name:'单位(%)',
nameTextStyle:{
color:'#fff',
padding:[0,32,10,0],
},
axisTick: { // 坐标轴刻度相关配置
show: false // 是否显示坐标轴刻度
},
axisLine: { // 坐标轴轴线相关配置
show: false // 是否显示坐标轴轴线
},
axisLabel: { // 坐标轴刻度标签相关配置
color: '#ffffff',
fontSize: 14
},
splitLine: { // 坐标轴在 grid 区域中的分隔线
lineStyle: { // 分割线配置
color: 'rgba(255,255,255,0.15)' // 分割线颜色
}
},
interval:10,
},
series: [
// 底部的椭圆形(象形柱图):pictorialBar
{
type: "pictorialBar", // pictorialBar(象形柱图)
label: { // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
show: true, //是否显示标签
position: [0,-30], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
formatter:'{c}%',
color: '#fff',
fontSize: 14,
},
symbolSize: [16, 8], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
symbolOffset: [0, 0], // 图形相对于原本位置的偏移
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(31,97,234,0.8)"
},
{
offset: 1, // 100%处的颜色
color: "rgba(31,97,234,0.8)"
}
])
},
data: [78, 85, 78, 99, 67, 53],
},
// 中间的长方形柱状图(柱状图):bar
{
type: 'bar', // 柱状图
barWidth: 16, // 柱条的宽度,不设时自适应
barGap: '0%', // 柱子与柱子之间的距离
itemStyle: { // 图形样式
// color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
// 下面就是使用线性渐变
color: {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0, // 0%处的颜色
"color": "rgba(0,183,255,1.000)"
}, {
"offset": 1, // 100%处的颜色
"color": "rgba(34,68,172,0.35)"
}]
}
},
data: [78, 85, 78, 99, 67, 53]
},
// 顶部的椭圆形(象形柱图):pictorialBar
{
type: "pictorialBar",
symbolSize: [16, 10],
symbolOffset: [0, -5],
z: 12,
symbolPosition: "end",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(33,243,255,1)"
},
{
offset: 1,
color: "rgba(33,243,255,1)"
}
], false)
},
data: [78, 85, 78, 99, 67, 53]
},
{
type: 'line', // 折线图
smooth: false, // 是否平滑曲线显示
showSymbol:true, //是否显示折线上的点
symbol:'circle',
symbolSize:6,
itemStyle:{
color:'#5FEEF1',
borderWidth:6,
borderColor:'rgba(23,224,253,0.29)'
},
lineStyle: {
color: '#37D8DC',
width: 1,
},
data: [90, 80, 78, 100, 67, 5]
}
]
}
}
},
mounted(){
let mycharts = echarts.init(this.$refs.partEcharts);
mycharts.clear();
echarts.registerTheme('myTheme', {
itemStyle: this.itemStyle
}); // 注册主题
mycharts.setOption(this.option,'myTheme');
}
}
</script>