循环遍历输出echarts 饼图，js打印

文档：

http://echarts.baidu.com/api.html#echarts

http://www.echartsjs.com/examples/

需求：

table每行输出一个饼图；

 

开始：

1，需要一个容器放着饼图

 

<div style="height: 265px;width:380px" id="pie_id_<%= i %>"></div>

2，配置路径

  require.config({
                paths: {
                    'echarts': '../Scripts/dist',       // 把所需图表指向单文件

                }
            });

3，加载模块

require(
                [
                    'echarts',
                    'echarts/chart/pie' // 使用饼图就加载pie模块，按需加载
                ],

4，function，写option，循环

 function (ec) {
                    var num = $("#row_count").val();//获取table行数
                    var data_char;
                    var myChart;
                    var option;
                    for (var i = 0; i < num; i++) {//循环
                        data_char = JSON.parse($("#data" + i).val());
                        myChart = "myChart_" + i;
                        option = "option_" + i;

                        myChart = ec.init(document.getElementById('pie_id_' + i));

                        option = {
                            title: {
                                text: 'Test ' + i,
                                x: 'center',
                                textStyle: { "fontSize": 12 }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{b} <br/>{d}%"//鼠标点击时显示的内容
                            },
                            series: [
                                {
                                    name: 'Amount',
                                    type: 'pie',
                                    radius: '30%',
                                    center: ['50%', '60%'],
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'inner'
                                        }
                                    },
                                    data: [
                                        //后台处理json数据
                                        { value: data_char.data1, name: "data1" },
                                        { value: data_char.data2, name: 'data2' }, 
                                        { value: data_char.data3, name: "data3" },
                                        { value: data_char.data4, name: 'data4' },
                                    ],
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                formatter: '{b} \n ({d}%)'//{b} : {c} \n ({d}%)//饼图显示的内容
                                            },
                                            labelLine: {
                                                show: true
                                            }
                                        },
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ],
                           // color: ['rgb(200,200,169)', 'rgb(248,147,29)', 'rgb(119,52,96)', 'rgb(131,175,120)'] //自定义颜色，不写则使用默认颜色
                        };
                        myChart.setOption(option);
                    }
                }
            );

打印：

window.print();

写这里是因为打印样式问题，@page { size: A4 landscape;}，设置横向打印，table右边界线缺少，试过更改样式，无果后，也尝试了table内容换行，最后去掉了size: A4 landscape;就可以了。

--结束

总结：

后台处理好数据，前台直接套用模板，拼凑option数据就可以了，还是比较方便的。