前言：
今天姐妹们对“ajax序号例子”大体比较重视，你们都想要学习一些“ajax序号例子”的相关内容。那么小编同时在网络上网罗了一些关于“ajax序号例子””的相关知识，希望咱们能喜欢，兄弟们一起来学习一下吧！效果图js代码
var myChart = echarts.init(document.getElementById('TrendMap'));
// 显示标题，图例和空的坐标轴
$.ajax({
type:"POST",
url:"/crm/test/data",
async:false,
cache:false,
success:function(data){
myChart.setOption({
title:{
text:"单位：百万(人民币)",
textStyle:{
fontSize:12, // 让字体变大
fontWeight:''
}
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['保费','赔款'],
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: true,lang:['数据视图','关闭'],optionToContent: function (opt) {
var colName = "序号";
var typeName = "月份";
var dataview = opt.toolbox[0].feature.dataView; //获取dataview
var table = '<div style="position:absolute;top: 5px;left: 0px;right: 0px;line-height: 1.4em;text-align:center;font-size:14px;"></div>'
table += getTable(opt,colName,typeName);
return table;
}},
magicType : {show: true, type: ['line', 'bar']},
saveAsImage : {show: true,name:"保费,赔款展示图"}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : data.data.countDate,
axisLabel:{
interval:0, //不隔着显示
rotate:-30,
textStyle:{
fontSize:10 // 让字体变大
}
}
}
],
yAxis : [
{
type : 'value',
axisLabel:{
formatter:function(params){
var value =params.toString();
value = value.substring(0,value.length-6);
return value;
},
textStyle:{
fontSize:10 // 让字体变大
}
}
}
],
series : [
{
name:'保费',
type:'line',
smooth:true,
itemStyle: {normal: { color:'#47b39b',areaStyle: {type: 'default'}}},
data:data.data.allPremium
},
{
name:'赔款',
type:'line',
smooth:true,
itemStyle: {normal: {color:'#ffc153',areaStyle: {type: 'default'}}},
data:data.data.allDutyPaid
}
],
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 90, // 左边在 10% 的位置。
end: 100 , // 右边在 60% 的位置。
xAxisIndex:0
}
],
grid:{
left:'12%',//组件距离容器左边的距离
right:'10%',
bottom:'23%',
top:'12%'
}
});
},
error:function(error){
console.log(error);
}
})
function getTable(opt,colName,typeName){
var axisData = opt.xAxis[0].data;//获取图形的data数组
var series = opt.series;//获取series
var num = 0;//记录序号
var sum = new Array();//获取合计数组（根据对应的系数生成相应数量的sum）
for(var i=0; i<series.length; i++){
sum[i] = 0;
}
var table = '<table class="table table-striped table-bordered"><thead><tr>'
+ '<th>'+colName+'</th>'
+ '<th>'+typeName+'</th>';
for(var i=0; i<series.length;i++){
table += '<th>'+series[i].name+'</th>'
}
table += '</tr></thead><tbody>';
for (var i = axisData.length-1 ;i>=0; i--) {
num += 1;
for(var n=0;n<series.length;n++){
if(series[n].data[i]){
sum[n] += Number(series[n].data[i]);
}else{
sum[n] += Number(0);
}
}
table += '<tr>'
+ '<td>' + num + '</td>'
+ '<td>' + axisData[i] + '</td>';
for(var j=0;j<series.length;j++){
if(series[j].data[i]){
table += '<td>' + formatNum(series[j].data[i]) + '</td>';
}else{
table += '<td>' + 0 + '</td>';
}
}
table += '</tr>';
}
//最后一行加上合计
table += '<tr>'+ '<td>' + (num+1) + '</td>' + '<td>合计</td>';
for(var n=0;n<series.length;n++){
if(String(sum[n]).indexOf(".")>-1)
table += '<td>' + formatNum((Number(sum[n])).toFixed(2)) + '</td>';
else
table += '<td>' + formatNum(Number(sum[n])) + '</td>';
}
table += '</tr></tbody></table>';
return table;
}
//千分位显示
function formatNum(strNum) {
if(strNum.length <= 3) {
return strNum;
}
if(!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
return strNum;
}
var a = RegExp.$1,
b = RegExp.$2,
c = RegExp.$3;
var re = new RegExp();
re.compile("(\\d)(\\d{3})(,|$)");
while(re.test(b)) {
b = b.replace(re, "$1,$2$3");
}
return a + "" + b + "" + c;
}
不得不说，echarts的数据视图的默认展示很难看，如果需要很好的展示，需要自己写一个方法，来重新展示调用 function getTable(),表格的class使用的是bootstrap的如果里面的数据想用千分位展示，则在需要展现的数据上调用formatNum()方法
数据视图里的数据我是倒序排列的，去除“刷新按钮”toolbox“”{lang:['数据视图','关闭']}
存为图片的图片名在saveAsImage的name的属性设置
老实说，echarts制作图表很方便，而且很美观，功能还多，兼容大部分的浏览器，确实是一个很好的前端制图工具，只是配置项很多，需要自己去慢慢的钻研，学会使用它，每一项都可以自定义，还有很多的触发事件，现在只是知道echarts的九牛一毛还是需要多多学习
标签： #ajax序号例子
