echarts環形圖如何添加指示線指示文字

左側爲官網實例          右側爲項目要求 

寫博客不是爲了博眼球 是爲了記筆記

 

      <div id="Circlechart"></div>

      Circlelinechart(){
        let myChart = echarts.init(document.getElementById("Circlechart"));       
        let option = {
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
              orient: 'horizontal',
              x: 'center',
              y : 'bottom',
              data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
          },
          series: [
              {
                  name:'訪問來源',
                  type:'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                      normal: {
                          show: true,   
                          position: 'outside'

                      },
                      emphasis: {
                          show: true,
                          textStyle: {
                              fontSize: '30',
                              fontWeight: 'bold'
                          }
                      }
                  },
                  labelLine: {
                      normal: {
                          show: true,
                          length: 20,
                          length2: 20,
                          lineStyle: {
                              color: '#333'
                          }

                      }
                  },
                  data:[
                      {value:335, name:'直接訪問'},
                      {value:310, name:'郵件營銷'},
                      {value:234, name:'聯盟廣告'},
                      {value:135, name:'視頻廣告'},
                      {value:1548, name:'搜索引擎'}
                  ]
              }
          ]
        };
      myChart.setOption(option);
      },

 不要忘記在mounted裏面調用函數

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