echarts使用之饼图

公司数据可视化项目需要大量的用到echarts图表，今天总结下饼图的使用。
参照echarts官方文档，三步走

• 1、引入echarts ：import echarts from “echarts”;
• 2、准备一个盒子
• 3、初始化echarts模型
  下面是完整的代码

<template>
    <div class="pie-chart"></div>
</template>
<script>
import echarts from "echarts";//引入
export default {
    name:"PieChart",
    props:["title","radius","monitoringData"],//通过props传饼图的标题、空心大小、数据
    data(){
        return{
            pieChart:"",
        }
    },
    mounted(){
        this.initPieChart();
    },
    methods:{
        initPieChart(){
            let _this=this;
            _this.pieChart=echarts.init(_this.$refs.pieChart,null,{
                render:"svg"// 使用SVG,避免页面缩放造成的模糊
            })

            let pieOption = {
            //标题样式
                title: {
                    text: _this.title[0],
                    left: "left",
                    top: "top",
                    padding: 10,
                    bottom:"20%",
                    textStyle: {
                        color: "#A0ADBC",
                        fontSize: 14
                        }
                },
                //鼠标移入文字样式
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {d}%"
                },
                grid: {
                    left:'20%',
                    right: '10%',
                    // bottom: '5%',
                },

                // 设置饼图的颜色，会根据数据条数自动渲染
                color: [
                    "#91C8E0",
                    "#B0D586",
                    "#69C1C2",
                    "#D9A175",
                    "#419BCC",
                    "#B1D5E0",
                    "#539AF1",
                    "#49B4E3",
                    "#71C075",
                    "#EECC5D",                
                ],
                //文本标签
                label:{
                    formatter:"{b}：{d}%",//显示格式:{a}：系列名.{b}：数据名.{c}：数据值.{d}：百分比
                    position:'outer',
                    alignTo:'labelLine',
                    bleedMargin:30
                },
                //系列列表，每个系列通过 type 决定自己的图表类型
                //line折线、pie饼图、bar柱状图，这几个比较常用
                series: [
                {
                    name: "监测事件",
                    type: "pie",
                    radius: [_this.radius, "50%"],//改属性可以设置空心饼图
                    center: ["50%", "50%"],
                    data:_this.monitoringData,
                }
                ]
            };
            _this.pieChart.setOption(pieOption);
            window.addEventListener("resize",function(){
                _this.pieChart.resize();
            })
        },
    }
}
</script>
<style lang="less">
.pie-chart{
    width: 100%;
    height: 100%;
    display: flex;
}
</style>

在这个饼图的绘制过程中我一直想要文本标签超出隐藏，找了很久的配置项，像是标签的对齐方式alignTo、文字边距margin、文字的出血线大小，超过出血线的文字将被裁剪为 '…'bleedMargin，只是万万没想到把整个label属性注释了就好了，，，，我晕~~~

最后

以上就是酷酷蚂蚁最近收集整理的关于echarts使用之饼图的全部内容，更多相关echarts使用之饼图内容请搜索靠谱客的其他文章。