function initPie(el,data,options){
var options = Object.prototype.toString.call(options) === "[object Object]" ? options : {
};
var chartTitle = 'chartTitle' in options ? options.chartTitle : "",
radius = 'radius' in options ? options.radius : '50%',
isLabel = 'isLabel' in options ? options.isLabel : true,
colors = 'colors' in options ? options.colors : null,
hoverAnimation = 'hoverAnimation' in options ? options.hoverAnimation : true,
center = 'center' in options ? options.center : ['50%','50%'],
labelPosition = 'labelPosition' in options ? options.labelPosition : 'outside',
emphasis = 'emphasis' in options ? options.emphasis : {
},
labelFormatter = 'labelFormatter' in options ? options.labelFormatter : '{b}',
labelLine = 'labelLine' in options ? options.labelLine : {
},
roseType = 'roseType' in options ? options.roseType : false,
legendBoxLeft = 'legendBoxLeft' in options ? options.legendBoxLeft : 'auto';
legendBoxBottom = 'legendBoxBottom' in options ? options.legendBoxBottom : 'auto',
legendBoxHeight = 'legendBoxHeight' in options ? options.legendBoxHeight : 'auto',
y = 'y' in options ? options.y : 'center',
legendType = 'legendType' in options ? options.legendType : 'plain';
var option = {
title: {
text: chartTitle,
x:'center',
top:10,
textStyle:{
color:'#5E5E5E',
fontSize:20
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend:{
type:legendType,
orient:"vertical",
y:y,
right:legendBoxLeft,
bottom:legendBoxBottom,
height:legendBoxHeight,
itemWidth:14,
data:data.map(function (a,b) {
return a.name;
})
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false},
magicType: {
type: ['line', 'bar']},
restore: {
},
saveAsImage: {
}
},
top:35,
right:20,
},
color:colors,
series : [
{
name:chartTitle,
type:'pie',
radius :radius,
hoverAnimation:hoverAnimation,
center: center,
avoidLabelOverlap: false,
roseType:roseType,
data:data.sort(function (a, b) {
return a.value - b.value; }),
label: {
normal: {
show:isLabel,
position:labelPosition,
formatter:labelFormatter
},
emphasis: emphasis
},
labelLine: {
normal:labelLine
}
}
]
};
var myechsrt = echarts.init(document.querySelector(el));
myechsrt.setOption(option)
return myechsrt;
}
function initbarOrPieBtn(el,toBar,toPie,endValue){
$(el).css('position',"relative");
var html='<div class="chart-btns"><div class="chart-btns-box"><span class="app-icon-3232 app-bar to-bar"></span><span class="app-icon-3232 app-pie to-pie"></span></div></div>'
$(el).append(html);
$("span.to-bar").bind("click",function () {
toBar(endValue);
})
$("span.to-pie").bind("click",function () {
toPie();
})
}
function record(options){
//更新记录数
var el = 'el' in options ? options.el : console.error('cannot find el'),
data = 'data' in options ? options.data : [];
if(data.length > 0){
data = data.sort(function (a, b) {
return b.value - a.value; });
}
var title = 'title' in options ? options.title : "",
tooltipFormatter = 'tooltipFormatter' in options ? options.tooltipFormatter() : null,
xData = 'xData' in options ? options.xData() : data.map(function (a,b){
return a.name}),
val = 'val' in options ? options.val() : data.map(function (a,b){
return a.value}),
err = 'err' in options ? options.err() : data.map(function (a,b){
return a.error}),
legendData = 'legendData' in options ? options.legendData() : [],
colors = 'colors' in options ? options.colors : ['#6797f5'],
endValue = 'endValue' in options ? options.endValue : 6
var seriesData = 'seriesData' in options? options.seriesData() : null;
var option = {
tooltip : {
trigger: 'axis',
axisPointer : {
// 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
title:{
text: title,
left:'center',
top:10,
textStyle:{
color:'#5E5E5E',
fontSize:20
}
},
dataZoom: [{
type: 'inside',
//startValue:0,
//endValue:endValue
orient:"vertical",
}, {
type: 'slider',
show:false,
bottom:-20,
textStyle:{
color:'#7CAAFB',
fontSize:0
},
borderColor:'rgba(0,0,0,0)',
fillerColor:'#2b91e7',
handleSize:"0%"
}],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xData,
axisLabel: {
textStyle: {
fontSize: 15,
}
},
},
series: [
{
name: '成功数量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
//
position: 'insideLeft',
textStyle: {
fontSize: 15,
}
}
},
data: val
},
{
name: '失败数量',
type: 'bar',
stack: '总量',
label: {
normal: {
formatter: '{c}\n\n',
show: true,
position: 'right',
textStyle: {
fontSize: 15,
}
}
},
data:err
},
]
};
var myechsrt = echarts.init(document.querySelector(el));
myechsrt.setOption(option)
return myechsrt
各种echarts深度自定义(自定义过多,自己用)
最新推荐文章于 2024-07-09 13:56:40 发布
本文详细探讨了如何对ECharts进行深度自定义,包括图表样式、交互行为等方面的调整,旨在满足个性化需求。通过实例解析,展示了自定义过程的关键步骤和技巧。
摘要由CSDN通过智能技术生成