echarts使用心得（饼图）

饼图的使用

使用最新的echarts版本，引入script文件

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.0/echarts.min.js"></script>

html中放置一个div便可
js：

var myChart = echarts.init(document.querySelector('.gezhongleixing'));//括号里为div的class
 var option = {
                color: ['#AE57A4','#F57474','#9fe6b8'],//数据 有几个，颜色就会从第0位到length-1，多得没有用
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} ' + '类' + ': {c} ({d}%)',
                    confine:true
                },
                series: [{
                    name: '类型数量',
                    type: 'pie',   
                    radius: ["10%", "50%"],//修改这里可以改变饼图的大小
                    center: ['50%', '40%'],
                    // 半径模式  area面积模式
                    roseType: 'radius', //另一个属性为area，可以自行修改查看效果
                    avoidLabelOverlap: false,
                    // 图形的文字标签
                    label:{
                        show: true,
                        formatter: '{b}'  +'类' +  ': {c}',
                        color: 'inherit'  //新版本属性，可以让label的颜色与数据扇形的颜色一致
                    },
                    labelLine :{
                        show:true,  //标签的引线
                        length: 1,

                    },
                    data: cate //cate是一个包含对象的数组，[{},{},{}]
                }]
            };
            myChart.setOption(option);
             // 4.让图表随屏幕自适应
            window.addEventListener('resize', function () {
                myChart.resize();
            })