JavaFx控件WebView中使用echarts加载图

最新推荐文章于 2022-05-15 12:46:31 发布

aliaichidantong

最新推荐文章于 2022-05-15 12:46:31 发布

阅读量1.2k

点赞数

分类专栏： JAVAFX

本文链接：https://blog.csdn.net/aliaichidantong/article/details/101032077

版权

JAVAFX 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

官方Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../../javascript/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});
        


        // 指定图表的配置项和数据
        option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

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

核心代码：

var myChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});

核心参数为最后两个：null和svg两个

官网介绍说明也有渲染的相关说明，可以仔细看看