如何設置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’ } 屬性即可單獨設置顏色。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章