Echarts使用

最新推荐文章于 2024-07-04 13:18:09 发布

世代庄少主

最新推荐文章于 2024-07-04 13:18:09 发布

阅读量453

点赞数

分类专栏： ——【JavaScript】

本文链接：https://blog.csdn.net/fjt123068/article/details/80962965

版权

——【JavaScript】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

【前言】

面试问了一个Echarts的东西，小编没有用过，于是就照着网上的例子敲了一遍，简单研究了一下。

【正文】

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>饼状图</title>
    <script src="Echarts/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecstat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/datatool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zuonbpqgbsygxniyhicvbabm"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x: 'center'
            },   //标题
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },//提示框，鼠标悬浮交互时的信息提示
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },  //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
            series: [
                {
                    name: '访问来源',  //tooltip提示框中显示内容
                    type: 'pie',  //图形类型，如饼状图，柱状图等
                    radius: '55%',   //饼图的半径，数组的第一项是内半径，第二项是外半径。
                    // 支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
                    //roseType:'area',是否显示成南丁格尔图，默认false
                    center: ['50%', '50%'],
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 2548, name: '搜索引擎' }
                    ],   //数据，数据中其他属性，查阅文档
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    } // 鼠标放在各个区域的样式
                }
            ]
        };
        
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

    </script>
</body>
</html>

效果图：