echart图表饼状图--修改样式

具体内容在代码中展示,可以通过修改相关值达到对应的效果。相关参数的取值含义在其中包含着。

      dealPie() {
            var myChart = echarts.init(document.getElementById(显示的id容器名'));

            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
//              图例颜色 从右上开始
                color:['#20a0ff ', '#5dd5a4','#ffb460','blueviolet'],
                legend: {
               
//                  orient : 'vertical',    	水平/垂直
//                  x : 'left',             图例左/右
//                  y : 'bottom',           图例上/下
//                  data : this.pieLegendData   图例名字
                },
                series : [
                    {
//                  	弹框提示标题
                        name:'数据交互错误类型',
                        type:'pie',
//                      饼状图的填充
                        radius : ['25%', '70%'],  
                        itemStyle : {
                            normal : {
                                label : {
//                              	指示字与线
                                    show : true ,
//                                  显示百分比
                                    formatter: '{b} : {c} ({d}%)'   
                                },
                                labelLine : {
//                              	指示线
                                    show : true
                                },
                            },
                        },
//                      弹框变动的数据
                        data :this.pieData
                    }]
            };

            // 为echarts对象加载数据
            myChart.setOption(option);
        },

猜你喜欢

转载自blog.csdn.net/ColourfulTiger/article/details/82147371
今日推荐