ECharts饼图制作分析

最新推荐文章于 2023-02-23 11:01:14 发布

橘子味的猫お

最新推荐文章于 2023-02-23 11:01:14 发布

阅读量437

点赞数

分类专栏： Echarts

Echarts 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

转载：https://www.cnblogs.com/liubeimeng/p/4871812.html

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <!--为ECharts准备一个具备大小(宽高)的Dom-->
    <div id="main" style="height:400px;"></div>
    <!--ECharts单文件引入-->
    <script src="echarts-all.js"></script>
    <script type="text/javascript">
    //基于准备好的dom,初始化echarts图表
    var myChart=echarts.init(document.getElementById('main'));

    //图表使用
    var option = {
    tooltip : {//提示框,鼠标悬浮交互时的信息提示
        trigger: 'item',//触发类型,默认数据触发,可选为:'axis'
        formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示内容格式
    },
    legend: {//图例,每个图表最多仅有一个图例
        orient : 'vertical',//布局方式,默认为水平布局,可选为:'horizontal'|'vertical' 
        x : 'left',//水平安放位置,默认为全图居中,可选为:'center'|'left'|'right'|{number}(x坐标,单位px)
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']//图例内容数组,数组项通常为{string},每一项代表一个系列的name，默认布局到达边缘会自动分行(列),传入空字符串''可实现手动分行(列) 
    },
    toolbox: {//工具箱,每个图表最多仅有一个工具箱
        show : true,//显示策略,默认只是false.可选为:true显示|false隐藏
        feature : {//启用功能,目前支持feature，工具箱自定义功能回调处理.
            mark : {show: true},//辅助线标志,此处启用.
            dataView : {//打开数据视图，可设置更多属性 
                show: true, 
                readOnly: false//readOnly默认数据视图为只读,可指定readOnly为false打开编辑功能
            },
            magicType : {//动态类型切换,支持直角系下的折线图,柱状图,堆积,平铺转换
                show: true, 
                type: ['pie', 'funnel'],//饼图,漏斗图
                option: {//图表选项,包含图表实例任何可配置选项:公共选项,组件选项,数据选项 
                    funnel: {//漏斗图配置
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'center',
                        max: 1548
                    }
                }
            },
            restore : {show: true},//还原,复位原始图表
            saveAsImage : {show: true}//保存图片IE8-不支持,上图icon最右,可设置更多属性. 
        }
    },
    calculable : true,//是否启用拖拽重计算特性,默认关闭
    series : [//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
        {
            name:'访问来源',//系列名称
            type:'pie',//图表类型,折线图line,散点图scatter,柱状图bar,饼图pie,雷达图radar
            radius : ['50%', '70%'],//半径,支持绝对值px和百分比,百分比计算比,min(width, height)/2*75%,传数组实现环形图,[内半径,外半径] 
            itemStyle : {//图形样式,可设置图表内图形的默认样式和强调样式（悬浮时样式）
                normal : {//默认样式
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {//强调样式
                    label : {
                        show : true,
                        position : 'center',//标签显示位置,地图标签不可指定位置 
                        textStyle : {
                            fontSize : '30',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
        ]
    };

    //为echats对象加载数据
    myChart.setOption(option);
    </script>
</body>
</html>

橘子味的猫お

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ECharts饼图制作分析

转载：https://www.cnblogs.com/liubeimeng/p/4871812.htmlECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZR...
复制链接

扫一扫