echarts 的幾種簡單的圖片以及同時顯示多個餅圖,以及餅圖和其他形狀圖片切換
下面項目中的代碼,由於業務需求比較複雜,從後臺傳入到前臺的數據須要切割,這裏就不顯示數據的格式了,參照下里面echarts的寫法便可,其餘的數據切割部分能夠忽略:javascript
var eprjSeriesData = undefined;
var indexSeriesData = undefined;
var rprjSeriesData = undefined;
var yearData = undefined;
var min = undefined;
var max = undefined;
var yearCount = undefined;
var stdType = undefined;
var filesStr = undefined;
var chartType = undefined;
var labelOption = undefined;
var nameData = [];
var valueData = [];
var categories = [];
var rotateNumber = 0;
var fontSize = 15;
var prjArea = undefined;
var year = undefined;
var isShowReviewFlag = 1;
var sValueData = [];
var bValueData = [];
var secUid = undefined;
var loadData = undefined;
var rateStdId = 0;
var userType=0;
var basePriceLibId = undefined;
var values = {};
var radioCheck = undefined;
var maxLength = 5;//每項顯示文字個數
var isXmfrFlag = undefined;
var stdListLibId = undefined;
//1#設置上傳參數，具體頁面，具體定義
function setPrmNow(){
uploadType="61";//
var loadData = $("#indexStatisticsJson").val();
msgPrm = "&libName="+window.encodeURI(window.encodeURI(loadData));
needCover = true;//不須要判斷覆蓋
}
$(function(){
isXmfrFlag = $('#isXmfrFlag').val();
stdListLibId = $('#stdListLibId').val();
var myWidth = $('#container').css('width').slice(0,-2);
filesStr = $('#filesStr').val();
var height_frm = $(document.body).height();
secUid = $('#secUid').val();
chartType = $('#chartType').val();
isForX = $('#isForX').val();
$(":radio[name='isRoadManage'][value='" + isForX + "']").prop("checked", "checked");
stdType = $('#stdType').val();
gusEorjSeriesData = $('#gusEorjSeriesData').val();
gaisEorjSeriesData = $('#gaisEorjSeriesData').val();
prjArea = $('#prjArea').val();
year = $('#year').val();
yanghEorjSeriesData = $('#yanghEorjSeriesData').val();
organName = $('#organName').val();
yearData = $('#yearData').val();
yearData = yearData.replace("[","");
yearData = yearData.replace("]","");
yearData = yearData.replace(/ /g,"");
categories = yearData.split(",");
min = parseInt(categories[0]);
max = parseInt(categories[categories.length-1]);
yearCount = [];
if(categories.length>20){
maxLength = 3
rotateNumber=60;
fontSize = 10;
}else if(categories.length>15){
rotateNumber=40;
fontSize = 12;
}
for(var i= 0;i< categories.length;i++){
if(categories[i]){
yearCount.push(categories[i]);
if(categories[i].length>5){
rotateNumber = 60;
}else if(categories[i].length>10){
rotateNumber = 80;
}
}else{
yearCount.push(0);
}
}
switch (chartType) {
case "1":
charts1(myWidth,height_frm);
break;
case "2":
getPieDate(gusEorjSeriesData);
charts2(myWidth,height_frm);
break;
case "3":
charts1(myWidth,height_frm);
break;
case "4":
charts1(myWidth,height_frm);
break;
default:
break;
}
$(":radio").click(function(){
switchPage($(this).val());
});
$('#searchAreaUid').combobox({
onChange: function(newValue, oldValue){
if(newValue!=prjArea){
selectByAreaUid(newValue);
}
},
});
$('#searchAuditStatus').combobox({
onChange: function(newValue, oldValue){
if(newValue!=year){
selectByAuditStatus(newValue);
}
},
});
// 圖形報表
});
//柱狀圖
function charts1(myWidth,height_frm){
var loadData = $("#indexStatisticsJson").val();
var loadDataObj = eval("("+loadData+")");
for (var key in loadDataObj) {
var datas = loadDataObj[key];
for (var keye in datas){
values[key+"_"+keye] = datas[keye];
}
}
$('#container')[0].style.width = myWidth-50;
$('#container')[0].style.height = height_frm-50;
var myChart = echarts.init($('#container')[0]);
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
myChart.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: echarts.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
myChart.config = {
rotate:0,
align: 'left',
position: 'top',
distance: 10,
verticalAlign:'bottom',
itemStyle:{
normal:{
color:function(params){//設置折線上的原點顏色
return getColorFun(params);
},
/*lineStyle:{//設置線條的顏色,不支持函數(注意,若是像上面設置了itemStyle的normal,那麼線條的顏色必須主動設置,要麼在這裏修改顏色,或者在series中設置線條的顏色)
color:"green",
}*/
}
},
onChange: function () {
labelOption = {
normal: {
rotate: myChart.config.rotate,
align: myChart.config.align,
verticalAlign: myChart.config.verticalAlign,
position: myChart.config.position,
distance: myChart.config.distance,
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
//自定義折線上每一個點的樣式
labelOption = {
normal: {
position: myChart.config.position,
distance: myChart.config.distance,
align: myChart.config.align,
verticalAlign: myChart.config.verticalAlign,
rotate: myChart.config.rotate,
formatter: '{c}\n',//不能識別html
// fontSize: fontSize,
fontsize:'1rem',//自定義折線上每一個點顯示文字的大小
show:true,//折線上原點是否顯示數據
position: 'center',//折線上原點數據顯示的位置
// textStyle: {
// color: '#000'//設置每一個原點上顯示的文字的顏色
// },
rich: {
name: {
textBorderColor: '#fff'
}
},
},
itemStyle:myChart.config.itemStyle
};
var yValueFormat = "{value}";
var showType = ['line', 'bar', 'stack', 'tiled'];
var dataViewType = true;
var restoreType = true;
var saveAsImageType = true;
var zdyTitle = "增加率";
var zdyBingImage = "工料機佔比";
// var iconUrl = "image://http://echarts.baidu.com/images/favicon.png";
var iconUrl = 'image://web/images/Business Icons_Data Line Chart.png';
var iconUrl2 = 'image://web/images/zdyRate2.png';
if(isXmfrFlag == 9){
yValueFormat = '{value} %';
showType = [];
dataViewType = false;
restoreType = false;
saveAsImageType = false;
zdyTitle = "返回";
iconUrl = 'image://web/images/act_left.png';
organName = "增減幅度";
}
var zdyFeature = {
myTool1: {
show: true,
title: zdyTitle,
icon: iconUrl,
onclick: function (){
var url = window.location.href;
var obj = getAllUrlParms(url);
if(obj["isXmfrFlag"] == 9){
obj["isXmfrFlag"] = "";
}else{
obj["isXmfrFlag"] = 9;//借用isXmfrFlag來保存查詢比率圖
}
if(obj["secUid"].indexOf("%2C") != -1){
obj["secUid"] = obj["secUid"].replaceAll("%2C",",");
}
var appendUrl = $.param(obj);
url = url.split("?")[0] +"?"+ appendUrl;
$(window).attr('location',url);
}
},
myTool2: {
show: true,
title: zdyBingImage,
icon: iconUrl2,
onclick: function (){
initBingImageFun();
}
},
mark: {show: true},
dataView: {show: dataViewType, readOnly: false},
magicType: {show: true, type: showType},
restore: {show: restoreType},
saveAsImage: {show: saveAsImageType},
};
if(isXmfrFlag == 9){
delete zdyFeature.myTool2;
}
valueData = getSeriesData(gusEorjSeriesData,categories);
var option = {
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
title: {
text: organName
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter:function (params){
var showStr = "";
number = 0;
for (var key in params) {
if(!isNaN(key)){
var obj = params[key];
if(number==0){
showStr+=(obj.name+"</br>");
}
number=1;
var objValue = values[key+"_"+obj.name+"index"];
var numTotal = values[key+"_numTotal"];
var sumsTotal = values[key+"_sumsTotal"];
if(objValue&&objValue.indexOf("[")>0){
showStr+=(obj.marker+obj.seriesName+":"+objValue.substring(0,objValue.indexOf("]")+1)+"</br>");
}else{
showStr+=(obj.marker+obj.seriesName+":"+objValue+"</br>");
}
if(numTotal && numTotal.length > 0){
showStr += obj.marker+"數量合計:"+numTotal+"</br>";
}
if(sumsTotal && sumsTotal.length > 0){
showStr += obj.marker+"金額合計:"+sumsTotal+"</br>";
}
}
}
return showStr;
}
},
legend: {
data: nameData
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: zdyFeature
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: yearCount,
axisLabel:{
interval:0,
rotate:0,
formatter:function(value,index)
{
var ret = "";//拼接加\n返回的類目項
var valLength = value.length;//X軸類目項的文字個數
var rowN = Math.ceil(valLength / maxLength); //類目項須要換行的行數
if (rowN > 1)//若是類目項的文字大於3,
{
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//開始截取的位置
var end = start + maxLength;//結束截取的位置
//這裏也能夠加一個是不是最後一行的判斷，可是不加也沒有影響，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //憑藉最終的字符串
}
return ret;
}else{
return value;
}
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: yValueFormat
},
}
],
series: valueData
};
myChart.setOption(option);
myChart.on('click', function(param) {
console.info(param);//重要的參數都在這裏！
});
}
//餅圖
function charts2(myWidth,height_frm){
$('#container')[0].style.width = myWidth-50;
$('#container')[0].style.height = height_frm-50;
var myChart = echarts.init($('#container')[0]);
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:categories
},
series: [
{
name:'',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:sValueData
},
{
name:'',
type:'pie',
radius: ['40%', '55%'],
label: {
normal: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 22,
// borderRadius: [4, 4, 0, 0]
// },
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
data:bValueData
}
]
};
myChart.setOption(option);
}
function getSeriesData(param,param1){
var returnData = [];
actionData = param.replace("[","").replace("]","").replace(" ","");
if(actionData != null && actionData != ""){
var data = actionData.split(",");//格式爲1;06--->1表示數量,06表示月份或者某一天
for (var i = 0; i < data.length; i++) {
var obj = {};
if(data[i]){
var objct = data[i].split(":");
obj.name = objct[0];
nameData.push(objct[0]);
obj.type = 'bar';
obj.barMaxWidth = 100;//最大寬度
obj.barGap = 0;
obj.label = labelOption;
var values = objct[1].split(";");
var newValues = [];
if(values){
for (var j = 0; j < values.length; j++) {
if(values[j]){
// newValues.push(values[j].substring(0,values[j].length-1));
newValues.push(values[j]*1);
}else{
newValues.push(0);
}
}
}
obj.data = newValues;
returnData.push(obj);
}
}
}
return returnData;
}
//餅圖數據獲取
function getPieDate(param){
actionData = param.replace("[","").replace("]","").replace(" ","");
if(actionData != null && actionData != ""){
var data = actionData.split(",");//格式爲1;06--->1表示數量,06表示月份或者某一天
for(var i = 0;i<data.length;i++){
objs = data[i].split(";");
for (var k = 0; k < objs.length; k++) {
var obj = {};
var objStr = objs[k].split(":");
obj.value = objStr[1];
obj.name = objStr[0];
if(i==0){
sValueData.push(obj);
}else{
bValueData.push(obj);
}
}
}
}
}
//切換圖表類型
function switchPage(aaa){
$(window).attr('location',"./indexStatistics1?indexKeyword="+chartType+"&isForX="+aaa+"&filesStr="+window.encodeURI(window.encodeURI(filesStr))+"&secUid="+secUid);
}
//選擇圖表
function selectByAreaUid(areaUid){
$(window).attr('location',"./indexStatistics1?indexKeyword="+chartType+"&isForX="+isForX+"&prjArea="+areaUid+"&filesStr="+window.encodeURI(window.encodeURI(filesStr))+"&secUid="+secUid);
}
//按年度選擇
function selectByAuditStatus(auditStatus){
$(window).attr('location',"./indexStatistics1?indexKeyword="+chartType+"&isForX="+isForX+"&year="+auditStatus+"&filesStr="+window.encodeURI(window.encodeURI(filesStr))+"&secUid="+secUid);
}
function addTable(url,name){
addModuleTab(url,name+"[指標庫管理]");
}
function showReportDialog(){
}
//查看數據列表
function showDataDialog(){
var isForX = $("#isForX").val();
var isForVluae = $("#isForVluae").val();
var href = "./indexStatistics3?status=1&indexKeyword="+chartType+"&isForX="+isForX+"&filesStr="+window.encodeURI(window.encodeURI(filesStr))+"&secUid="+secUid;
if(isForVluae){
href+="&isForVluae="+isForVluae;
}
if($('#searchAuditStatus')&&$('#searchAuditStatus').length>0){
var year = $('#searchAuditStatus').combobox('getValue');
href += ("&year="+year);
}
if($('#searchAreaUid')&&$('#searchAreaUid').length>0){
var prjArea = $('#searchAreaUid').combobox('getValue');
href += ("&prjArea="+prjArea);
}
$("#dataDialog").dialog({
title:'數據列表',
href:href,
modal: true,
iconCls:'icon-standard-user-red',
collapsible:true,
maximizable:true,
toMost:true,
iniframe : true,
width: 1300,
height: $(document.body).height() - 30,
onBeforeClose:function(){
},
onLoad:function(){
},
buttons:[{
text:'下載EXCEL',
iconCls:'icon-save',
handler:function(d){
setPrmNow();
$("#_download").trigger("click");
}
}]
});
$('#dataDialog').dialog('open');
}
function initSingleImageFun(zdyObj){
var url = "./iface/queryBingImage";
var postData = {};
postData["firstCountMapStr"] = zdyObj["indexLibTemplateIds"];
postData["secUid"] = zdyObj["secUid"];
postData["stdListLibId"] = stdListLibId;
postData["indexKeyword"] = zdyObj["indexkeywords"];
$.post(url,postData, function(datas) {
var data= $.parseJSON(datas);
if(data.returnCode != 1){
return false;
}
data = eval('('+data.data+')');
var myWidth = $('#container').css('width').slice(0,-2);
var height_frm = $(document.body).height();
getPieDateZdyFun(data.rows);
zdyCharts2(myWidth,height_frm,data.rows.length);
});
}
var zdySeries = new Array();
var zdyOptions = {};
function getPieDateZdyFun(data){
zdySeries = new Array();
var legendData = [];
for(var i = 0;i < data.length;i++){
var pract = data[i];
var practArr = new Array();
legendData[i] = pract[0]["stdListItemsName"];
for (var k = 0; k < pract.length; k++) {
var obj = {};
var entity = pract[k];
obj.value = entity["sums"];
obj.name = entity["practName"];
practArr.push(obj);
}
if(practArr.length == 0){
continue;
}
var start = (i+1)/(1+data.length)*100;
start = (i + 1) * (100/(1+data.length)) - 4 + "%";
var singleSeries = {
title:pract[0]["stdListItemsName"],
name:pract[0]["stdListItemsName"],
type:'pie',
radius: ['1%', '35%'],//圖片大小
center: [start+'%', '65%'],//-----這個屬性設置圖的上下左右的位置
label: {
normal: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
data:practArr
};
zdySeries.push(singleSeries);
}
var zdyTitle = "返回";
var iconUrl2 = 'image://web/images/act_left.png';
var showType = [];
zdyOptions = {
// title:[],
title : {
text: '工料機佔比',
subtext: '百分比餅圖',
x:'right'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:legendData //每一個圖表的實例,選中或者取消能夠顯示或者隱藏對應的餅圖
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: false},
dataView: {show: false, readOnly: false},//數據視圖(簡答的html表格形式的數據)
magicType: {show: false, type: []},//切換爲折線圖，切換爲柱狀圖
restore: {show: false},//還原
saveAsImage: {show: true},//保存爲圖片
myTool3: {//餅圖切換按鈕
//在餅圖中保存一個"返回"圖標和下載,點擊能夠切換到原來的圖樣,注意這個工具欄的名稱必須以my開頭,且不能和前面的myTool1,myTool2重複,不然會出現稀奇古怪的問題
show: true,
title: zdyTitle,
icon: iconUrl2,
onclick: function (){
var url = window.location.href;
$(window).attr('location',url);
}
},
}
},
series:zdySeries,
};
for (let i = 0; i < zdySeries.length; i++) {
/*zdyOptions.title[i] = {
text: "我是中國人名的世界",
left: (i + 1) * 19 - 4 + "%",
y: "10%",
textStyle: {
fontSize: 15,
rich: {
pp: {
fontWeight: "bold",
fontSize: 15,
width: "9",
align: "center"
}
}
},
};*/
// zdyOptions.series[i].title = "xxxx";
}
}
//餅圖
function zdyCharts2(myWidth,height_frm){
$('#container')[0].style.width = myWidth-50;
$('#container')[0].style.height = height_frm-50;
var myChart = echarts.init($('#container')[0]);
myChart.setOption(zdyOptions,true);
}
/**
* 加載單個圖表
* @returns
*/
function initBingImageFun(){
var echartsPie = echarts.init(document.getElementById('container'));
var postData = {};
var loadData = $("#indexStatisticsJson").val();
loadData = eval('('+loadData+')');
/*if(loadData && loadData.length> 0){
for(var i = 0;i < loadData.length;i++){
initSingleImageFun(loadData[i]);
}
}*/
initTotalImageFun(loadData);
}
/**
* 加載全部圖表
* @param arr
* @returns
*/
function initTotalImageFun(arr){
var url = "./iface/queryBingImage";
var postData = {};
var firstCountMapStrArr = new Array();
var secUidArr = new Array();
var indexKeywordArr = new Array();
var professionTypeArr = new Array();
for(var i = 0;i < arr.length;i++){
var zdyObj = arr[i];
firstCountMapStrArr.push(zdyObj["indexLibTemplateIds"]);
secUidArr.push(zdyObj["secUid"]);
indexKeywordArr.push(zdyObj["indexkeywords"]);
professionTypeArr.push(zdyObj["name"]);
}
postData["allIndexLibTemplateIds"] = firstCountMapStrArr.join("@");
postData["allSecUids"] = secUidArr.join("@");
postData["stdListLibId"] = stdListLibId;
postData["allIndexkeywords"] = indexKeywordArr.join("@");
postData["professionType"] = professionTypeArr.join("@");
$.post(url,postData, function(datas) {
var data= $.parseJSON(datas);
if(data.returnCode != 1){
return false;
}
data = eval('('+data.data+')');
var myWidth = $('#container').css('width').slice(0,-2);
var height_frm = $(document.body).height();
getPieDateZdyFun(data.rows);
zdyCharts2(myWidth,height_frm);
});
}
charts1爲柱狀圖:css
點擊myTool1:html
點擊myTool2:java
點擊返回以後,會從新刷新頁面,到原來的柱狀圖web
方法charts2餅圖的效果圖:app
相關文章
- 1. echarts餅圖顯示爲環形圖
- 2. Echarts的餅狀圖變成環形圖
- 3. ECharts-餅狀圖
- 4. Echarts柱狀圖，餅狀圖
- 5. struts上傳圖片和顯示圖片以及下載圖片
- 6. Echarts餅圖,以及顯示百分比的文字
- 7. EXTJS6.0 餅圖圖例顯示以及百分比顯示
- 8. echarts 餅狀圖(環形圖) 筆記
- 9. Echarts 餅狀圖 基礎圖形
- 10. ECharts之餅狀圖
- 更多相關文章...
- • R 繪圖 - 餅圖 - R 語言教程
- • Markdown 圖片 - Markdown 教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章