使用Echarts的一些实例(含部分注释)

最新推荐文章于 2025-03-26 15:27:05 发布

SL_World

最新推荐文章于 2025-03-26 15:27:05 发布

阅读量817

点赞数 1

分类专栏： Echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/SL_World/article/details/88343609

版权

Echarts 专栏收录该内容

1 篇文章

订阅专栏

前言

完整代码见我的GitHub，内含CSS和echarts.js,下载可直接使用。

效果预览

1.单个饼图

在这里插入图片描述
【代码示例】：

<body>
    <!--2.为ECharts准备一个具备大小(宽高)的DOM-->
    <div id="pie" class="fream"></div>
    <script type="text/javascript">
        // 3.基于准备好的dom，初始化echarts实例
        var mychart = echarts.init(document.getElementById('pie'));
        // 4.指定图表的option和data
        var option = {
            title : {
                text: '2018年所属机构论文投递数',
                subtext: 'AAAI论文投递数排名top10所属机构国家分布图',
                x:'center',
                textStyle:{
                    fontSize:25, // 标题字体大小
                },
                subtextStyle:{
                    fontSize:18, // 副标题字体大小
                },
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical', // 垂直显示
                left: '20%',         // 靠左显示
                data: ['中国','美国','英国','澳大利亚','新加坡',
                       '日本','中国香港','印度','加拿大','德国',
                       '韩国','以色列','意大利'],
                selected: {'以色列':0,'意大利':0}, // 为0表示状态为未选中
            },
            series : [
                {
                    name: '论文统计',
                    type: 'pie',
                    radius : '60%', // 圆半径
                    center: ['50%', '60%'],
                    data:[
                        {value:1242, name:'中国'},
                        {value:934, name:'美国'},
                        {value:128, name:'英国'},
                        {value:124, name:'澳大利亚'},
                        {value:109, name:'新加坡'},
                        {value:99, name:'日本'},
                        {value:92, name:'中国香港'},
                        {value:96, name:'印度'},
                        {value:68, name:'加拿大'},
                        {value:68, name:'德国'},
                        {value:60, name:'韩国'},
                        {value:43, name:'以色列'},
                        {value:34, name:'意大利'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychart.setOption(option);
    </script>
</body>