echarts环状图

来源:互联网 发布:ios升级数据丢失 编辑:程序博客网 时间:2024/04/29 01:46

依赖:见echarts柱状图
http://blog.csdn.net/zk_1325572803/article/details/78041389

body中

<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --><div id="main_s" style="height:192px;position:absolute;top:15%;left:52%;width:720px;"></div>

javascript

function huan(){    //基于准备好的dom,初始化echarts实例    var myChart = echarts.init(document.getElementById('main_s'));    var option = {            title : {              text: kssj+"至"+jssj+"全部运动物占比情况",             textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}                   fontSize: 13,                   fontStyle: 'normal',                   fontWeight: 'bold',             },             x:"center"              },            tooltip: {                trigger: 'item',                formatter: "{a} <br/>{b}: {c} ({d}%)"            },            legend: {                orient: 'vertical',                x:'15',                y:'15',                data:[车,两轮车,其他,行人]  //数组            },            series: [                {                    name:'运动物类型:',                    type:'pie',                    radius: ['50%', '70%'],                    avoidLabelOverlap: false,                    label: {                        normal: {   //视觉引导线                            show: true,                            position: 'right'                        },                        emphasis: {                            show: true,                            textStyle: {                                fontSize: '17',                                fontWeight: 'bold'                            }                        }                    },                    labelLine: {                        normal: {                            show: true                        }                    },                    itemStyle: {                        normal: {                            borderColor: "#FFFFFF",                             borderWidth: 1,                             label:{                                  show:true,                                  formatter:'{b} : {c} ({d}%)'                              },                          }                    },                    data:[100,200,300,400] //数组                }            ]        };    // 使用刚指定的配置项和数据显示图表。    myChart.setOption(option);}

效果图
这里写图片描述

原创粉丝点击