Echarts使用第一天-cnblog

Echarts使用第一天

1.使用

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div.box {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <script src="../lib/echarts.js"></script>

</head>

<body>
    <div class="box">

    </div>

    <script>
        // 图表初始化

        var Mychart = echarts.init(document.querySelector('div'));

        // 设置option
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [{
                    value: 1048,
                    name: 'Search Engine'
                }, {
                    value: 735,
                    name: 'Direct'
                }, {
                    value: 580,
                    name: 'Email'
                }, {
                    value: 484,
                    name: 'Union Ads'
                }, {
                    value: 300,
                    name: 'Video Ads'
                }]
            }]
        };

        Mychart.setOption(option);
    </script>
</body>

</html>