這是一個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