echart.js 每一块上显示所占的百分比!但是当百分比有重复的时候 颜色会重复!

0 0 echarts3 jqueryu63d2u4ef6 web u56feu8868u5e93
TimoTolkki
TimoTolkki

声望值:135 0人

2019-02-15 15:23:17 提问

关注 0关注

收藏 0收藏, 65浏览

如题,利用echart3做了一个饼状图,利用data的name属性设置显示每一块所占的百分比!当时当name值一样的时候,会出现颜色重复!

var option = {
            color:['#fecb5e','#ef7a82','#36d1bb','#fa8c35','#27aaf3'],
            series: [
                {
                    type:'pie',
                    radius: ['30%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth: '2'
                        },
                        emphasis: {
                            borderColor: '#fff',
                            borderWidth: '2'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inner',
                            textStyle: {
                                fontSize: '9'
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '9'
                            }
                        }
                    },
                    data:[
                        {value:5, name:5%},
                        {value:20, name:20%},
                        {value:30, name:30%},
                        {value:30, name:305},
                        {value:15, name:15%}
                    ]
                }
            ]
        };

这样的话第三个底色个颜色就一样了!

我想要的是即使百分比一样 也按照color的值依次获取,name用来显示百分比!

请先 登录 后评论

2个回答

  • 魔法の故郷227声望 2018-09-25 09:27

    你可以通过itemStyle对每个数据块单独制定颜色的,如下: option = { series: [ { type:'pie', radius: ['30%', '70%'], avoidLabelOverlap: false, itemStyle: { normal: { borderColor: '#fff', borderWidth: '2' }, emphasis: { borderColor: '#fff', borderWidth: '2' } }, label: { normal: { show: true, position: 'inner', textStyle: { fontSize: '9' } }, emphasis: { show: true, textStyle: { fontSize: '9' } } }, data:[ {value:5, name:'5%',itemStyle:{ normal:{ color:'#fecb5e' } }}, {value:20, name:'20%',itemStyle:{ normal:{ color:'#ef7a82' } }}, {value:30, name:'30%',itemStyle:{ normal:{ color:'#36d1bb' } }}, {value:30, name:'30%',itemStyle:{ normal:{ color:'#fa8c35' } }}, {value:15, name:'15%',itemStyle:{ normal:{ color:'#27aaf3' } }} ] } ] };
    请先 登录 后评论
  • ㄨ小蜗牛81声望 2018-09-25 09:27

    data中的name是用来表示系列名的,label是饼图图形上的文本标签,可用于说明图形的一些数据信息,结合formatter就可以实现你要的效果,其中的模板变量{c}表示的是数据值 option = { color:['#fecb5e','#ef7a82','#36d1bb','#fa8c35','#27aaf3'], series: [ { type:'pie', radius: ['30%', '70%'], avoidLabelOverlap: false, itemStyle: { normal: { borderColor: '#fff', borderWidth: '2' }, emphasis: { borderColor: '#fff', borderWidth: '2' } }, label: { normal: { show: true, formatter: '{c}%', position: 'inner', textStyle: { fontSize: '9' } }, emphasis: { show: true, textStyle: { fontSize: '9' } } }, data:[ {value:5}, {value:20}, {value:30}, {value:30}, {value:15} ] } ] };
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问