蚂蚁图表 f2 手机端饼图

远程文件引用

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
  <script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2-all.min.js"></script>

html

<!-- 信息各平台分布占比 -->
        <div class="content">
            <div class="content-title" @click="leavePage">信息各平台分布占比</div>
            <canvas id="myChart" style="width:95vw;height:30vh"></canvas>
        </div>

js

InformationEcharts() {
                // 信息分布
		const data = data = [{
		  name: '芳华',
		  percent: 40,
		  a: '1'
		}, {
		  name: '妖猫传',
		  percent: 20,
		  a: '1'
		}, {
		  name: '机器之血',
		  percent: 18,
		  a: '1'
		}, {
		  name: '心理罪',
		  percent: 15,
		  a: '1'
		}, {
		  name: '寻梦环游记',
		  percent:5,
		  a: '1'
		}, {
		  name: '其他',
		  percent: 2,
		  a: '1'
		}];
    const map = {};
       data.forEach(function (obj) {
           map[obj.name] = obj.percent;
       });
       const chart = new F2.Chart({
           id: 'myChart',
           pixelRatio: window.devicePixelRatio
       });
       chart.source(data, {
           percent: {
               formatter: function formatter(val) {
                   return val * 100 + '%';
               }
           }

       });

       chart.legend({
           nameStyle: {
               fontSize: 20, // 文本大小
               height: 28
           },
           position: 'right',
           itemFormatter: function itemFormatter(val) {
               // return val;
               return val + '  ' + map[val];
           },
       });
       chart.tooltip(false);
       chart.coord('polar', {
           transposed: true,
           radius: 0.85
       });
       chart.axis(false);
       chart.interval()
           .position('a*percent')
           .color('dictLabel', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
           .adjust('stack')
           .style({
               lineWidth: 1,
               stroke: '#fff',
               lineJoin: 'round',
               lineCap: 'round',
           })
           .animate({
               appear: {
                   duration: 1200,
                   easing: 'bounceOut'
               }
           });

       chart.render();
   },