连接echart图形与Java ServerFaces

Question

我正在尝试在 ServerFaces 应用程序中使用 echarts 创建图形。

如何从托管 bean 发送 un JSON 到 javascript 图形？

Answer 1

您可以在 JSF 中创建 json 并将必要的参数传递给呈现图形的 javascript 函数。 RemoteConmand 调用 rnder 图表函数：

<p:remoteCommand name="rc" autoRun="true" 
                                 oncomplete="renderChart('${disponibilidadController.titulo}', 
                                 '${disponibilidadController.chartDataTic}',
                                 '${disponibilidadController.chartDataComp}',
                                 '${disponibilidadController.chartDataImpr}',
                                 '${disponibilidadController.chartDataComu}',
                                 '${disponibilidadController.chartSerie}',
                                 '${disponibilidadController.miny}');"/>

JavaScript echart代码：

<script type="text/javascript">
            // based on prepared DOM, initialize echarts instance
            function renderChart(titulo, dataYTic, dataYComp, dataYImpr, dataYComu, dataX, minY) {
                myChart = echarts.init(document.getElementById('myChartC'));
                var option = {
                    title: {
                        text: titulo
                    },
                    color: ['#5793f3', '#d14a61', '#675bba', '#107533'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        data: ['Disponibilidad']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: $.parseJSON(dataX)
                        }
                    ],
                    yAxis: [
                        {type: 'value',
                            min: minY,
                            max: 100,
                            axisLabel: {
                                formatter: function (val) {
                                    return val + '%';
                                }
                            }
                        }
                    ],
                    series: [{
                            name: ' TICS',
                            type: 'line',
                            barWidth: '70%',
                            data: $.parseJSON(dataYTic)

                        },
                        {
                            name: 'Computadoras',
                            type: 'line',
                            barWidth: '70%',
                            data: $.parseJSON(dataYComp)

                        },
                        {
                            name: 'Impresoras',
                            type: 'line',
                            barWidth: '70%',
                            data: $.parseJSON(dataYImpr)

                        },
                        {
                            name: 'Comunicaciones',
                            type: 'line',
                            barWidth: '70%',
                            data: $.parseJSON(dataYComu)

                        }]

                };

                // use configuration item and data specified to show chart
                myChart.setOption(option);


            }

            window.onresize = function () {
                myChart.resize();
            };

        </script>

BackingBean:

private String titulo;
private String dataY;
private String chartDataTic;
private String chartDataComp;
private String chartDataImpr;
private String chartDataComu;
private BigDecimal miny;

public void initChart() throws Exception {

titulo = "My Chart Title";
dataY = "5, 20, 36, 10, 10, 20";
this.miny = new BigDecimal(100);

List<BigDecimal> listaValoresTic = new ArrayList<>();
List<BigDecimal> listaValoresComp = new ArrayList<>();
List<BigDecimal> listaValoresImpr = new ArrayList<>();
List<BigDecimal> listaValoresComu = new ArrayList<>();

List<String> listaX = new ArrayList<>();

try {
    List<DisponibilidadHistorico> dhs = this.eJBController.getDisponibilidadEJB().disponibilidadHistPorSemanas(8);
    for (int i = 0; i < dhs.size(); i++) {
        DisponibilidadHistorico get = dhs.get(i);
        listaValoresTic.add(get.getDispTics());
        listaValoresComp.add(get.getDispComp());
        listaValoresImpr.add(get.getDispImpr());
        listaValoresComu.add(get.getDispComu());

        listaX.add(utilMB.toStringfechaDatosSemana(get.getFecha()));
        if (this.miny.compareTo(get.getDispComp()) == 1) {
            this.miny = get.getDispComp();
        }
        if (this.miny.compareTo(get.getDispComp()) == 1) {
            this.miny = get.getDispComp();
        }
        if (this.miny.compareTo(get.getDispImpr()) == 1) {
            this.miny = get.getDispImpr();
        }
        if (this.miny.compareTo(get.getDispComu()) == 1) {
            this.miny = get.getDispComu();
        }

    }

    setChartDataTic(new Gson().toJson(listaValoresTic));
    setChartDataComp(new Gson().toJson(listaValoresComp));
    setChartDataImpr(new Gson().toJson(listaValoresImpr));
    setChartDataComu(new Gson().toJson(listaValoresComu));
    setChartSerie(new Gson().toJson(listaX));
} catch (Exception e) {
}

连接echart图形与Java ServerFaces

Connect echart graphics with Java ServerFaces

java

echarts

jakarta-ee