这是一个Echarts官网的降水量例子,添加一些备注和颜色式样,当然更多图形可以在Echarts参考
option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
formatter: function(params){
return ('雨水量'+params【0】.value+ '</br>' +'涨水量'+params【1】.value) //这里自定义鼠标移入时，显示的数据值
}
},
legend: {//图例注解，可筛选柱状，data里面的数据对应series[]里面的对象name的属性
data:['蒸发量','降水量']
},
toolbox: { //官网右上角功能按钮
show : true,
feature : {
dataView : {show: true, readOnly: false}, //数据视图
magicType : {show: true, type: ['line', 'bar']}, //切换为折线图，或切换为柱状图
restore : {show: true},//还原
saveAsImage : {show: true}//将Echarts图，保存为图片，下载按钮的样式
}
},
calculable : true,
xAxis : [ //字面意思X轴的数据段
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']，
axisLine:{//是否从0刻度开始显示
show:true,
onZero:false
}
}
],
dataZoom: [//底部的拖动条配置
{//拖动条
show: true,
realtime: true,
start: 0,
end: 100,
bottom: 10,
height: 20
},
{//鼠标滚动具有拖动条效果
type: 'inside',
realtime: true,
start: 0,
end: 100
}
],
yAxis : [//Y轴数据段 默认为type : 'value' ,也可自定义最大最小值 {'min':0,'max:'100,'name':'这里定义Y轴名字'}
{
type : 'value'
}
],
series : [
{
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],
markPoint : {//水滴值
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
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],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [//横线的平均值，API提供 type : 'average' , type : 'max' , type : 'min' ,三种,也可以自定义
{type : 'average', name : '平均值'}
]
}
}
]
};
接下来是改变柱状的颜色,写在series[{
itemStyle: {
normal: {
color: function(params) {//自定义设定柱状颜色
var colorList = ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80"];
return colorList[params.dataIndex];
//颜色随机改变
//color: function (value){ 随机颜色
//return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
//}
}
}
},
}]
数值显示在柱状上面,写在series[{}]，
label: {//柱状数值顶部显示
normal: {
show: true,
position:'insideTop',//显示柱状顶部内 官网提供属性 'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' 等
fontSize:13,//字体大小
color:#fff,//颜色
fontstyle:'normal'//文字字体风格
align:'center'
还有很多属性，参照Echarts API
}
},
的外面
黄线平均值自定义写在series: [{},
{
name: '平均值',//平均值线
type: 'line',
data: [50],//这里是要自定义的数值
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
]
更多请参考官网API