当前位置：首页 > news >正文

echarts适配移动端

news 来源：原创 2024/4/29 1:26:36

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.simple.min.js"></script>
    <script>
        var d = document.documentElement;
        var cw = d.clientWidth || 750;
        document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
    </script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 4.5rem;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    function remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
    }

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '45%'],
                center: ['50%', '49%'],
                label: {
                    normal: {
                        position: 'inner',
                        textStyle : {
                            fontWeight : 'normal',
                            fontSize : '0.18rem',
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value:335, name:'A', selected:true},
                    {value:309, name:'B'},
                ],
            },
            {
                name:'访问来源',
                type:'pie',
                radius: ['60%', '80%'],
                center: ['50%', '49%'],
                label: {
                    normal: {
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: remToPx(0.22),
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 1,
                                height: 0
                            },
                            b: {
                                fontSize: '0.32rem',
                                lineHeight: '0.66rem',
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: ['0.04rem', '0.08rem'],
                                borderRadius: '0.04rem'
                            }
                        }
                    }
                },
                data: [
                    {value:235, name:'A'},
                    {value:100, name:'B'},
                    {value:209, name:'A'},
                    {value:100, name:'B'},
                ],
            }
        ]
    };

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

https://www.cnblogs.com/shiyunfront/articles/7686942.html

转载于:https://www.cnblogs.com/beimingbingpo/p/10297581.html