Echarts数据集（dataset）_心得技巧

上一篇: 交互联动下一篇:Java开发经验的有效总结，nginx实...

Echarts数据集（dataset）

发布时间：2022-07-04 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Echarts数据集（dataset），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1、Echarts使用dataset数据集管理项目

dataset组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用并且可以基于数据指定数据到视觉的映射。

下面是一个最简单的 dataset 的例子：

<!DOCTYPE htML><html><head> <;meta charset="utf-8"> <tITle>第一个 ECharts 实例</title>  <script src="https://cdn.statiCFile.org/echarts/4.3.0/echarts.min.js"></script></head><body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 VAR myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { legend: {}, tooltip: {}, dataset: { // 提供一份数据。 source: [ ['PRoduct', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut brownie', 72.4, 53.9, 39.1] ] }, // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。 xAxis: {type: 'category'}, // 声明一个 Y 轴，数值轴。 yAxis: {}, // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。 series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>