Foreword:
echarts implements the horizontal column chart text on the column chart.
Effect chart:
Implementation source code:
<div id="lip" style="width:100%;height:800px;"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
function initEchartsFh() {
var myChart = echarts.init(document.getElementById('lip'));
var option = {
grid: {
left: "5%",
right: "2%",
width:"80%",
bottom: "2%",
top: "8%",
containLabel: true
},
xAxis: {
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: [
{
type: "category",
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
textStyle: {
color: "#F5784C",
fontSize: "16"
}
},
//------------------右侧展示的具体内容----------------------------
data: [
{
value:"10%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"20%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"30%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"40%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"50%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"60%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"70%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"10%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"10%",
itemStyle:{
color:"#FFCB9B"
}
},
{
value:"10%",
itemStyle:{
color:"#FFCB9B"
}
},
],
},
{//名称
type: 'category',
offset: -10,
position: "left",
axisLine: {
show: false
},
inverse: false,
axisTick: {
show: false
},
axisLabel: {
interval: 0,
color: ["#333"],
align: "left",
verticalAlign: "bottom",
lineHeight: 32,
fontSize: 16
},
//------------------文字描述----------------------------
data: ['2019-2020学年第一学期九年级寒假必练题-数学试题卷（一）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（二）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（三）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（四）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（五）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（六）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（七）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（八）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（九）',
'2019-2020学年第一学期九年级寒假必练题-数学试题卷（十）']
},
{//名称
type: 'category',
offset: -470,
position: "left",
axisLine: {
show: false
},
inverse: false,
axisTick: {
show: false
},
axisLabel: {
interval: 0,
color: ["#2FBC71"],
align: "left",
verticalAlign: "bottom",
fontSize: 16,
lineHeight: 32,
padding: [2, 8, 2, 8],
backgroundColor:'#F0FFF7',
},
//------------------文字描述----------------------------
data: ['60人完成','1200人完成','12000人完成','60人完成','60人完成','60人完成','60人完成','60人完成','60人完成','60人完成']
},
],
series: [
{
zlevel: 1,
type: "bar",
barWidth: "15px",
animationDuration: 1500,
//------------------数据及其样式----------------------------
data: [
{
value:10,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:20,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:30,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:40,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:50,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:60,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:70,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:10,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:10,
itemStyle:{
color:"#FFCB9B"
}
},
{
value:10,
itemStyle:{
color:"#FFCB9B"
}
},
],
align: "center",
itemStyle: {
normal: {
barBorderRadius: 10
}
}
},
{
type: "bar",
barWidth: 15,
barGap: "-100%",
margin: "20",
//------------------背景按最大值----------------------------
data: [100,100,100,100,100,100,100,100,100,100],
textStyle: {
//图例文字的样式
fontSize: 10,
color: "#fff"
},
itemStyle: {
normal: {
color: "#FFF9F3",
//width:"100%",
fontSize: 10,
barBorderRadius: 30
},
}
}
]
};
myChart.setOption(option);
}
window.onload = function(){
initEchartsFh();
}
window.onresize = function(){
initEchartsFh();
}
</script>