asp.net下应用Echarts饼图

来源：互联网发布：有道词典无法连接网络编辑：程序博客网时间：2024/05/22 00:42

最近要做一个统计功能，列表难以表现，就采用了百度echarts饼图来表示。

百度Echarts教程

这是百度的饼图实例饼图实例

前台JS代码：

<div id="main" style="height: 400px; width: 70%; margin: 20px 0 0 20px;"></div>
<script src="echarts-2.2.7/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script src="echarts-2.2.7/echarts-2.2.7/doc/asset/js/esl/esl.js"></script>
<div id="chart">
</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
function getData(obj) {
var uid = obj.value;
if (uid != "") {
$.ajax({
url: "chart_chaxun.aspx/BindPieData",
type: "post",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{ \"id\": '" + uid + "' }",
success: function (data) {
myChart.clear(document.getElementById('main'));
var m = data.d.split('#')[0].split(',');
var n = data.d.split('#')[1].split(',');
var eLegend = new Array();
var eSeries = new Array();
for (var i = 0; i < m.length; i++) {
eLegend.push(m[i]);
eSeries.push({
value: n[i],
name: m[i]
});
}
var option = {
title: {
text: '记录图表',
subtext: '以天为单位',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: []
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: []
}
]
};
option.legend.data = eLegend;
option.series[0].data = eSeries;
myChart.setOption(option);
}
});
}
}
</script>

注意以上代码里面data和series中的data是array类型。（之前没有详细看配置手册，剩下的就不说了

），顺便附上百度echarts的参考手册参考手册。

myCharts.clear（....）是为了清除之前的数据，不让数据叠加显示。更多的方法参考参考手册

C#代码：

var legend = string.Empty;
var series = string.Empty;
for (int i = 0; i < dt.Rows.Count; i++)
{
legend += "" + dt.Rows[i]["time"].ToString() + ",";
series += "" + dt.Rows[i]["count"].ToString() + ",";
}
return legend.TrimEnd(',') + "#" + series.TrimEnd(',');

运行后台的图片：

0 0