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 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安装和Hello，World编写
- 2. 重磅解读：K8s Cluster Autoscaler模块及对应华为云插件Deep Dive
- 3. 鸿蒙学习笔记2（永不断更）
- 4. static关键字 和构造代码块
- 5. JVM笔记
- 6. 无法启动 C/C++ 语言服务器。IntelliSense 功能将被禁用。错误: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回码状态含义
- 8. Java树形结构递归（以时间换空间）和非递归（以空间换时间）
- 9. 数据预处理---缺失值
- 10. 都要2021年了，现代C++有什么值得我们学习的？
欢迎关注本站公众号,获取更多信息
相关文章