Echart ---超詳細介紹
阿新 • • 發佈：2017-08-22
bar false 輔助線 動態 ble 圖片 ems 數據 環形圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--為ECharts準備一個具備大小(寬高)的Dom-->
<div id="main" style="height:400px;"></div>
<!--ECharts單文件引入-->
<script src="echarts-all.js"></script>
<script type="text/javascript">
//基於準備好的dom,初始化echarts圖表
var myChart=echarts.init(document.getElementById(‘main‘));
//圖表使用
var option = {
tooltip : {//提示框,鼠標懸浮交互時的信息提示
trigger: ‘item‘,//觸發類型,默認數據觸發,可選為:‘axis‘
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示內容格式
},
legend: {//圖例,每個圖表最多僅有一個圖例
orient : ‘vertical‘,//布局方式,默認為水平布局,可選為:‘horizontal‘|‘vertical‘
x : ‘left‘,//水平安放位置,默認為全圖居中,可選為:‘center‘|‘left‘|‘right‘|{number}(x坐標,單位px)
data:[‘直接訪問‘,‘郵件營銷‘,‘聯盟廣告‘,‘視頻廣告‘,‘搜索引擎‘]//圖例內容數組,數組項通常為{string},每一項代表一個系列的name，默認布局到達邊緣會自動分行(列),傳入空字符串‘‘可實現手動分行(列)
},
toolbox: {//工具箱,每個圖表最多僅有一個工具箱
show : true,//顯示策略,默認只是false.可選為:true顯示|false隱藏
feature : {//啟用功能,目前支持feature，工具箱自定義功能回調處理.
mark : {show: true},//輔助線標誌,此處啟用.
dataView : {//打開數據視圖，可設置更多屬性
show: true,
readOnly: false//readOnly默認數據視圖為只讀,可指定readOnly為false打開編輯功能
},
magicType : {//動態類型切換,支持直角系下的折線圖,柱狀圖,堆積,平鋪轉換
show: true,
type: [‘pie‘, ‘funnel‘],//餅圖,漏鬥圖
option: {//圖表選項,包含圖表實例任何可配置選項:公共選項,組件選項,數據選項
funnel: {//漏鬥圖配置
x: ‘25%‘,
width: ‘50%‘,
funnelAlign: ‘center‘,
max: 1548
}
}
},
restore : {show: true},//還原,復位原始圖表
saveAsImage : {show: true}//保存圖片IE8-不支持,上圖icon最右,可設置更多屬性.
}
},
calculable : true,//是否啟用拖拽重計算特性,默認關閉
series : [//驅動圖表生成的數據內容數組,數組中每一項為一個系列的選項及數據
{
name:‘訪問來源‘,//系列名稱
type:‘pie‘,//圖表類型,折線圖line,散點圖scatter,柱狀圖bar,餅圖pie,雷達圖radar
radius : [‘50%‘, ‘70%‘],//半徑,支持絕對值px和百分比,百分比計算比,min(width, height)/2*75%,傳數組實現環形圖,[內半徑,外半徑]
itemStyle : {//圖形樣式,可設置圖表內圖形的默認樣式和強調樣式（懸浮時樣式）
normal : {//默認樣式
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {//強調樣式
label : {
show : true,
position : ‘center‘,//標簽顯示位置,地圖標簽不可指定位置
textStyle : {
fontSize : ‘30‘,
fontWeight : ‘bold‘
}
}
}
},
data:[
{value:335, name:‘直接訪問‘},
{value:310, name:‘郵件營銷‘},
{value:234, name:‘聯盟廣告‘},
{value:135, name:‘視頻廣告‘},
{value:1548, name:‘搜索引擎‘}
]
}
]
};
//為echats對象加載數據
myChart.setOption(option);
</script>
</body>
</html>
Echart ---超詳細介紹