echarts – 混合图实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图四 -- 混合图</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 750px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '供应商',
x: 'center'
},
tooltip: {
trigger: 'axis', // hover 触发事件
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
right: '150', // 图组件距离右边距离
},
legend: {
data: ['新增审核中供应商数', '新增认证供应商数', '上月供应商累计总数', '当月供应商累计总数'],
top: '20%',
right: '0',
width: 150,
// selectedMode:false // 取消图例的点击事件
},
xAxis: {
type: 'category',
data: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC']
},
yAxis: {
type: 'value',
splitLine:{show: false} // 去掉网格线
},
series: [
{
name:'新增审核中供应商数',
type:'bar',
barWidth: '50%', // 柱状宽度
stack: '供应商', // 堆积
data:[120, 132, 101, 134, 90, 230, 210, 22, 22, 44, 44, 66]
},
{
name:'新增认证供应商数',
type:'bar',
stack: '供应商', // 堆积
data:[120, 132, 101, 134, 90, 230, 210, 22, 33, 33, 34, 66]
},
{
name:'上月供应商累计总数',
type:'bar',
stack: '供应商', // 堆积
data:[120, 132, 101, 134, 90, 230, 210, 22, 44, 44, 0, 55],
itemStyle : { // 柱状颜色
normal : {
color: 'blue'
}
}
},
{
name:'当月供应商累计总数',
type:'line',
symbol:'none', // 去掉拐点
itemStyle : {
normal : {
color: 'blue',
lineStyle:{
width:3,//折线宽度
color:"blue"//折线颜色
}
}
},
data:[360, 666, 555, 444, 777, 555, 444, 333, 555, 666, 555, 666]
},
]
};
myChart.setOption(option);
</script>
</body>
</html>