echarts关于一次性绘制多个饼图 (基于vue3)

在echarts中，`dataset` 和 `source` 是用来配置数据的选项。

`dataset` 是一个包含数据相关配置的对象，用于指定数据的来源和格式。它可以包含多个维度的数据集，每个维度都可以有自己的名称和数据。

`source` 是 `dataset` 中的一个子项，用于指定数据的具体内容。在这个例子中，`source` 的值是一个二维数组，表示具体的数据。每一行代表一个数据条目，每一列代表一个维度。

数据格式为：

dataset: {

        source: [

            ['状态', '2012', '2013', '2014', '2015', '2016', '2017'],

            ['运行', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],

            ['离线', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],

            ['待机', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],

            ['休眠', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]

        ]

    }

可以把整体理解成一个表格，第一行就是表格的标题，其次就是对应的参数，因为后面用到这个数据的时候这样理解会用起来方便些

老规矩直接上代码和注释  

 
<script>
import { onMounted } from 'vue';
import  echarts from "../assets/echarts";
export default {
    setup(){
    onMounted(()=>{
    let ini =   echarts.init(document.getElementById('gy'))
     ini.setOption({
    legend: {},
    tooltip: {},
    // 可以把整体理解成一个表格，第一行就是表格的标题，
    // 其次就是对应的参数，因为后面用到这个数据的时候这样理解会用起来方便些
    dataset: {
         //source为子配置项，数据源
        source: [
            ['状态', '2012', '2013', '2014', '2015', '2016', '2017'],   //数据标题
            ['运行', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],               //数据
            ['离线', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ['待机', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ['休眠', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
        ]
    },
    series: [{
        type: 'pie',
        radius: 60,        //半径，饼图的大小
        center: ['25%', '30%'],     //图表位置 center:['上下','左右']
         encode:{  
             itemName:'状态',        //数据标题名
             value:'2012'            //数据集
         }
        //  注意的是如果不设置encode对应的数据，它默认是从 itemName 取source第一行第一个,value 取source 第一行第二个
    }, {
        type: 'pie',
        radius: 60,
        center: ['75%', '30%'],      //图表位置 center:['上下','左右']
         encode: {
             itemName: '状态',         //数据标题名 
             value: '2013'             //数据集
         }
    }, {
        type: 'pie',
        radius: 60,
        center: ['25%', '75%'],          //图表位置 center:['上下','左右']
         encode: {
             itemName: '状态',          //数据标题名
             value: '2014'              //数据集
         }
    }, {
        type: 'pie',
        radius: 60,
        center: ['75%', '75%'],         //图表位置 center:['上下','左右']
         encode: {
             itemName: '状态',      //数据标题名
             value: '2015'          //数据集
         },     
        
    }
    ]
})
     
    })
    }
    
}
script>
 
<style>
#gy{
    width:800px;
    height: 500px;
    border: 1px red solid;
}
style>

 运行截图