版权声明:本文为博主原创文章,发现错误请谅解并提醒博主。 https://blog.csdn.net/qq_36430463/article/details/79557156
饼状图
<div id="yewuyuan"></div>
dataPic('yewuyuan');
function dataPic(x){
var my=$("#my").val();
var you=$("#you").val();
var pieEchart = echarts.init(document.getElementById(x));
// 指定图表的配置项和数据
var pieoption = {
title : {
text: '回款比例图',
x:'left',
textStyle:{
color:'#FFFFFF',
fontSize:25
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} 元"
},
legend: {
orient : 'vertical',
x : 'left',
top:40,
itemWidth:70,
itemHeight:30,
formatter: '{name}',
textStyle:{
color: '#FFF000'
},
data:[{name:'已回款',icon:'rect'},{name:'未回款',icon:'rect'}] }
,
calculable : true,
series : [
{
name:'回款比例图',
type:'pie',
radius : '70%',//饼图的半径大小
center: ['60%', '60%'],//饼图的位置
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 16 //文字的字体大小
},
formatter:'{d}%'
}
},
data:[
{value:my,name:'已回款',itemStyle:{color:'#FE0000'}},
{value:you,name:'未回款',itemStyle:{color:'#F29700'}}
]
}
],
backgroundColor:"#000"
};
console.info(pieEchart);
// 使用刚指定的配置项和数据显示图表。
pieEchart.setOption(pieoption,true);
}
折线图
<div id="yewuyuan"></div>
var arx=${arx};
var title=${title};
var series=${series};
function dataTable(m){
var myChart = echarts.init(document.getElementById(m));
// Generate data
function option1(title,x,date){
option = {
title: {
text: '销售回款图',
},
tooltip: {
trigger: 'axis'
},
legend: {
data:title,
right:0,
itemGap: 5,
orient: 'vertical'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: x,
axisLabel :{
interval:0
}
},
yAxis: {
type: 'value',
offset:'0',
axisLabel: {
//margin:-10, 刻度数值在Y轴位置
formatter: function(value)
{
return value/1000+"k";
}
}
},
series: date
};
}
option1(title,arx,series);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,window.onresize = myChart.resize);
}
dataTable('yewuyuan');
异步加载动态数据图像不显示问题
1方法:setOption属性添加true 如spieEchart.setOption(pieoption,true);
2方法:$(“.box2”).empty();//删除所有子元素
//异步加载页面
function asynLoadDiv(url) {
$(".box2").empty();//删除所有子元素
$(".box2").load(url, function(response, status, xhr) {
if (status == 'success') {
} else {
layer.msg('请检查网络连接是否正常!',{time:2000});
}
});
}