直接CV，具体需要的js文件自行百度网上查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二个包含第一个echart3</title>
<script src="../js/echarts.js"></script>
</head>
<body>
<button οnclick="aaa()">点我</button>
<div id="main" style="width:800px;height: 800px;"></div>
<!--=============================================================-->
</body>
<script type="application/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
legend: {//设置示例
data: ['华为P总销售量','红米系列总销售量','华为P9销售量','红米7销售量'],
type: "plain",
right: '2%',
textStyle: {
// 图例文字样式
color: "black",
fontSize: 14,
fontFamily: "微软雅黑"
},
itemWidth: 33, // 图例图形的宽度
},
xAxis: [
{//设置横坐标
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
{
//隐藏第二X轴
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: {//设置纵坐标
type: 'value',
// 隐藏y轴
axisLine: {
show: false
},
// 隐藏刻度线
axisTick: {
show: false
},
// 网格线设置
splitLine: {
type: "dashed",
color: "#eeeeee"
}
},
title: {
text: "数据展示图"
},
tooltip: {//设置弹框
trigger: 'axis',
axisPointer: {type: 'shadow'}
},
grid: {//设置网格样式
left: '0%',
top: '10px',
right: '0%',
bottom: '4%',
containLabel: true
},
series: [
{
name: '红米系列总销售量',
type: 'bar',
xAxisIndex: 1,//使用第二X轴
// barWidth: '60%', //柱子宽度
data: [3500, 3500, 3500, 3500,3500,3500,3500]
},
{
name: '华为P总销售量',
type: 'bar',
xAxisIndex: 1,
// barWidth: '60%', //柱子宽度
data: [3000, 3000, 3000, 3000,3000,3000,3000],
},
{
name: '红米7销售量',
type: 'bar',
xAxisIndex: 0,//使用第二X轴
barWidth: '20', //柱子宽度
barGap: 1.2, //柱子之间间距
data: [2000, 2000, 2000, 2000,2000,2000,2000]
},
{
name: '华为P9销售量',
type: 'bar',
xAxisIndex: 0,//使用第一X轴
barWidth: '20', //柱子宽度
barGap: 1.2, //柱子之间间距
data: [1000, 1000, 1000, 1000,1000,1000,1000],
????????????????????itemStyle: {
????????????????????????normal: {
????????????????????????color: 'yellow', //柱子颜色
????????????????????????opacity: 1,
????????????????????????barBorderRadius: 1, //柱子菱角
???????????????????????? }
????????????????????????}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
</script>
</html>
?对于单系列还有一种版本
可以参考(8条消息) echarts柱状图实现重叠_Moving bricks的博客-CSDN博客_echarts柱状图重叠
