HTML代码 :
<div id="barChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"></div>
JavaScript代码 :
var barChart = {
title: {
text: '折柱混合图'
},
dataZoom: {
type:'inside',//slider
//orient:'horizontal'//vertical
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
//x:'left',
data:['蒸发量','降水量']
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
}
],
series: [
{
name:'蒸发量',
type:'bar',
//stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
//stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
};
//初始化echarts实例
var myBarChart = echarts.init(document.getElementById('barChart'));
//使用制定的配置项和数据显示图表
myBarChart.setOption(barChart);
版权声明:本文为chengliang666原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。