echarts官网实例饼状图改成环形图

echarts官网实例饼状图改成环形图_第1张图片

//整个配置项代码如下
var mapBoxOption = {

          tooltip: {
            trigger: 'item',
            // a是设置name,b是每一项的name,c是每一项的值,d是每一项的占比(echarts会自己给我们计算不需要我们传入)
            formatter: "{a} 
{b}: {c} ({d}%)" }, //图例的配置 legend: { // 垂直显示 orient: 'vertical', // 左右的话在右边 right:"right", // 上下的话在中间 top:"center", // 图例的内容,要和series传入的data里的name保持一致 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series: [ // 外面大环配置 { // 上方{a}可以取到 name:'访问来源', //左右和上下位置 center:["40%","50%"], type:'pie', // 内半径和外半径 radius: ['40%', '50%'], avoidLabelOverlap: false, label: { normal: { // 这里开启的话会出现所有的线 show: true, // 线上的内容 formatter: '{d}%', }, emphasis: { show: false, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, data:[ { value:335, name:'直接访问', // 外环的线 labelLine:{ //是否显示自己的线 show:true, // 第一根线的长度 length:10, // 第二根线的长度 length2:10 }, // 自己这一块的颜色 itemStyle:{ color:"green" } }, //这几项我没加颜色用的默认的 {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] }, // 内环的配置 { radius: ['16%', '18%'], center: ['40%','50%'], type: 'pie', label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { normal: { show: false }, emphasis: { show: false } }, animation: false, tooltip: { show: false }, data:[ { value:100, itemStyle:{ color:"#000" } } ] } ] }

你可能感兴趣的:(echarts)