> 信息中心 >

echarts3.8.5.js 饼图动态加载 界面出现丢失

来源:互联网 编辑:杨美丽

有网友碰到过这样的问题:echarts3.8.5.js 饼图动态加载 界面出现丢失,问题详细内容为:

丢失说明图片,

动态加载数据后出现占比说明栏位丢失看不见,

差异处:
动态获取数据方式是用Ajax读取数据;
固定数据方式是直接将数据写死;
代码没有其他差异,动态就不能显示 占比说明 ;固定方式能显示 占比说明 ,

============动态获取数据方式====================================

var dom = document.getElementById("ScrapPic"); var myChart = echarts.init(dom); var app = {}; option = null; //------------------------------------------------------------- /** 图标所需数据
*/

var Pirdata = {
id: 'ScrapPic',
value: [],//[12, 32, 54, 12],
legend:[],//['NB-Commercial ','NB-Consumer ','Thin Client ','人质'],//['],
title: '报废客户占比:'
};

$.ajax({
type: "post",
async: false,
url: "../../Service/ScrapReportHandler.ashx?FunName=GetScrapReportFirstFloorEcharts",
dataType: "json",
success: function (data) {
if (data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
Pirdata.value.push( [data[i].ScrapQty]);
Pirdata.legend.push([$.trim(data[i].Process)]);
}
}
}
},
error: function (errorMsg) {
myChart.hideLoading();
}
});

////////////////////////////////////////

/**

数据处理
*/
var seriesData = []
Pirdata.value.forEach(function(item, index) {
seriesData.push({
value: item,
name: Pirdata.legend[index]
})
})
////////////////////////////////////////

var option = {
backgroundColor: '#fff',
title: {
x: '2%',
y: '2%',
textStyle: {
fontWeight: 400,
fontSize: 16,
color: '#687284'
},
text: Pirdata.title
},
tooltip: {
trigger: 'item',
show: Pirdata.tooltipShow === false ? false : true
// formatter: "{b}: {c} ({d}%)"
},
legend: {
orient: 'horizontal',
top: 40,
icon: 'circle',
selectedMode: false,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
borderRadius: 6,
data: Pirdata.legend
},
series: [{
type: 'pie',
// clickable:false,
// selectedMode: 'single',//单点击设置
hoverAnimation: Pirdata.hoverAnimation === false ? false : true,
radius: ['20%', '57%'],
color: Pirdata.color,
top:80,
label: {
normal: {
position: 'inner',
// formatter: '{d}%',
formatter: function(param) {
if (!param.percent) return ''
var f = Math.round(param.percent * 10) / 10;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 1) {
s += '0';
}
return s + '%';
},
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
labelLine: {
normal: {
show: false
}
},
data: seriesData
}]
};

if (option && typeof option === "object") { myChart.setOption(option, true); }

============固定数据方式====================================

var dom = document.getElementById("ScrapPic"); var myChart = echarts.init(dom); var app = {}; option = null; //------------------------------------------------------------- /** 图标所需数据
*/

var Pirdata = {
id: 'ScrapPic',
value: [12, 32, 54, 12],
legend:['NB-Commercial ','NB-Consumer ','Thin Client ','人质'],
title: '报废客户占比:'
};

//$.ajax({
// type: "post",
// async: false,
// url: "../../Service/ScrapReportHandler.ashx?FunName=GetScrapReportFirstFloorEcharts",
// dataType: "json",
// success: function (data) {
// if (data) {
// if (data.length > 0) {
// for (var i = 0; i < data.length; i++) {
// Pirdata.value.push( [data[i].ScrapQty]);
// Pirdata.legend.push([$.trim(data[i].Process)]);
// }
// }
// }
// },
// error: function (errorMsg) {
// myChart.hideLoading();
// }
//});

////////////////////////////////////////

/**

数据处理
*/
var seriesData = []
Pirdata.value.forEach(function(item, index) {
seriesData.push({
value: item,
name: Pirdata.legend[index]
})
})
////////////////////////////////////////

var option = {
backgroundColor: '#fff',
title: {
x: '2%',
y: '2%',
textStyle: {
fontWeight: 400,
fontSize: 16,
color: '#687284'
},
text: Pirdata.title
},
tooltip: {
trigger: 'item',
show: Pirdata.tooltipShow === false ? false : true
// formatter: "{b}: {c} ({d}%)"
},
legend: {
orient: 'horizontal',
top: 40,
icon: 'circle',
selectedMode: false,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
borderRadius: 6,
data: Pirdata.legend
},
series: [{
type: 'pie',
// clickable:false,
// selectedMode: 'single',//单点击设置
hoverAnimation: Pirdata.hoverAnimation === false ? false : true,
radius: ['20%', '57%'],
color: Pirdata.color,
top:80,
label: {
normal: {
position: 'inner',
// formatter: '{d}%',
formatter: function(param) {
if (!param.percent) return ''
var f = Math.round(param.percent * 10) / 10;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 1) {
s += '0';
}
return s + '%';
},
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
labelLine: {
normal: {
show: false
}
},
data: seriesData
}]
};

if (option && typeof option === "object") { myChart.setOption(option, true); } echarts ,我搜你通过互联网收集了相关的一些解决方案,希望对有过相同或者相似问题的网友提供帮助,具体如下:

解决方案1:
应该是你的css样式的问题 收获园豆:10
============================================
开发者工具中检查下丢失的dom是否存在
============================================
@青青子衿619:
Pirdata.value.push( [data[i].ScrapQty]);
Pirdata.legend.push([$.trim(data[i].Process)]);
这个写错了,多了[] 符号,

echarts.js 一个页面如何加载多个表 我想加载两个...

答: [可视化数据图例1...] [可视化数据图例2...] 分开初始化,.init(div); function showLine() { var echartBar = echarts.init(document.getElementById("stackbar")); var option1 = { title:{ text:'test', subtext:'折线图测试', x:'center', ...

echarts.js饼状图之间的间隔怎么设置

答: series.itemStyle.borderColor,series.itemStyle.borderWidth,然后你会发现边框包裹了整个分块,这个时候把这个图表的背景色调成和series.itemStyle.borderColor相同,就形成了环形图每个版块之间的分隔。

使用echarts 饼图时出现的js错误 该如何去调试

答:1 require.config({ 2 paths: { 3 "echarts": "/Content/js/echarts-2.0.4/build/echarts", 4 "echarts/chart/pie": "/Content/js/echarts-2.0.4/build/echarts" 5 } 6 }); 7 // 使用 8 require( 9 [ 10 'echarts', 11 'echarts/chart/pie' // ...

echart3.0从echarts.js改为echarts.min.js,饼图的...

答:require.config({ paths:{ echarts:'./js/echarts', 'echarts/chart/bar' : './js/echarts', 'echarts/chart/pie': './js/echarts' } }); 才出现的问题 而是下边的配置确实正常,不过加载JS过多 require.config({ packages: [ { name: 'echarts'...

echarts 一个页面同时加载两个饼图,只显示一个,...

答:你js是复制的吧, 方法名字没改,所以只显示一个

我用的echarts做的饼图,一个页面中写了2个 ,页面...

答:绘图的时候会初始化两个div区域会指定大小,你看一下你2个div指定的height高度和页面的高度有没有冲突,可能是2个div的高度超过了你页面其他地方设置的height,导致只能显示出一半

echarts怎么控制圆饼图的大小

答:上面的答非所问~~ 已测试~ radius : '55%', ------------这个属性设置图的大小 center: ['50%', '60%'],-----这个属性设置图的上下左右的位置

echarts 饼状图IE兼容性问题,求助

答:ECharts所输出的那些代表数据的图形(如饼状图每一个扇形,折线图上的拐点,柱状图上的柱形等)都是可拖拽的(默认重计算功能默认关闭,需配置开启),并且拖拽后能智能的产生不同的数据重整效果,如把扇形拖出饼图,被拖出的数据成为一个“数据...

Echarts关于饼图data中数据如何动态填充?

答:var chart = eval('[ { "counts":3, "region":"东城区" }, { "counts":2, "region":"朝阳区" }, { "counts":5, "region":"海淀区" } ]');var length = chart.length;var arrays = new Array();for(var i = 0l i < length; i++){ arrays[i] = { v...

echarts饼状图不显示title

答:你下载的是不是精简版? 精简版说自己只有折线图柱状图饼图,它就真的只有这些,连标题、图例、tooltip什么什么都没有的。如果你想要小一点的echarts,建议你使用定制功能。

echarts.js一个页面如何加载多个图表?

js文件里(这里也可以和js平级,看自已的喜好)。3、在html文件里用script引用echarts文件... 加载什么图,比如饼图就是pie,柱状图就是bar,地图就是map等。5、注意这个步骤:两个红...

ECharts3怎么加载china.js地图?

3与echarts2区别:1、js文件:首先是js文件,echarts3做了很大的优化,在echarts2中,对各种... echarts2中,require是作为模块化加载的入口,在使用过程中关于路径配置经常会出现问题...

ECharts3 怎么加载 china.js 地图

: '../../Scripts/js/echarts'后面的目录同即可。 echarts地图怎么引到项目中 引用相关的文件后可能还会出现很多的小问题,主要去看看js文件目录是否正确。 echarts地...

echarts.js 一个页面如何加载多个表 我想加载两个饼图 为什么只...

); var myChartTwo = echarts.init(document.getElementById('b')); 3.配置各自的图表数据... ); 这样就可以显示出来两个了,不过记得给两个div定义高宽,还有引用echarts.js

使用echarts 饼图时出现的js错误 该如何去调试

: "/Content/js/echarts-2.0.4/build/echarts" 5 } 6 }); 7 // 使用 8 require( 9 ... 加载bar模块,按需加载 12 ], 13 function (ec) { 14 // 基于准备好的dom,初始化echarts...

echarts 一个页面同时加载两个饼图,只显示一个,是什么原因!?求...

我也遇到这个问题,。。 解决办法: JS 定义时 定义2个不同的容器:container1、container2, 最后容器里写入的时候写不同的容器container,这样就可以显示了!

如何优化echarts all.js的加载时间

你好。根据你的描述:你没有给出具体的echarts.js 与 echarts-plain.js句子,无法给你判断出这两个区别,请确认并完善提问描述,我会尽快回复你。

Echarts关于饼图data中数据如何动态填充?

后台代码: Map<String , Integer> map = new HashMap<String , Integer>(); map.put("一月标", 12); map.put("六月标", 4); map.put("三月...

Echarts关于饼图data中数据如何动态填充?

chart = eval('[ { "counts":3, "region&qu... "region":"朝阳区" }, { "counts":5,&...


请注意,本站信息均收集自互联网,相关信息仅供参考,医疗等重要信息请以正规途径为最终意见,本站不承担任何责任!

www.wosoni.com false 互联网 http://www.wosoni.com/blogcnk/mm/ccdflf.html report 5636 解决方案1:应该是你的css样式的问题收获园豆:10============================================开发者工具中检查下丢失的dom是否存在============================================@青青子衿619:Pirdata.value.push( [data[i].ScrapQty]);Pirdata.legend.push([$.trim(data[i].Process)]);这个写错了,多了[]

热门图片