<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('_top'));
// 指定圖表的配置項和數據
var option = {
//-------------- 標題 title ----------------
title: {
text: '主標題',
textStyle:{ //---主標題內容樣式
color:'#fff'
},
subtext:'副標題', //---副標題內容樣式
subtextStyle:{
color:'#bbb'
},
padding:[0,0,100,100] //---標題位置,因為圖形是是放在一個dom中,因此用padding屬性來定位
},
//---------------- 圖例 legend -----------------
legend: {
type:'plain', //----圖例類型，默認為'plain'，當圖例很多時可使用'scroll'
top:'1%', //----圖例相對容器位置,top\bottom\left\right
selected:{
'銷量':true, //----圖例選擇,圖形加載出來會顯示選擇的圖例，默認為true
},
textStyle:{ //----圖例內容樣式
color:'#fff', //---所有圖例的字體顏色
//backgroundColor:'black', //---所有圖例的字體背景色
},
tooltip:{ //圖例提示框，默認不顯示
show:true,
color:'red',
},
data:[ //----圖例內容
{
name:'銷量',
icon:'circle', //----圖例的外框樣式
textStyle:{
color:'#fff', //----單獨設置某一個圖例的顏色
//backgroundColor:'black',//---單獨設置某一個圖例的字體背景色
}
}
],
},
//-------------- 提示框 -----------------
tooltip: {
show:true, //---是否顯示提示框,默認為true
trigger:'item', //---數據項圖形觸發
axisPointer:{ //---指示樣式
type:'shadow',
axis:'auto',
}
padding:5,
textStyle:{ //---提示框內容樣式
color:"#fff",
},
},
//------------- grid區域 ----------------
grid:{
show:false, //---是否顯示直角坐標系網格
top:80, //---相對位置，top\bottom\left\right
containLabel:false, //---grid 區域是否包含坐標軸的刻度標簽
tooltip:{ //---鼠標焦點放在圖形上，產生的提示框
show:true,
trigger:'item', //---觸發類型
textStyle:{
color:'#666',
},
}
},
//------------- x軸 -------------------
xAxis: {
show:true, //---是否顯示
position:'bottom', //---x軸位置
offset:0, //---x軸相對於默認位置的偏移
type:'category', //---軸類型，默認'category'
name:'月份', //---軸名稱
nameLocation:'end', //---軸名稱相對位置
nameTextStyle:{ //---坐標軸名稱樣式
color:"#fff",
padding:[5,0,0,-5], //---坐標軸名稱相對位置
},
nameGap:15, //---坐標軸名稱與軸線之間的距離
//nameRotate:270, //---坐標軸名字旋轉
axisLine:{ //---坐標軸 軸線
show:true, //---是否顯示
//------------------- 箭頭 -------------------------
symbol:['none', 'arrow'], //---是否顯示軸線箭頭
symbolSize:[8, 8] , //---箭頭大小
symbolOffset:[0,7], //---箭頭位置
//------------------- 線 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐標軸 刻度
show:true, //---是否顯示
inside:true, //---是否朝內
lengt:3, //---長度
lineStyle:{
//color:'red', //---默認取軸線的顏色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐標軸 標簽
show:true, //---是否顯示
inside:false, //---是否朝內
rotate:0, //---旋轉角度
margin: 5, //---刻度標簽與軸線之間的距離
//color:'red', //---默認取軸線的顏色
},
splitLine:{ //---grid 區域中的分隔線
show:false, //---是否顯示，'category'類目軸不顯示，此時我的X軸為類目軸，splitLine屬性是無意義的
lineStyle:{
//color:'red',
//width:1,
//type:'solid',
},
},
splitArea:{ //--網格區域
show:false, //---是否顯示，默認false
},
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//內容
},
//---------------------- y軸 ------------------------
yAxis: {
show:true, //---是否顯示
position:'left', //---y軸位置
offset:0, //---y軸相對於默認位置的偏移
type:'value', //---軸類型，默認'category'
name:'銷量', //---軸名稱
nameLocation:'end', //---軸名稱相對位置value
nameTextStyle:{ //---坐標軸名稱樣式
color:"#fff",
padding:[5,0,0,5], //---坐標軸名稱相對位置
},
nameGap:15, //---坐標軸名稱與軸線之間的距離
//nameRotate:270, //---坐標軸名字旋轉
axisLine:{ //---坐標軸 軸線
show:true, //---是否顯示
//------------------- 箭頭 -------------------------
symbol:['none', 'arrow'], //---是否顯示軸線箭頭
symbolSize:[8, 8] , //---箭頭大小
symbolOffset:[0,7], //---箭頭位置
//------------------- 線 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐標軸 刻度
show:true, //---是否顯示
inside:true, //---是否朝內
lengt:3, //---長度
lineStyle:{
//color:'red', //---默認取軸線的顏色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐標軸 標簽
show:true, //---是否顯示
inside:false, //---是否朝內
rotate:0, //---旋轉角度
margin: 8, //---刻度標簽與軸線之間的距離
//color:'red', //---默認取軸線的顏色
},
splitLine:{ //---grid 區域中的分隔線
show:true, //---是否顯示，'category'類目軸不顯示，此時我的y軸為類目軸，splitLine屬性是有意義的
lineStyle:{
color:'#666',
width:1,
type:'dashed', //---類型
},
},
splitArea:{ //--網格區域
show:false, //---是否顯示，默認false
}
},
//------------ 內容數據 -----------------
series: [
{
name: '銷量', //---系列名稱
type: 'bar', //---類型
legendHoverLink:true, //---是否啟用圖例 hover 時的聯動高亮
label:{ //---圖形上的文本標簽
show:false,
position:'insideTop', //---相對位置
rotate:0, //---旋轉角度
color:'#eee',
},
itemStyle:{ //---圖形形狀
color:'blue',
barBorderRadius:[18,18,0,0],
},
barWidth:'20', //---柱形寬度
barCategoryGap:'20%', //---柱形間距
data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
//{a}：series的name屬性
//{b}：當前數據的name
//{c}：當前數據的value
//{d}：當前數據的百分比
這是Echarts預定義的，當然可以用formatter自定義