echarts环形图配置

Posted 2020-10-31 it-web

itemMoneys(){
  let myChart = echarts.init(document.getElementById("money"))
  window.addEventListener("resize",function(){
    myChart.resize();
  });
  var  moneyLegendData=[];//金额图例
  for(let i=0;i<this.categoryInfoList.length;i++ ){
    moneyLegendData.push(this.categoryInfoList[i].purchaseCategory)
  }
  var ss=formatMoney( this.totalAmount);
    myChart.setOption({
    tooltip: {
      trigger: ‘item‘,
      formatter:function(obj){
        return obj.name + "<br>" + formatMoney(obj.value)
      }
    },
    legend: {
      x : ‘center‘,
      bottom : 30,
      itemGap:20,
      icon : ‘circle‘,
      data:moneyLegendData
    },
    series: [
      {
        name:‘访问来源‘,
        type:‘pie‘,
        radius: [‘66%‘, ‘70%‘],
        center : [‘50%‘, ‘40%‘],
        avoidLabelOverlap: false,
        label: {
          normal: 
　　　　　　　　//显示的文本居中在图形中，换行也居中对齐
　　　　　　  formatter:‘总金额\\n\\n‘+ss,

            fontSize:16,
            lineHeight:24,
            color:"#717171",
            show: true, position: ‘center‘},
          emphasis: {
            show: true
          }
        },
        labelLine: {normal: {show: false}},
        data:[
          {value:Number(this.categoryInfoList[0].purchaseAmount), name:this.categoryInfoList[0].purchaseCategory,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: ‘#03a1fd‘},
                  {offset: 1, color: ‘#0de5a7‘}
                ])
              }
            }
          },
          {value:Number(this.categoryInfoList[1].purchaseAmount), name:this.categoryInfoList[1].purchaseCategory,
            itemStyle: {
              normal: {//渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: ‘#C9C7F7‘},
                  {offset: 1, color: ‘#C6C3F5‘}
                  ])
              }
            }
          },
          {value:Number(this.categoryInfoList[2].purchaseAmount), name:this.categoryInfoList[2].purchaseCategory,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: ‘#EF8690‘},
                  {offset: 1, color: ‘#FEC772‘}
                ])
              }
            }
           },
          {value:Number(this.categoryInfoList[3].purchaseAmount), name:this.categoryInfoList[3].purchaseCategory,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: ‘#E986DE‘},
                  {offset: 1, color: ‘#E866A1‘}
                ])
              }
            }
          },
          {value:Number(this.categoryInfoList[4].purchaseAmount), name:this.categoryInfoList[4].purchaseCategory,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: ‘#ddd‘},
                  {offset: 1, color: ‘#ddd‘}
                ])
              }
            }
          },
          {value:Number(this.categoryInfoList[5].purchaseAmount), name:this.categoryInfoList[5].purchaseCategory,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: ‘#80F0C5‘},
                  {offset: 1, color: ‘#62F279‘}
                ])
              }
            }
          }
        ]
      }
    ]
  })
},

效果图：