echart 饼图1

 

<div id="mainType" style="width:100%;height:210px"></div>

mounted(){
        var chartDom = document.getElementById('mainType');
        var myChart = echarts.init(chartDom);
        var option = {
          color:['#0F97FF', '#FFBB02', '#64D099','#3A65E4','#FF6050','#FF9393'],
            tooltip: {
                trigger: 'item',
            },
            legend: {
              align : 'left',
              orient : 'vertical',
              width:'100%',
              height:320,
              top:'20%',
              left:'50%',
              itemWidth:13,
              borderWidth:0,
              borderRadius:0,
              itemHeight:13,
              itemGap: 10, // 设置间距
              textStyle:{
                color:'#333333',
                fontSize:12,
                rich: {
                  // 通过富文本rich给每个项设置样式，下面的oneone"每一列"的样式
                  two: {
                    // 设置百分比这一列的样式
                    fontSize: 16,
                  },
                },
              },
              selectedMode:false,//取消图例上的点击事件
              formatter: function(name) {
                // 获取legend显示内容
                let data = option.series[0].data;
                let total = 0;
                let tarValue = 0;
                for (let i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                        tarValue = data[i].value;
                    }
                }
                let p = (tarValue / total * 100).toFixed(0);
                return `{one|${name}}     {two|${p}}{three|%}`;
              },
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['57%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'left'
                    },
                    center:['25%','50%'],
                    itemStyle:{
                      normal: {
                        borderWidth: 2,
                        borderColor: '#fff',
                      }
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 320, name: '产业用房'},
                        {value: 320, name: '业务支持'},
                        {value: 410, name: '产业扶持'},
                        {value: 320, name: '城市更新'},
                        {value: 270, name: '人才住房'},
                    ],
                }
            ]
        };
        option && myChart.setOption(option);
    }