完整圖（導覽列可動畫滑動）
餅圖效果圖
圖1 餅圖
柱折線圖效果圖
圖2 全部（未縮放前） 圖3 縮放後
餅圖參數
var ordersPieChart= echarts.init(document.getElementById('ordersPieChart'));//初始化餅圖div
var oPieOptions={
backgroundColor: '#fff',
color: ['#27c6e3','#1d79da'],
title:{
show:true,
text:'2018/07/05',
right:0,
top:0,
z:3,
textStyle:{
color:'#333',
fontFamily:"PingFangSC-Regular",
fontWeight:"normal",
fontSize:12
}
},
series : [
{
name:'面審量',
type:'pie',//餅圖
radius : '55%',//半徑
center: ['50%', '50%'],//位置
data:[//資料 可根據項目情況封裝
{
value:9,//值
name:"個人",//每個扇區的名稱
code:1,//自定義屬性 可在項目需要時添加
label: {//各扇區的标簽
show:true,
position:'inside',//位置
padding:[-5,10,5,0],
normal: {
formatter:[ //自定義标簽
'{label|{b}:}{con1|{c}單}{row|}',//b是name值c是value值
'{label|金額:}{con| 100萬元}'
].join('\n'),
rich:{//富文本編輯
row:{ // css類名樣式
height:10,
},
label:{
color:"#333",
align:'left',
fontSize:10
},
con1:{
color:"#fc3f3f",
align:'left',
fontSize:10,
bottom:10
},
con:{
color:"#fc3f3f",
align:'left',
fontSize:10,
bottom:10
}
}
},
}
},
{
value:3,
name:"機構",
code:2,//自定義屬性 可在項目需要時添加
label: {//各扇區的标簽
show:true,
position:'inside',//位置
padding:[-5,10,5,0],
normal: {
formatter:[ //自定義标簽
'{label|{b}:}{con1|{c}單}{row|}',//b是name值c是value值
'{label|金額:}{con| 30萬元}'
].join('\n'),
rich:{//富文本編輯
row:{ // css類名樣式
height:10,
},
label:{
color:"#333",
align:'left',
fontSize:10
},
con1:{
color:"#fc3f3f",
align:'left',
fontSize:10,
bottom:10
},
con:{
color:"#fc3f3f",
align:'left',
fontSize:10,
bottom:10
}
}
},
}
},{
value:0,
name:"産品",
code:3,//自定義屬性 可在項目需要時添加
label: {//各扇區的标簽
show:true,
position:'inside',//位置
padding:[-5,10,5,0],
normal: {
formatter:[ //自定義标簽
'{label|{b}:}{con1|{c}單}{row|}',//b是name值c是value值
'{label|金額:}{con| 0萬元}'
].join('\n'),
rich:{//富文本編輯
row:{ // css類名樣式
height:10,
},
label:{
color:"#333",
align:'left',
fontSize:10
},
con1:{
color:"#fc3f3f",
align:'left',
fontSize:10,
bottom:10
},
con:{
color:"#fc3f3f",
align:'left',
fontSize:10,
bottom:10
}
}
},
}
}
].sort(function (a, b) { return a.value - b.value; }),
// minAngle:50, //設定最小角度
labelLine: {//标簽的視覺引導線樣式
show:true,
normal: {
lineStyle: {
color: '#fc3f3f'
},
smooth: 0.1,//光滑度
length: 8,//第一條線長
length2: 16///第2條轉折線長
}
},
animationType: 'scale',//初始動畫效果 縮放效果
animationEasing: 'elasticOut',//初始動畫的緩動效果
animationDelay: function (idx) {
return Math.random() * 200;//初始動畫的延遲，支援回調函數，可以通過每個資料傳回不同的 delay 時間實作更戲劇的初始動畫效果
}
}
]
};
// 使用剛指定的配置項和資料顯示圖表
ordersPieChart.setOption(oPieOptions);
//餅圖點選事件
ordersPieChart.on('click', function (params) {
console.log("餅圖點選");
console.info(params);
alert(params.name+":"+params.value+"單");
});
起初以為 點選事件隻是點選扇區時管用 ，事實上點選扇區的标題也是可以觸發的，畢竟都是寫在一體的，别的事件可在官網上 檢視http://echarts.baidu.com/api.html#events；
柱狀折線二合一的參數設定
//産品統計 柱圖折線圖二合一
var proBarChart= echarts.init(document.getElementById('proBarChart'));//初始化 柱圖折線圖 div
var proBarOpt={
backgroundColor: '#fff',
color: ['#fc3f3f','#1d79da'],
title:{
show:true,
text:'2018/07/05',
right:0,
top:0,
z:3,
textStyle:{
color:'#333',
fontFamily:"PingFangSC-Regular",
fontWeight:"normal",
fontSize:12
}
},
grid:{//網格
height:100,
// width:"100%",
top:50,
right:0,
},
xAxis: {
type: 'category',
axisTick: {
show:false,
alignWithLabel: true,
length:0
},
axisLabel:{//x坐标軸刻度标簽
color:"#333",
fontSize:10,
// showMinLabel:true,//是否顯示最小 tick 的 label
//showMaxLabel:true,//最小和最大不可同時顯示設 因為當x軸隻剩一個标簽時 會顯示不出來
interval:0,// 0 強制顯示所有标簽。1隔一個标簽顯示一個标簽2，隔兩标簽顯示1個标簽，以此類推
rotate:-90//刻度标簽旋轉的角度，在類目軸的類目标簽顯示不下時可通過旋轉防止标簽重疊。-90 度到 90 度（預設0）
},
axisLine:{
show:true,//顯示坐标軸線
onZero:true,
lineStyle:{
color:'#bcbcbc',
type:'solid'
}
},
data:["睿易貸","雲易貸","我想貸","随便貸","有趣貸","随意貸","雲想貸","你想貸","睿可貸","有可貸"]
},
yAxis:[
{
type: 'value',
name:'單',
nameLocation:'end',
nameTextStyle:{
color:'#fc3f3f',
align:'left'
},
scale:false,//顯示零刻度
axisLabel: {
formatter: '{value} ',//單
color:'#fc3f3f',
fontSize:12
},
axisTick:{ //坐标軸刻度
show:false,
length:10,
},
axisLine:{
show:true,//顯示坐标軸線
onZero:true,
lineStyle:{
color:'#bcbcbc',
type:'solid'
}
},
splitLine:{ //坐标軸在 grid 區域中的分隔區
lineStyle:{
type:'solid',
color:'#ededed'
}
},
splitArea:{
show:true,
areaStyle:{
color:['#fff','#fff']
}
}
},
{
splitLine:{show: false},
type: 'value'
}
],
dataZoom:[//縮放
{
type: 'slider',//對應第一個y軸
show: false,
start: 0,//%
end: 100,
// handleSize: 8
},
{
type: 'inside',//區域縮放
start:0,
end: 100
},
{
type: 'slider',
show: false,
yAxisIndex: 1,//第二個y軸
filterMode: 'empty',
width: 12,
height: '70%',
// handleSize: 8,
showDataShadow: false,
left: '93%'
}
],
series : [
{
type:'line',//折線圖
data:[100,15,1,3,0,5,150,5,0,7],
yAxisIndex:0,
connectNulls:true,
smooth: "none",//拐點樣式
lineStyle:{
width:1,
type:'solid'
}
},
{
type:'bar',//柱狀圖
data:[600,170000,700,6,800,6000,1700,70,600,8],
yAxisIndex:1,
itemStyle:{//每個柱子的樣式
normal: {
barBorderRadius: [5, 5, 0, 0],//
label: {//标簽
show: true,
position: 'top',
textStyle: {
color: '#333',
fontSize:12
},
formatter:function(params){//内容 params柱子的參數
if(params.value==0){
return '';
}else
{
return params.value+"萬";
}
}
}
}
},
// barWidth:15,//當設定dataZoom縮放 寬度也自适應時 不能設定寬度
barMaxWidth:40,//最大寬度
// barMinWidth:10,
animationDurationUpdate: 1200//資料更新動畫的時長。
},
]
};
proBarChart.setOption(proBarOpt);
//柱圖點選事件
proBarChart.on('click', function (params) {
console.log("柱狀圖點選");
console.info(params);
alert(params.name+":"+params.value+"萬");
})
在做項目時，有一個難點就是x坐标軸不能顯示全，查了官網，旋轉-90度就可以像股票趨勢那樣 豎着顯示坐标軸标簽了。
完整代碼在github上，如有需要可到https://github.com/xiaoningfighting/echarts-.git下載下傳