<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="mui-input-group" id="chart_l">
<div class="mui-content-padded">
<p class="chart-a" style="float: left;margin-top: 0.3rem;">
全县统计
<span style="font-size: 0.22rem;color: #ACACB4">(近一年)</span>
</p>
<p class="chart-a" style="float: right;margin-right: 0.2rem;margin-top: 0.3rem;">
<a style="display: inline-block;width: 25px;height: 4px;border-radius: 10px;background-color: #18abf1;margin-right: 5px;"></a><span>人数</span>
<a style="display: inline-block;width: 25px;height: 4px;border-radius: 10px;background-color: #FF8C00;margin-right: 5px"></a><span>金额</span>
</p>
<div id="chart" style="width: 95%;height: 200px;"></div>
</div>
</div>
<script src="../js/echarts-all.js"></script>
<script>
months = [1,2,3,4,5,6,7,8,9,10,11,12];
people = [10,35,50,80,60,90,100,155,195,190,145,140];
money = [190,190,1000,150,1455,2345,895,790,560,900,785,125];
Max_money = Math.max.apply(null,money);
Max_people = Math.max.apply(null,people);
Max_money = Math.ceil(Max_money/100)*100;
Max_people = Math.max.apply(null,people);
chart(money,people,months,Max_money,Max_people);
function chart(money,people,months,Max_money,Max_people)
{
var getOption = function(chartType1,chartType2) { //分别对应下面的bar(条形),line(折线)
var chartOption={
tooltip: { //鼠标悬浮交互时的信息提示
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: { //直角坐标系内绘图网格
x: 45,
x2:40,
y: 25,
y2: 25,
borderWidth:0
},
toolbox: {
show: false,
},
calculable: true, //是否启用拖拽重计算特性
xAxis: [{ //横坐标
type: 'category',
data: months,
axisLine: {show: false}, //坐标轴线,默认显示且带样式
axisTick: {show: false}, //坐标轴小标记,数值轴和时间轴默认不显示,类目轴默认显示
splitLine:{
show:false
},
}],
yAxis: [{ //纵坐标
name:"元",
type: 'value',
nameTextStyle:{color:"#ccc"},
min:0,
max:Max_money,
axisLine: {lineStyle:{width:0}},
axisLabel:{formatter: '{value}'}, //坐标轴文本标签选项
},
{
name:"人",
type : 'value',
nameTextStyle:{color:"#ccc"},
min:0,
max:Max_people,
axisLine: {lineStyle:{width:0}}, //坐标轴线的样式
axisLabel : {formatter: '{value}'},
}
],
series: [{
name:"人数", //人数采用圆角矩形
type: chartType1,
yAxisIndex: 1,
barWidth : 8,
data: people,
itemStyle:{
normal: {
color:'#18abf1',
//柱形图圆角,初始化效果
barBorderRadius:20,
label: {
show: false,//是否展示数据
},
}
}
}, {
name: '金额', //金额采用 折线
type: chartType2,
symbol:'none', //去掉折线小圆点
smooth:true,
data: money,
itemStyle:{
normal:{
lineStyle:{color:'#FF8C00'}
}
}
}]
};
return chartOption;
};
var byId = function(id) {
return document.getElementById(id);
};
var barChart = echarts.init(byId('chart')); //将其显示到页面上
barChart.setOption(getOption('bar','line'));
}
</script>
</body>
</html>