echarts图例显示数据信息(以环形图为例)

效果图:

效果图

代码:

        var color_1 = ["#fe6249", "#e39c49", "#ffc184", "#fdffe2"];
        var data_1 = [
            {name:'三级风险数量',value:0},
            {name:'四级风险数量',value:0},
            {name:'五级风险数量',value:1},
            {name:'六级风险数量',value:2}
        ];
        pie("main2", "风险", color_1, data_1);

        // id: 图表容器元素 str
        // title: 标题 str
        // data: 数据 arr
        // color: 图例颜色和饼状图各区域颜色 arr
        function pie(id, title, color, data) {
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            myChart.clear();
            myChart.showLoading();
            var option = {
                // 标题设置
                title : {
                    text: title,
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize: 26,
                        color: '#fff',
                        fontWeight: 'nomal'
                    }
                },
                // 提示
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"
                },
                color: color,
                // 图例
                legend: {
                    orient: 'vertical',
                    x: '10%',
                    y: 'center',
                    // 设置图例形状
                    icon: 'circle',
                    itemWidth: 16,  // 设置宽度
                    itemHeight: 16, // 设置高度
                    textStyle:{
                        color:"#fff",
                        fontSize: 14,
                    },
                    formatter: function(params) {
                        var legendIndex = 0;
                        data.forEach(function (v, i) {
                            if (v.name == params) {
                                legendIndex = i;
                            }
                        });
                        return params + " " + data[legendIndex].value;
                    }

                },
                calculable : true,
                series : [
                    {
                        type:'pie',
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                            emphasis : {
                                label : {
                                    show : false
                                }
                            }
                        },
                        radius : ['50%', '70%'],
                        // 设置饼状图在画布中的位置
                        center: ['50%', '50%'],
                        data: data
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart.hideLoading();
            //隐藏加载动画
        };

猜你喜欢

转载自blog.csdn.net/weixin_43412413/article/details/99443801
今日推荐