JavaFX WebView调用Echarts

当选择JavaFX搞事情的时候就注定了要与bug对抗到底，就算是一种倔强吧。

一、准备

首先需要准备好echarts.js，可以直接取官网下载最新版https://echarts.apache.org/zh/download.html

导入到resource文件夹下，然后准备个stage显示图表

package wangkaifeng.test;

import javafx.beans.value.ObservableValue;
        import javafx.concurrent.Worker.State;
        import javafx.application.Application;
        import javafx.scene.Scene;
        import javafx.scene.paint.Color;
        import javafx.scene.web.WebEngine;
        import javafx.scene.web.WebView;
        import javafx.stage.Stage;

public class JavaWebView extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("Web View Sample");
        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.load(this.getClass().getResource("/chart.html").toExternalForm());
        Scene scene = new Scene(webView, 900, 600, Color.web("lightgray"));
        stage.setScene(scene);
        webEngine.getLoadWorker().stateProperty().addListener((ObservableValue<? extends State> ov, State oldState, State newState) -> {
            if (newState == State.SUCCEEDED) {
                stage.show();
            }
        });
    }
    public static void main(String[] args) {
        launch(args);
    }
}

二、Echarts demo

1、折线图

chart.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.js，注意路径 -->
    <script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 800px;height:500px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 处理点击事件并且跳转到相应的百度搜索页面
    myChart.on('click', function (params) {
        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    });
</script>
</body>
</html>

显示效果：

2、圆饼图

chart.html

<html>
<head>
    <meta charset="utf-8">
    <title>echarts测试</title>
    <script type="text/javascript" src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style=" 600px;height:800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            //这个为提示条，注意名称要和data里的name一一对应
            data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]
        },

        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:1400, name:'搜索引擎'},
                    {value:230, name:'黑客'}
                ]
            }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

显示效果：

三、图表数据不显示或点线不一致问题

在官方所给的柱状图demo中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style=" 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

不显示数据

查找了资料说是Echarts版本4.x之后的新特性，在初始化是可以配置渲染方式为canvas或者svg，默认为canvas。

默认的canvas在浏览器上显示没有问题，但是在javafx界面上会显示出现问题，所以需要将渲染方式改为svg，问题就能得到解决。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '第一个 ECharts 实例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

 同理如果折线图出现点线不一致的问题也是因为渲染方式的问题，比如下面没有设置svg方式：

作者：王陸

-------------------------------------------

个性签名：罔谈彼短，靡持己长。做一个谦逊爱学的人！

本站使用「署名 4.0 国际」创作共享协议，转载请在文章明显位置注明作者及出处。鉴于博主处于考研复习期间，有什么问题请在评论区中提出，博主尽可能当天回复，加微信好友请注明原因

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wkfvawl/p/14418045.html