在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]
]
}
可以把整体理解成一个表格,第一行就是表格的标题,其次就是对应的参数,因为后面用到这个数据的时候这样理解会用起来方便些
老规矩直接上代码和注释
<template> <div id="gy"></div> </template> <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>
运行截图