`

echarts饼状图实现步骤:

    博客分类:
  • css
阅读更多
<head> 
    <meta charset="utf-8"> 
    <title>Charts demo</title> 
     <script src="js/esl.js"></script> 
</head> 
<body> 
    <div id="picturePlace"></div> 
     <script type="text/javascript"> 
        // 路径配置 
        require.config({ 
            paths:{  
                'echarts' : 'js/echarts', 
                'echarts/chart/pie' : 'js/echarts' 
            } 
        }); 
         
         // 使用 
        require( 
            [ 
                'echarts', 
                'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载 
            ], 
            function (ec) { 
                // 基于准备好的dom,初始化echarts图表 
                var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));  
                 
                option = { 
                        title : { 
                            text: '某站点用户访问来源', 
                            subtext: '纯属虚构', 
                            x:'center' 
                        }, 
                        tooltip : { 
                            trigger: 'item', 
                            formatter: "{a} <br/>{b} : {c} ({d}%)" 
                        }, 
                        legend: { 
                            orient : 'vertical', 
                            x : 'left', 
                            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] 
                        }, 
                        toolbox: { 
                            show : true, 
                            feature : { 
                                mark : {show: true}, 
                                dataView : {show: true, readOnly: false}, 
                                restore : {show: true}, 
                                saveAsImage : {show: true} 
                            } 
                        }, 
                        calculable : true, 
                        series : [ 
                            { 
                                name:'访问来源', 
                                type:'pie', 
                                radius : '55%', 
                                center: ['50%', '60%'], 
                                data:[ 
                                    {value:335, name:'直接访问'}, 
                                    {value:310, name:'邮件营销'}, 
                                    {value:234, name:'联盟广告'}, 
                                    {value:135, name:'视频广告'}, 
                                    {value:1548, name:'搜索引擎'} 
                                ] 
                            } 
                        ] 
                    }; 
         
                // 为echarts对象加载数据  
                myChart.setOption(option);  
            } 
        ); 
    </script> 
</body> 
分享到:
评论

相关推荐

    echarts制作的饼状图

    制作 ECharts 饼状图的步骤大致如下: 1. **引入 ECharts**:在 HTML 文件中通过 `&lt;script&gt;` 标签引入 ECharts 的库文件。通常从 ECharts 官方网站下载最新版本的库文件,或者使用 CDN(内容分发网络)链接。 ```...

    Echarts 饼状图

    通过以上步骤,你可以创建出一个基本的ECharts饼状图。在实际应用中,可以根据具体需求进一步调整配置,如添加多级饼图、环状图、南丁格尔玫瑰图等,以满足复杂的数据展示需求。ECharts的灵活性和强大功能使其成为...

    在Echarts 地图上画饼图

    首先,ECharts是一个由百度公司开发的开源JavaScript图表库,它提供了丰富的图表类型,如柱状图、折线图、饼图以及各种地图等,适用于网页数据可视化。ECharts的设计理念是易用、灵活且强大,支持多种数据格式和交互...

    ECharts多行文字两端对齐饼图.zip

    通过以上步骤,我们就能在ECharts的饼图中实现多行文字两端对齐的功能,为用户提供更清晰、更美观的数据展示。这不仅增强了数据的可读性,也提升了整体的用户体验。在实际开发中,根据具体需求,还可以调整文字的...

    uni-app 引入echarts饼图,其他图形一样,按需引入

    总的来说,uni-app结合ECharts可以实现跨平台的数据可视化,让开发者能够灵活地创建各种图表,满足不同的数据分析和展示需求。在实际应用中,可以根据具体场景调整ECharts的配置,以达到最佳的视觉效果和交互体验。

    web单页面实现多个echarts图表铺满整个div(柱状图,折线图,饼形图……)

    通过以上步骤,你可以在单个Web页面中实现多个ECharts图表,并使它们根据浏览器窗口大小自动调整,从而达到良好的响应式效果。在实际项目中,可以根据需求灵活调整图表配置,以满足各种数据展示需求。同时,ECharts...

    echarts实现3D环装饼图带引导线效果

    **ECharts实现3D环状饼图带引导线效果...通过以上步骤,你可以在Vue.js项目中成功实现一个具有3D环状饼图和引导线效果的ECharts实例。根据实际需求,你可以进一步定制颜色、动画、交互等特性,以达到更佳的可视化效果。

    3D带动画超链接半透明饼状图JS代码

    在这个特定的案例中,"3D带动画超链接半透明饼状图JS代码"是一个利用JavaScript实现的可视化工具,它允许开发者创建引人注目的数据展示。下面我们将深入探讨这个主题,包括饼状图的概念、JavaScript在其中的作用,...

    ajax动态赋值echarts的实例(饼图和柱形图)

    本文主要介绍了如何使用ajax技术动态地将数据赋值给echarts生成的图表,包括饼图和柱形图的实现过程。echarts是一款强大的可视化图表库,支持多种图表类型,并可以通过AJAX技术实现数据的动态加载,从而在网页上展示...

    微信小程序使用echarts图表

    接下来,你需要做以下步骤: 1. **引入ECharts库** 在微信小程序中,我们不能直接使用CDN来加载ECharts库,因为小程序不支持外部资源的直接引用。你需要将ECharts的源码文件或预编译后的文件放入项目的`lib`目录下...

    js饼状图+柱状图+曲线图

    JavaScript中实现饼状图的库有很多,例如D3.js、Chart.js、ECharts等。以ECharts为例,创建饼状图的基本步骤包括: 1. 引入ECharts库:在HTML文件中通过`&lt;script&gt;`标签引入ECharts的JS文件。 2. 准备容器:创建一个...

    arcgis api for js 自定义弹出专题图(饼图、柱状图、折线图)

    通过以上步骤,我们能够实现ArcGIS API for JavaScript与ECharts的集成,使得用户点击地图时,弹出的窗口展示与该位置相关的饼图、柱状图或折线图专题图。这种方式极大地增强了地图的交互性和信息传达能力,为用户...

    绘制饼图并实现动画效果

    总结来说,使用SVG和JavaScript绘制饼图并实现动画效果,主要包括以下几个步骤: 1. 创建SVG容器。 2. 计算每个扇区的弧度。 3. 使用`path`元素和路径命令绘制扇区。 4. 利用`requestAnimationFrame`实现动画效果。 ...

    支持弹出的饼状图

    以D3.js为例,创建饼状图的基本步骤包括: 1. **数据绑定**:将数据数组与图形元素(在这里是饼状图的切片)进行绑定。每个数据项包含其值(占比)和可能的其他属性,如颜色、标签等。 2. **计算角度**:根据数据...

    【JavaScript源代码】vue使用ECharts实现折线图和饼图.docx

    以下是如何在Vue项目中利用ECharts实现折线图和饼图的详细步骤: 1. **安装ECharts** 首先,你需要通过npm(Node Package Manager)来安装ECharts。在项目的根目录下运行以下命令: ``` npm install echarts --...

    QT自定义控件-饼状图(含源码和demo)

    实现自定义饼状图的关键步骤包括: 1. **数据模型**:首先,需要一个数据模型来存储各个扇区的数据,如值和颜色。这通常是一个包含多个条目的结构或类,每个条目对应饼图的一个扇区。 2. **绘图函数**:重写...

    74.(leaflet篇)leaflet饼状图.zip

    以上步骤展示了如何在Leaflet地图中集成ECharts饼状图的一个基本实现。实际应用中,你可以根据需求调整饼图的数据、样式、交互等属性,使其更符合项目的需求。通过阅读博客文章(链接:...

    uniapp 里面echarts的使用

    以上就是在uni-app中使用ECharts的关键步骤和知识点,通过这些步骤,你可以轻松地在uni-app项目中实现各种数据可视化功能。记得根据实际需求调整ECharts的配置项,以及根据uni-app的特性进行适配,以实现最佳的用户...

    js 柱状图 饼状图 等

    总的来说,JavaScript中的柱状图和饼状图是数据可视化的常用工具,通过ECharts、Highcharts等库可以轻松实现。理解它们的工作原理和使用方式,将有助于我们在Web开发中更好地展示和解释数据。在`exporting-server`、...

Global site tag (gtag.js) - Google Analytics