在前端工作中我們會經(jīng)常遇使用echart來做圖表，餅狀圖和圖例也是大家經(jīng)常會使用到的，這里文匯軟件小編就來為大家介紹如何更換工具條的圖標及如何調(diào)整餅狀圖的大小。

首先我們先了解如何使用echart,echart的具體配置項就在其官網(wǎng)文檔里的配置項手冊中，echart一共有22種類型，但是我們經(jīng)常使用的大部分都是折線圖、餅狀圖和柱狀圖。

我們今天主要了解餅狀圖，以下圖為例：

它所對應(yīng)的代碼如下圖：

    var myChart =document.getElementById('LAY-index-dataview1');

        // 繪制圖表。

        echarts.init(myChart).setOption({

             title : {

            text: '科室分布',

  x: 'center',

        y: 290,

            textStyle:{

                color:'#666',

                fontWeight:'normal',}

            },

            series: {

                name:'aaa',

                type: 'pie',

   radius : '55%',

            center: ['50%', '50%'],

                data: res

            },

      toolbox: {

    bottom:"0",

    height:330,

　　　　show : true,

     right: '0',

  top: '0',

　　　　feature : {

　　　　　　dataView : {show: true, readOnly: false,  icon: 'image://http://pb.i.cnwenhui.com/views/images/echart_1.jpg',},

　　　　　　restore : {show: true,  icon: 'image://http://pb.i.cnwenhui.com/views/images/echart_2.jpg',},

　　　　　　saveAsImage : {show: true,  icon: 'image://http://http://pb.i.cnwenhui.com/views/images/echart_3.jpg',},

　　　　}

　　},

            tooltip: {

            // trigger 設(shè)置觸發(fā)類型，默認數(shù)據(jù)觸發(fā)，可選值：'item' | 'axis'

            trigger: 'item',

            showDelay: 20,   // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms

            hideDelay: 20,   // 隱藏延遲，單位ms

            backgroundColor: 'rgba(0,0,0,0.4)',  // 提示框背景顏色

            textStyle: {

              fontSize: '16px',

              color: '#fff'  // 設(shè)置文本顏色 默認#FFF

            },

            // formatter設(shè)置提示框顯示內(nèi)容

            // {a}指series.name  指series.data的name

            // {c}指series.data的value  txlcv4s%指這一部分占總數(shù)的百分比

            formatter: ' : {c}個 (a5y84kl%)'

          },

          itemStyle: {

                emphasis: {

                    shadowBlur: 10,

                    shadowOffsetX: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        });

其中toolbox指的是工具欄。內(nèi)置有導(dǎo)出圖片，數(shù)據(jù)視圖，動態(tài)類型切換，數(shù)據(jù)區(qū)域縮放，重置五個工具。toolbox中的feature指的是各工具配置項。除了各個內(nèi)置的工具按鈕外，還可以自定義工具按鈕。像是這次我們就只定義了數(shù)據(jù)視圖、還原和保存為圖片三個工具條，他們默認的圖標為下圖：

但是我們可以通過feature中每個不同的配置項的icon指定每個不同的圖標

feature : {

　　　　　　dataView : {show: true, readOnly: false,  icon: 'image://http://pb.i.cnwenhui.com/views/images/echart_1.jpg',},

　　　　　　restore : {show: true,  icon: 'image://http://pb.i.cnwenhui.com/views/images/echart_2.jpg',},

　　　　　　saveAsImage : {show: true,  icon: 'image://http://http://pb.i.cnwenhui.com/views/images/echart_3.jpg',},

　　　　}

最終如下圖所示：

另外對于圓形在區(qū)域中的大小可以通過series中的radius屬性來調(diào)整

   series: {

                name:'aaa',

                type: 'pie',

   radius : '75%',

            center: ['50%', '50%'],

                data: res

            },

結(jié)果如下圖所示：

好了，今天就是文匯軟件小編為大家分享的文章，如果喜歡小編的話就來文匯軟件來看小編更多的文章吧。