关于echarts绘制饼图 - 开源中国社区
当前访客身份：游客 [
当前位置：
你好，想跟你请教个问题：是这样的我想绘制一个简单的饼图，在echarts官网的实例编辑器中，能正常显示，而在实际运用中未显示出来，经查看，width=0.同一页面中折线图能正常显示。请问我能从什么方向修改呢？谢谢
option代码为
option = {
& legend: { & & & & orient : 'vertical', & & & & x : 'left', & & & & data:[&test1&] & & }, & series : [ & & & & { & & & & & & type:'pie', & & & & & & data:[ & & & & & & & {value:100, name:&test1&} & & & & & & ] & & & & } & & ], & toolbox: { & & & & show : true, & & & & feature : { & & & & & & restore : {show: true}, & & & & & & saveAsImage : {show: true} & & & & } & & }, && & & title : { & & & & text: '某站点用户访问来源', & & & & subtext: '纯属虚构', & & & & x:'center' & & }, & & tooltip : { & & & & formatter: &{a} &br/&{b} : {c} ({d}%)&, trigger: &item& & & } };
共有1个答案
<span class="a_vote_num" id="a_vote_num_
--- 共有 2 条评论 ---
我将代码更新到最新版本，发现确实有未设置width的报错提升，认真分析代码后，解决了该问题
再次谢谢帮助
(2年前)&nbsp&
从上边的截图可以看到，我创建的dom元素id=showPie的dom元素是存在width的
width=1000height=250
(2年前)&nbsp&
更多开发者职位上
有什么技术问题吗？
qwe009...的其它问题
类似的话题echarts+asp.net实现饼图的例子-jquery-网页制作-壹聚教程网echarts+asp.net实现饼图的例子
echarts是js需要json数据才可以生成图表了，这里我们来看一篇关于echarts+asp.net实现饼图例子，具体的操作细节如下所示。
1、服务端获取数据：
private void GetCategoryByYear_Pie(string sYear,HttpContext context)
&& List&PieSeries& lstPieSeries = new List&PieSeries&();
&& List&string& lstNames = new List&string&();
&& DbProviderFactory dbf = DbProviderFactories.GetFactory();
&& using (IDbConnection con = dbf.CreateConnection())
&&&&&& con.Open();
&&&&&& DataTable dtRecord = new DataTable();
&&&&&& string sSQL;
&&&&&& sSQL = &SELECT ISNULL(CATEGORY,'N/A') Category,CAST(COUNT(1) AS INT) Num FROM vwTEST& + ControlChars.CrLf
&&&&&& + &where DATEPART(yy,CASE_DATE)='& + sYear + &' & + ControlChars.CrLf;
&&&&&& sSQL += &GROUP BY CATEGORY ORDER BY N&;
&&&&&& using (IDbCommand cmd = con.CreateCommand())
& mandText = sSQL;
& using (DbDataAdapter da = dbf.CreateDataAdapter())
&&&&& ((IDbDataAdapter)da).SelectCommand =
&&&&& da.Fill(dtRecord);
(DataRow row in dtRecord.Rows)
& lstNames.Add(Sql.ToString(row[&Category&]));
& lstPieSeries.Add(new PieSeries { value = Sql.ToInteger(row[&Num&]), name = Sql.ToString(row[&Category&]) });
&& var newObj = new
&&&&&& names = lstNames,
&&&&&& pieSeries = lstPieSeries
&& context.htm = htm&(newObj.ToJson());
&& context.Response.End();
其中用到了一个PieSeries类：
class PieSeries
&& public int value
&& public string name
服务端获取到参数，然后调用上面的方法：
case &caseyearcategorypie&:
&string sYear = context.Request[&Year&];
&if (!string.IsNullOrEmpty(sYear))
&&&& GetCaseCategoryByYear_Pie(sYear,context);
2、前端页面:
&div style=&align-content:&&
& &div id=&pieCategoryChart& class='&%# IsMobile?&w98p&:&w49p fLeft& %&' style=&height: 420border: 1px solid #d8d8d8;margin-top: 14&&
&&& &/div&
js的ajax调用服务端，并传入参数：
function DrawCategoryPie(YEAR) {
&&& var myChart = echarts.init(document.getElementById('pieCategoryChart'));
&&&&&&& myChart.showLoading({
&& text: &Unload...&
&&&&&&& });
&&&&&&& var options = {
&& title: {
&&&&&& text: 'Category%',
&&&&&& x: 'center',
&&&&&& textStyle: {
& color: '#444',
& fontSize: 18
&& tooltip: {
&&&&&& trigger: 'item',
&&&&&& formatter: '{b} : {c} ({d}%)',
&&&&&& show: true
&& toolbox: {
&&&&&& show: true,
&&&&&& x: 'right',
&&&&&& y: '&%# IsMobile? &bottom&:&top&%&',
&&&&&& feature: {
& dataView: { show: true, readOnly: false },
& restore: { show: true },
& saveAsImage: { show: true }
&& series: [
& name: name || &&,
& type: 'pie',
& radius: '50%',
& center: ['50%', '50%'],
& startAngle: 0,
& itemStyle: {
&&&&& normal: {
&&&& show: true, position: 'outer',
&&&& formatter: '{b} : {c} ({d}%)',
& emphasis: {
&&&&& shadowBlur: 10,
&&&&& shadowOffsetX: 0,
&&&&& shadowColor: 'rgba(0, 0, 0, 0.5)'
& data: []
&&&&&&& };
&&&&&&& $.ajax({
&& type: &post&,
&& async: false,
&& url: 'HttpHandler.ashx',
&& dataType: &json&,
&& data: { Type: 'yearcategorypie', Year: YEAR},
&& success: function (result) {
&&&&&& if (result) {
& options.series[0].data = result.pieS
& myChart.hideLoading();
& myChart.setOption(options);
&& error: function (errorMsg) {
&&&&&& //alert(&Failed!&);
&&&&&&& });
&&&&&&& myChart.hideLoading();
上一页：没有了 &&&&&下一页：相关内容echarts-master 图表显示的javascript库，可以支持多种 形式趋势图，饼状图等！ Develop 238万源代码下载-
&文件名称: echarts-master
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 12070 KB
&&上传时间:
&&下载次数: 3
&&提 供 者:
&详细说明：图表显示的javascript库，可以支持多种图标形式趋势图，饼状图等！-Chart javascript library display can support a variety of icons trends, pie charts, etc.!
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&echarts-master&&..............\.gitignore&&..............\.jshintignore&&..............\.jshintrc&&..............\LICENSE.txt&&..............\README.md&&..............\build&&..............\.....\build.bat&&..............\.....\build.js&&..............\.....\build.sh&&..............\.....\config-tpl.js&&..............\.....\echarts-map.js&&..............\.....\echarts-original-map.js&&..............\.....\echarts-original.js&&..............\.....\echarts-plain-map.js&&..............\.....\echarts-plain-original-map.js&&..............\.....\echarts-plain-original.js&&..............\.....\echarts-plain.js&&..............\.....\echarts.js&&..............\.....\r.js&&..............\.....\wrap&&..............\.....\....\almond.js&&..............\.....\....\end-map.js&&..............\.....\....\end.js&&..............\.....\....\start.js&&..............\doc&&..............\...\asset&&..............\...\.....\css&&..............\...\.....\...\bootstrap-responsive.css&&..............\...\.....\...\bootstrap.css&&..............\...\.....\...\codemirror.css&&..............\...\.....\...\echartsHome.css&&..............\...\.....\...\flexslider.css&&..............\...\.....\...\monokai.css&&..............\...\.....\ico&&..............\...\.....\...\favicon.png&&..............\...\.....\img&&..............\...\.....\...\architecture.png&&..............\...\.....\...\bg_direction_nav.png&&..............\...\.....\...\blacktocat.png&&..............\...\.....\...\custom.png&&..............\...\.....\...\dataDancing.mp3&&..............\...\.....\...\dataRange.gif&&..............\...\.....\...\dataView.gif&&..............\...\.....\...\datazoom.gif&&..............\...\.....\...\device.png&&..............\...\.....\...\doc&&..............\...\.....\...\...\axisBoundaryGap.png&&..............\...\.....\...\...\axisBoundaryGap1.jpg&&..............\...\.....\...\...\axisDetail.jpg&&..............\...\.....\...\...\axisDetail.png&&..............\...\.....\...\...\axisScale1.png&&..............\...\.....\...\...\axisScale2.png&&..............\...\.....\...\...\charts.jpg&&..............\...\.....\...\...\dataRange.png&&..............\...\.....\...\...\dataZoom.png&&..............\...\.....\...\...\grid.jpg&&..............\...\.....\...\...\legend.png&&..............\...\.....\...\...\multiControl.jpg&&..............\...\.....\...\...\title.png&&..............\...\.....\...\...\toolbox.png&&..............\...\.....\...\...\tooltip1.jpg&&..............\...\.....\...\...\tooltip2.jpg&&..............\...\.....\...\draggable.gif&&..............\...\.....\...\dynamic1.gif&&..............\...\.....\...\dynamic2.gif&&..............\...\.....\...\example&&..............\...\.....\...\.......\axis.png&&..............\...\.....\...\.......\bar.png&&..............\...\.....\...\.......\bar1.png&&..............\...\.....\...\.......\bar10.png&&..............\...\.....\...\.......\bar2.png&&..............\...\.....\...\.......\bar3.png&&..............\...\.....\...\.......\bar4.png&&..............\...\.....\...\.......\bar5.png&&..............\...\.....\...\.......\bar6.png&&..............\...\.....\...\.......\bar7.png&&..............\...\.....\...\.......\bar8.png&&..............\...\.....\...\.......\bar9.png&&..............\...\.....\...\.......\cache.png&&..............\...\.....\...\.......\chord.png&&..............\...\.....\...\.......\chord1.png&&..............\...\.....\...\.......\chord2.png&&..............\...\.....\...\.......\dataRange.png&&..............\...\.....\...\.......\dataRange1.png&&..............\...\.....\...\.......\dataZoom.png&&..............\...\.....\...\.......\dataZoom1.png&&..............\...\.....\...\.......\dynamicLineBar.png&&..............\...\.....\...\.......\dynamicPieRadar.png&&..............\...\.....\...\.......\dynamicScatterK.png&&..............\...\.....\...\.......\event.png&&..............\...\.....\...\.......\force1.png&&..............\...\.....\...\.......\import.png&&..............\...\.....\...\.......\k.png&&..............\...\.....\...\.......\k1.png&&..............\...\.....\...\.......\lasagna.png&&..............\...\.....\...\.......\line.png&&..............\...\.....\...\.......\line1.png&&..............\...\.....\...\.......\line2.png&&..............\...\.....\...\.......\line3.png
&近期下载过的用户:
&相关搜索:
&输入关键字，在本站238万海量源码库中尽情搜索：注：ECHarts的相关文件请到ECharts官网下载，下载地址：/download.html
&div style="align-content:"&
&div id="pieCategoryChart" class='&%# IsMobile?"w98p":"w49p fLeft" %&' style="height: 420border: 1px solid #d8d8d8;margin-top: 14"&&/div&
&2.JavaScript
1 &script src='&%= Application["rootURL"] %&JS/static/echarts/echarts.js'&&/script&
function DrawCategoryPie(YEAR) {
var myChart = echarts.init(document.getElementById('pieCategoryChart'));
myChart.showLoading({
text: "Unload..."
var options = {
text: 'Category%',
x: 'center',
textStyle: {
color: '#444',
fontSize: 18
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
show: true
toolbox: {
show: true,
x: 'right',
y: '&%# IsMobile? "bottom":"top"%&',
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
name: name || "",
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
startAngle: 0,
itemStyle: {
show: true, position: 'outer',
formatter: '{b} : {c} ({d}%)',
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
type: "post",
async: false,
url: 'HttpHandler.ashx',
dataType: "json",
data: { Type: 'yearcategorypie', Year: YEAR},
success: function (result) {
if (result) {
options.series[0].data = result.pieS
myChart.hideLoading();
myChart.setOption(options);
error: function (errorMsg) {
//alert("Failed!");
myChart.hideLoading();
3.从数据库中取得数据
class PieSeries
public int value
public string name
case "caseyearcategorypie":
string sYear = context.Request["Year"];
if (!string.IsNullOrEmpty(sYear))
GetCaseCategoryByYear_Pie(sYear,context);
private void GetCategoryByYear_Pie(string sYear,HttpContext context)
List&PieSeries& lstPieSeries = new List&PieSeries&();
List&string& lstNames = new List&string&();
DbProviderFactory dbf = DbProviderFactories.GetFactory();
using (IDbConnection con = dbf.CreateConnection())
con.Open();
DataTable dtRecord = new DataTable();
string sSQL;
sSQL = "SELECT ISNULL(CATEGORY,'N/A') Category,CAST(COUNT(1) AS INT) Num FROM vwTEST" + ControlChars.CrLf
+ "where DATEPART(yy,CASE_DATE)='" + sYear + "' " + ControlChars.CrLf;
sSQL += "GROUP BY CATEGORY ORDER BY N";
using (IDbCommand cmd = con.CreateCommand())
mandText = sSQL;
using (DbDataAdapter da = dbf.CreateDataAdapter())
((IDbDataAdapter)da).SelectCommand =
da.Fill(dtRecord);
foreach (DataRow row in dtRecord.Rows)
lstNames.Add(Sql.ToString(row["Category"]));
lstPieSeries.Add(new PieSeries { value = Sql.ToInteger(row["Num"]), name = Sql.ToString(row["Category"]) });
var newObj = new
names = lstNames,
pieSeries = lstPieSeries
context.Response.Write(newObj.ToJson());
context.Response.End();
Views(...) Comments()Echarts关于饼图data中数据如何动态填充？_百度知道}