echarts柱状图 双柱状图基本用法
<script>
echarts_1()
function echarts_1() {
var myChart = echarts.init(document.getElementById('echart'));
option = {
calculable: true,
legend: {
// 指示框名字 注意！要和下方series中的name一起改
data: ['女', '男'],
// 指示框位置 距离上下左右多少
right: '5%',
// top: '50%',
textStyle: {
color: '#4F4F4F' //字体颜色
}
},
title: {
text: '对象编号',
textStyle: {
color: '#5DC3FF',
fontSize: 14,
fontWeight: 'normal'
},
left: 10,
top: 39
},
tooltip: {
trigger: 'axis',
textStyle: {
fontSize: 14 // 文字字体大小
},
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(25, 114, 162, 0.4)',
width: 1,
lineStyle: {
type: 'solid'
}
}
}
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '2020', '2021', '2022'],
axisLine: { //x轴线的颜色以及宽度
show: true, //是否显示X轴
lineStyle: {
color: "#4F4F4F",
}
},
axisLabel: {
// interval: 0, //间隔几条显示
// rotate: 20, // 切斜度数
// fontSize: 10, //字体大小
},
axisTick: {
//是否显示刻度线
show: false
},
}
],
yAxis: [
{
type: 'value',
inverse: true, //倒叙
axisTick: {
//y轴刻度线
show: false
},
axisLine: {
show: false, // Y轴
lineStyle: {
color: "#4F4F4F",
}
},
splitLine: { // 表格里面Y轴线条
show: true,
lineStyle: {
type: 'dashed', //虚线
color: '#04072F' //虚线颜色
}
}
}
],
// 整体大小
grid: {
left: '3%',
right: '4%',
top: '10%',
bottom: '5%',
containLabel: true
},
series: [
{
barWidth: 12,//柱子宽度
name: '女',
type: 'bar',
data: [
135.6, 162.2, 32.6, 20.0, 6.4
],
itemStyle: {
//颜色样式部分
normal: {
barBorderRadius: [20, 20, 0, 0], //圆角[上左，上右，下右，下左]
label: {
show: true, //开启数字显示
position: 'top', //在上方显示数字
textStyle: { //数值样式
color: '#474646', //字体颜色
fontSize: 10 //字体大小
}
},
// 柱状图颜色渐变
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: "#8277E9" },
{ offset: 1, color: "#CC77E9" },
]),
}
}
},
{
barWidth: 12,//柱子宽度
name: '男',
type: 'bar',
data: [
28.7, 70.7, 175.6, 182.2, 48.7
],
itemStyle: {
//颜色样式部分
normal: {
barBorderRadius: [20, 20, 0, 0], //圆角[上左，上右，下右，下左]
label: {
show: true, //开启数字显示
position: 'top', //在上方显示数字
textStyle: { //数值样式
color: '#474646', //字体颜色
fontSize: 10 //字体大小
}
},
// 柱状图颜色渐变
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: "#017CE4" },
{ offset: 1, color: "#249EFD" },
]),
}
}
}
]
};
//自定义滚动条
if (data > 7) {
let endDataZoom = Math.ceil((7 * 100) / data.personNum.length);
option.dataZoom = [
{
type: 'inside',
startValue: 0,
endValue: 2,
minValueSpan: 2,
maxValueSpan: 2,
yAxisIndex: [0],
witdth: 8,
bottom: 10,
handleStyle: {
color: '#074e90',
borderColor: '#074e90'
},
showDataShadow: false,
handleIcon:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z',
handleSize: '80%',
fillerColor: '#074e90',
backgroundColor: 'transparent',
borderColor: 'transparent',
start: 0, //数据窗口范围的起始百分比,表示1%
end: endDataZoom, //数据窗口范围的结束百分比,表示35%坐标
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
},
{
type: 'slider',
realtime: true,
startValue: 0,
endValue: 2,
width: 8,
bottom: 10,
yAxisIndex: [0], // 控制y轴滚动
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
top: '1%',
right: '5',
handleStyle: {
color: '#074e90',
borderColor: '#074e90'
},
showDataShadow: false,
handleIcon:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z',
handleSize: '80%',
fillerColor: '#074e90',
backgroundColor: 'transparent',
borderColor: 'transparent'
}
];
} else {
option.dataZoom = [];
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.off('click');
myChart.on('click', param => {
console.log(param)
});
window.addEventListener("resize", function () {
myChart.resize();
})
}
</script>
这里有注意的详细看法
最终内容
* //柱状图横向时与XAxis，yAxis中type 互换位置
