折线柱状图的使用以官网中的例子为例,学习下基本属性。感觉echarts3文档写的真是特别清楚,直接拿来就能用,太简单了。
文档配置官网:
http://echarts.baidu.com/option.html#title
<body>
<div>
<div id="bar" style="height:500px; width:800px">
</div>
</div>
</body>
<!-- 需要引用的JS -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/echarts/echarts.min.js"></script>
<script type="text/javascript">
$(function(){
showBar();
});
function showBar(){
title = '多 Y 轴示例';
var colors = ['#5793f3', '#d14a61', '#675bba'];
option = {
color: colors,
tooltip: {//提示框鼠标放轴上的时候显示,默认不显示配置以下属性可显示
trigger: 'axis',//x轴触发
axisPointer: {//坐标轴指示器配置项
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis: [
{
type: 'category',//value数值轴'category' 类目轴'time' 时间轴'log' 对数轴
axisTick: {//坐标轴刻度相关设置。
alignWithLabel: true
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis: [//多个y轴
{
type: 'value',
name: '蒸发量',
min: 0,//最小刻度
max: 250,//最大刻度
position: 'right',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '降水量',
min: 0,
max: 250,
position: 'right',
offset: 100,//偏移量
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
position: 'left',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [//顺序和yAxis对应
{
name:'蒸发量',
type:'bar',
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',
yAxisIndex: 1,//使用的 y 轴的 index,默认为0
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]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 2,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
var chart = echarts.init(document.getElementById('bar'));
chart.setOption(option);
}
</script>
官网例子显示:
我们项目中使用代码:
function initBorthAndDeath(){
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
left:'right',
top:'middle',
orient:'vertical',
data:['出生人数','死亡人数'],
textStyle: {
color: '#ccc'
}
},
xAxis: [
{
type: 'category',
data: [],
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
splitLine : {show: false}
}
],
yAxis: [
{
type: 'value',
name: '人数',
nameTextStyle:{
color: '#666'
},
min: 0,
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#ccc'
}
},axisTick: {
show: false
},
splitLine : {show: false}
},
{
type: 'value',
name: '增长率',
nameTextStyle:{
color: '#666'
},
axisLabel: {
formatter: '{value}%',
textStyle: {
color: '#ccc'
}
},
axisTick: {
show: false
},
splitLine : {show: false}
}
],
grid: [
{
top: '15%',
left: '8%',
right: '20%',
bottom: '18%'
}
],
series: [
{
name:'出生人数',
type:'bar',
barWidth:'15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(98,238,21)'
}, {
offset: 1,
color: 'rgb(16,168,12)'
}])
}
},
data:[]
},
{
name:'死亡人数',
type:'bar',
barWidth:'15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(11,233,247)'
}, {
offset: 1,
color: 'rgb(4,88,226)'
}])
}
},
data:[]
},
{
name:'出生增长率',
type:'line',
yAxisIndex: 1,
itemStyle: {
normal:{
color:'#66fb1c'
}
},
data:[]
},
{
name:'死亡增长率',
type:'line',
yAxisIndex: 1,
itemStyle: {
normal:{
color:'#0477e3'
}
},
data:[]
}
]
};
var chart = echarts.init(document.getElementById('cssw'));
var date = new Date();
var year = date.getFullYear();
//人口总数以及人口增长率
$.ajax({
async:true,
url:DEFAULT_CONTEXT_PATH+"/console/chart/borthChart",
data:{regionCode:regionCode,endTime:year-1,startTime:year-5},
dataType:"json",
type:"POST",
success:function(data){
option.xAxis[0].data = data.rowList;
var index = 5;
var borth = [];
var addBorth = [];
$.each(data.data,function(i,item){
if(i<=5){
if(i>0){
borth.push(item.total);
addBorth.push(item.add);
}
}else{
return;
}
})
option.series[0].data = borth;
option.series[2].data = addBorth;
//死亡人口以及死亡人口增长率
$.ajax({
async:true,
url:DEFAULT_CONTEXT_PATH+"/console/chart/deathChart",
data:{regionCode:regionCode,endTime:year-1,startTime:year-5},
dataType:"json",
type:"POST",
success:function(data){
option.xAxis[0].data = data.rowList;
var index = 5;
var death = [];
var add = [];
$.each(data.data,function(i,item){
if(i<=5){
if(i>0){
death.push(item.total);
add.push(item.add);
}
}else{
return;
}
})
option.series[1].data = death;
option.series[3].data = add;
chart.setOption(option);
}
});
}
});
}
效果展示: