如何设置E charts 饼状图的颜色

如何设置E charts 饼状图的颜色

看一下案例代码:

<script>

            var dom = document.getElementById("examine-group-echarts-wrapper");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                // grid: {
                //     x: 50,
                //     y: 20,
                //     x2: 70,
                //     y2: 20,
                //     borderWidth: 1
                // },
                legend: {
                    // orient: 'vertical',
                    x: 'left',
                    y: 'top'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        // 内外圆的直径
                        radius: ['40%', '70%'],
                        data: [
                            { value: 335, name: '思想建设', itemStyle: { color: '#F38A7C' } },
                            { value: 335, name: '组织建设', itemStyle: { color: '#F7AB85' } },
                            { value: 335, name: '作风建设', itemStyle: { color: '#F7C885' } },
                            { value: 200, name: '廉政建设', itemStyle: { color: '#F7DE85' } },
                            { value: 335, name: '群团工作', itemStyle: { color: '#F8A1A1' } },
                            { value: 250, name: '党建责任制', itemStyle: { color: '#F7AB85' } },
                        ],
                        // 指向文字的直线
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: '#666666'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                label: {
                                    textStyle: {
                                        fontSize: 18,
                                        fontWeight: 'bold'
                                    }
                                },
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal: {
                                label: {
                                    textStyle: {
                                        fontSize: 16,
                                        fontWeight: 'normal',
                                        // color: '#666666',
                                    }
                                }
                            }

                        }
                    }
                ]
            };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
                window.onresize = function () {
                    myChart.resize();
                }
            }
        </script>

在series->data 里为每一项添加 itemStyle: { color: ‘#F38A7C’ } 属性即可单独设置颜色。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值