1.Echarts饼状图详解及示例

来源：互联网发布：软件安装包备份编辑：程序博客网时间：2024/05/18 06:22

前言说明：因工作需要用到图统计数据作为展示，用到echarts3（你也可以考虑用阿里的AntV:http://antv.alipay.com/zh-cn/index.html,或者国外的一些图形插件）。发现官方文档只有根据属性查询，没有根据图的类型文档说明。以下重点写的例子主要是官方示例中没有提及，但是我工作中用到了的示例。

1. 准备工作

到echarts3（注意是echarts3，不是echarts2）官方下载echarts或者自定义下载，下载地址：http://echarts.baidu.com/download.html

2. 示例及说明
代码中未说明的配置项，可以在官网查看。还有很多配置属性，示例中并没有使用到。配置文档地址：http://echarts.baidu.com/option.html#tooltip.trigger

eg1效果图：

这里写图片描述

eg1：基本示例

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <!-- 引入 ECharts 文件 -->    <script src="echarts.js"></script>    <div id="pie1" style="width: 600px;height:400px;"></div>    <script type="text/javascript">    var myChart1 = echarts.init(document.getElementById('pie1'));    option1 = {        title:{            text:'按类型统计',            top:'bottom',            left:'center',            textStyle:{                fontSize: 14,                fontWeight: '',                color: '#333'            },        },//标题        tooltip: {            trigger: 'item',            formatter: "{a} <br/>{b}: {c} ({d}%)"        },//提示框，鼠标悬浮交互时的信息提示        legend: {            show: false,            orient: 'vertical',            x: 'left',            data: ['50%-学生', '25%-老师', '25%-家长']        },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配        graphic:{            type:'text',            left:'center',            top:'center',            style:{                text:'用户统计\n'+'100', //使用“+”可以使每行文字居中                textAlign:'center',                font:'italic bolder 16px cursive',                fill:'#000',                width:30,                height:30            }        },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多        series: [            {                name:'用户统计',//tooltip提示框中显示内容                type: 'pie',//图形类型，如饼状图，柱状图等                radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试                //roseType:'area',是否显示成南丁格尔图，默认false                itemStyle: {                    normal:{                        label:{                            show:true,                            textStyle:{color:'#3c4858',fontSize:"18"},                            formatter:function(val){   //让series 中的文字进行换行                                return val.name.split("-").join("\n");}                        },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档                        labelLine:{                            show:true,                            lineStyle:{color:'#3c4858'}                        }//线条颜色                    },//基本样式                    emphasis: {                        shadowBlur: 10,                        shadowOffsetX: 0,                        shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框亚瑟                        textColor:'#000'                    }//鼠标放在各个区域的样式                },                data: [                    {value: 50, name: '50%-学生'},                    {value: 25, name: '25%-老师'},                    {value: 25, name: '25%-家长'},                ],//数据，数据中其他属性，查阅文档                color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色            },//数组中一个{}元素，一个图，以此可以做出环形图        ],//系列列表    };    myChart1.setOption(option1);    </script></head></html>

eg2效果：

这里写图片描述

eg2:内嵌图及添加点击事件

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <!-- 引入 ECharts 文件 -->    <script src="echarts.js"></script>    <div id="pie1" style="width: 600px;height:400px;"></div>    <script type="text/javascript">    var myChart1 = echarts.init(document.getElementById('pie1'));    option1 = {        tooltip: {            trigger: 'item',            formatter: "{a} <br/>{b}: {c} ({d}%)"        },        series: [            {                name:'学段分类统计',                type: 'pie',                radius: [0, '35%'],                label: {                    normal: {                        position: 'inner'                    }                },//扇形区域内显示文字                data:[                    {value:25, name:'学生'},                    {value:35, name:'教师'},                    {value:45, name:'家长'}                ],                color: ['#10EFE0','#EF42A4','#FF8F03']            },            {                name:'角色分类统计',                type: 'pie',                radius: ['35%', '75%'],                labelLine: {                    normal: {                        show: true,                    }                },                data:[                    { value: 10, name: '学生（小学）' },                    { value: 10, name: '学生（初中）' },                    { value: 5, name: '学生（高中）' },                    { value: 15, name: '教师（小学）' },                    { value: 15, name: '教师（初中）' },                    { value: 5, name: '教师（高中）' },                    { value: 20, name: '家长（小学）' },                    { value: 10, name: '家长（初中）' },                    { value: 15, name: '家长（高中）' },                ],                color:['#51CEC6','#6AE2D9','#96F5EF','#EF87C2','#F79DD0','#FFC8E7','#FFB703','#FFCD50','#FFE296']            },        ],    };    myChart1.setOption(option1);    //添加点击事件，可以点击每个区域，其中params为每个区相关属性，可以根据该属性写各种事件    myChart1.on('click', function(params){        console.log(params);    });    </script></head></html>

3. 未能实现的一些图
本人研究一段时间，发现饼状图有些功能未能实现。echarts3对分割后每一个扇区似乎没有再分割的属性了（如下图）。如果哪位大神研究出来了下图示例，还烦请发一个demo给我，谢谢，互相学习。邮箱：1071336724@qq.com
这里写图片描述

阅读全文

0 0