echarts適配移動端

時間 2019-11-10

標籤 echarts 適配移動欄目無線简体版

原文原文鏈接

<!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.htmljavascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。