我通过三个 series来实现柱状的顶面 柱状面以及底面，但是这里面会有个问题，鼠标放上去的提示也会有三个，所以我们要在tooltip 提示消息里面自定义消息，就可以解决这个问题。
h5
<div class="c-l-3">
<p>社区康复巩固率</p>
<div id="container2" style="height:240px; width: 100%;"></div>
</div>
js部分
<script type="text/javascript">
var dom = document.getElementById("container2");
var myChart = echarts.init(dom);
var app = {};
//指定图表的配置项和数据
var option = {
// 工具箱
toolbox: {
show: true,
feature: {
},
},
tooltip: {
trigger: 'axis',
formatter(params) {
console.log(option)
// params[2].marker 小圆点
return params[2].name + "<br/>" + params[2].marker + '人数：' + params[2].data + " <br/>" + params[3].marker + '占比：' + params[3].data
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
// 图例
// color: ['#ffffff'],
// 图片文字解析部分
legend: {
data: ['人数', '比率'],
orient: 'horizontal', //横向显示
padding: [0, 30, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
// 位置
x: 'right',
y: 'top',
itemGap: 40,//图例之间的间距
textStyle: { fontSize: 14, color: '#96d0f4' },
},
// x轴
xAxis: {
boundaryGap: false, //从零开始
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
splitNumber: 12,
boundaryGap: true, //x轴两边是否留白
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ['rgba(0,231,255,.1)'],
width: 1,
type: 'solid'
},
},
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(4,164,199,1)',//坐标线的颜色
width: '1'//坐标线的宽度
},
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',//坐标值得具体的颜色
fontSize: 12,
},
interval: 0, //显示x轴下放的信息是否完全 0为完全 1为不完全
formatter: function (value) {
var ret = "";//拼接加\n返回的类目项
var maxLength = 5;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength);
if (rowN > 1)//如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
}
else {
return value;
}
}
},
spiltLine: {
show: false //想要不显示网格线，改为false
}
},
// y轴
yAxis: [
{
name: '人数',
nameTextStyle: {
color: "#96d0f4",
nameLocation: "start",
fontSize: 12
},
type: 'value',
max: 210,
min: 0,
left: '0',
top: '0',
splitNumber: 6,
// y轴的字体样式
axisTick: {
show: false //是否显示刻度线
},
axisLabel: {
interval: 1,
textStyle: {
color: '#96d0f4',
fontSize: '12',
padding: 5,
}
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(4,164,199,1)',//左边线的颜色
width: '1',//坐标线的宽度
}
},
splitLine: {
show: false,
lineStyle: {
color: ['rgba(0,231,255,.1'],
width: 1,
type: 'solid',
},
},
},
{
name: '比率', //单位
nameTextStyle: {
color: "#96d0f4",
nameLocation: "start",
fontSize: 12
},
type: 'value',
max: 50,
min: 0,
left: '0',
top: '0',
splitNumber: 6,
axisTick: {
show: false //是否显示刻度线
},
// y轴的字体样式
axisLabel: {
interval: 12,
textStyle: {
color: '#96d0f4',
fontSize: '12',
padding: 5,
}
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(4,164,199,1)',//左边线的颜色
width: '1',//坐标线的宽度
}
},
splitLine: {
show: false,
lineStyle: {
color: ['rgba(0,231,255,.1'],
width: 1,
type: 'solid',
},
},
},
],
grid: {
// 距离左边的距离
x: 60,
y: 50,
x2: 70,
y2: 40,
borderWidth: 10,
},
// 数据
series: [
//柱顶圆片
{
name: "人数",
type: "pictorialBar",
symbolSize: [20, 8],//调整截面形状
symbolOffset: [0, -5],
z: 12,
symbolPosition: "end",
label: {
// 顶部显示的数字
show: false,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#17E1FF',
}
},
data: [130, 110, 165, 140, 165, 140, 130, 150, 170, 190, 120, 190],
},
{
name: '人数',
// 直方图
type: 'pictorialBar',
symbolSize: [20, 8],//调整截面形状
symbolOffset: [0, 4],
z: 12,
itemStyle: {
normal: {
color: '#183E96',
}
},
data: [130, 110, 165, 140, 165, 140, 130, 150, 170, 190, 120, 190],
},
{
name: '人数',
type: 'bar',
barWidth: 20,
barGap: '0%',
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#01AEF6' },
{ offset: 1, color: 'rgba(16,36,95,0.6)' },
])
},
opacity: 1
},
data: [130, 110, 165, 140, 165, 140, 130, 150, 170, 190, 120, 190],
},
{
name: '比率',
symbol: 'circle', // 设置标记的图形为circle 不设置的话不会改变整个圆的颜色
//折线图
smooth: true,//曲线
backgroundStyle: {
color: 'rgba(255, 170, 23, 1)'
},
symbolSize: 10,
itemStyle: {
normal: {
color: '#ffaa17', //改变折线点的颜色
lineStyle: {
color: '#ffaa17', //改变折线颜色
}
}
},
type: 'line',
data: [100, 90, 150, 130, 150, 120, 110, 140, 160, 180, 110, 180],
}
]
}
// 使用刚指定的配置项和数据显示图表
app.currentIndex = -1;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
