我用了vue.js
也可以不用
<script>
$(function () {
var vm = new Vue(
{
el: '#app',
data: {
},
mounted: function () {
_this = this;
var list = [];
var dataname = [];
$.ajax({
type: "Post",
url: "RealTime.aspx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
a = JSON.parse(data.d);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('Count'));
$.each(a, function (i, item) {
var series = {
name: item.Name, type: "line", stack: "次数", data: [item.Jan, item.Feb, item.Mar, item.Apr, item.May, item.Jun, item.Jul, item.Aug, item.Sept, item.Oct, item.Nov, item.Dec]
};
dataname.push(item.Name);
list.push(series);
});
// 指定图表的配置项和数据
option = {
title: {
text: '同行业部门证书发布分析',
subtext: '数据来自今年内当前部门同行业发布证书数量'
},
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
if(i===0){
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr +='<div>';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
//圆点后面显示的文本
htmlStr += seriesName + '：' + value + '次';
htmlStr += '</div>';
}
return htmlStr;
}
},
legend: {
data: dataname
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {//工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
feature: {//各工具配置项。
dataView: {
show: true,
title: '数据表格',
readOnly: true,
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐标数据
var series = opt.series; //折线图数据
var tdHeads = '<td style="padding: 10 10px">时间</td>'; //表头
var tdBodys = ''; //数据
series.forEach(function (item) {
//组装表头
tdHeads += '<td style="padding: 10 10px">'+item.name+'</td>';
});
var table = '<table class="table table-border table-bordered table-bg table-hover table-sort"><tbody><tr>' + tdHeads + ' </tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
//组装表数据
tdBodys += '<td>'+series[j].data[i]+'</td>';
}
table += '<tr><td style="padding: 0 10px">'+axisData[i]+'</td>'+tdBodys+'</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
magicType:{
show:true,
type: ['line', 'bar', 'stack', 'tiled', 'pie']
},
restore: {//配置项还原。
show: true
},
saveAsImage: {//保存为图片。
show: true
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月', ]
},
yAxis: {
type: 'value',
axisLabel: { formatter: '{value}次' }
},
series: list
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error: function (err) {
alert(err);
}
});
},
methods: {
}
})
})
</script>
<div style="height:100%">
<div id="Count" style="width:100%;height:380px;"></div>
</div>
