echarts 饼图实例

最新推荐文章于 2024-07-08 15:00:04 发布

tt010175

最新推荐文章于 2024-07-08 15:00:04 发布

阅读量506

点赞数

分类专栏： echarts 文章标签： javascript echarts 柱状图实例

本文链接：https://blog.csdn.net/tt010175/article/details/78355484

版权

echarts 专栏收录该内容

6 篇文章 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">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="csshelloword.css">
    <script src="echarts.common.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                roseType: 'angle',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>