vue中用echart写饼状图

最新推荐文章于 2024-09-04 17:34:55 发布

一名爱记录的程序媛

最新推荐文章于 2024-09-04 17:34:55 发布

阅读量1k

点赞数

分类专栏：笔记文章标签：大数据 echarts

本文链接：https://blog.csdn.net/qq_62449212/article/details/125719677

版权

这篇博客展示了如何在Vue项目中利用ECharts库创建饼状图，以展示男女比例。通过示例代码，作者详细解释了图表的实现过程，并呈现了最终效果。

摘要由CSDN通过智能技术生成

用echart饼状图实现男女比例

效果图如下：

实现代码如下：

<template>
    <div id="main" style="width: 32.9%;height:400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default{
    data() {
        return {
            ageYdata: ['>50', '41-50', '31-40', '24-30', '18-23', '<18'],
            sexYdata: [
                { value: 1048, name: '男' },
                { value: 735, name: '女' },
            ],
        }
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                title: {