githubmirror/echarts

test/toolbox-textStyle.html
226 строк8 KB
plainheart
fix(toolbox): fix toolbox text can't apply the specified or inherited font style
03 окт 2023, 07:44
03 окт 2023, 07:440508353
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>

<head>
    <meta charset="utf-8">
    <script src="lib/simpleRequire.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/testHelper.js"></script>
    <link rel="stylesheet" href="lib/reset.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <div id="main0"></div>
    <div id="main1"></div>

    <script>

        require(['echarts'], function (echarts) {
            var option = {
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            title: 'Save as Image',
                            emphasis: {
                                iconStyle: {
                                    textFill: 'red'
                                }
                            }
                        },
                        restore: {
                            show: true,
                            title: 'Restore'
                        }
                    },
                    left: '50%',
                    top: 40,
                    emphasis: {
                        iconStyle: {
                            textBackgroundColor: '#222',
                            textFill: '#ddd',
                            textBorderRadius: 3,
                            textPadding: [5, 8],
                            textPosition: 'top'
                        }
                    }
                },
                grid: [{
                    left: 32,
                    right: 32,
                    top: 80,
                    bottom: 15,
                    containLabel: true
                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        margin: 10,
                        rotate: 30,
                        color: '#666'
                    },
                    data: ['福田区', '罗湖区', '龙岗区']
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true
                    }
                }],
                series: [{
                    type: 'bar',
                    barWidth: 16,
                    data: [210, 130, 66],
                    itemStyle: {
                        normal: {
                            color: '#ccc'
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        fontWeight: 'bold',
                        color: '#000'
                    }
                }]
            }
            var chart = testHelper.create(echarts, 'main0', {
                option: option
            });
        });
    </script>

    <script>
        require(['echarts'], function (echarts) {
            var font1 = document.createElement('link');
            font1.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400';
            var font2 = document.createElement('link');
            font2.href = 'https://fonts.googleapis.com/css2?family=Courgette:wght@400';
            font1.rel = font2.rel = 'stylesheet';
            document.head.appendChild(font1);
            document.head.appendChild(font2);

            var option = {
                textStyle: {
                    fontFamily: "Courgette, Noto Sans SC"
                },
                title: {
                    text: "This is a chart 使用了自定义字体"
                },
                tooltip: {
                    trigger: "axis"
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {
                            title: '保存为图片\n(Save as image)'
                        },
                        dataView: {
                            title: '数据视图\n(Data View)'
                        }
                    }
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["周一 Mon", "周二 Tue", "周三 Wed", "周四 Thu", "周五 Fri", "周六 Sat", "周日 Sun"]
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        name: "邮件营销 (Email)",
                        type: "line",
                        stack: "总量",
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: "联盟广告 (Union Ad)",
                        type: "line",
                        stack: "总量",
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: "视频广告 (Video Ad)",
                        type: "line",
                        stack: "总量",
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: "直接访问 (Direct Access)",
                        type: "line",
                        stack: "总量",
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: "搜索引擎 (Search Engine)",
                        type: "line",
                        stack: "总量",
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main1', {
                option: option,
                title: [
                    'Custom fonts should be applied on the toolbox text'
                ]
            });

            document.fonts.ready.then(function () {
                console.log("fonts ready");
                // refresh the chart when custom fonts are ready
                chart.setOption({});
            });
        });
    </script>
</body>

</html>