Echarts使用dataset数据集管理数据
2023-09-11 14:19:55 时间
1、可以看官网api的入门例子
使用常见的对象数组的格式
option = {
legend: {},
tooltip: {},
dataset: {
// 这里指定了维度名的顺序,从而可以利用默认的维度到坐标轴的映射。
// 如果不指定 dimensions,也可以通过指定 series.encode 完成映射,参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
第一个默认时x轴,后面是y轴
2、项目应用:
数据格式:
数据:
//5种不同维度
dimensions:[
['snap_time','active','idle','total'],
['snap_time','commits','rollbacks','transactions'],
['snap_time','inserts','updates','deletes'],
['snap_time','fetched','returned'],
['snap_time','reads','hits']
],
//dataset数据
dataset:{
dimensions:this.lineDime,
source:this.lineSeries//source取的全部数据
},
series: this.series
//series数据
let _obj = {
type:'line'
}
this.series.length = this.lineDime.length - 1
this.series.fill(_obj)
效果:
相关文章
- 高速基于echarts的大数据可视化
- [转]echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度 搜索后节点关键字标红
- vue cesium 集成 echarts 和 mapv 示例
- Echarts 数据可视化 5分钟【带你玩转】
- echarts+node+ajax实现时间天气服务器
- eCharts对数轴以及解决对数轴显示失败只显示1-10区间的问题
- Echarts动画效果:实现数据左右移动
- 大数据 │ ECharts与pyecharts数据可视化应用
- Web 插件 之 ECharts 实现中国地图数据的简单展示实现
- Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图)
- HTML Echarts图形统计实时显示DHT11温度(五)
- HTML Echarts图形统计实时显示DHT11温度(二)
- echarts 曲线图 显示小时整点数据,忽略分钟数据
- echarts 风向 风速 曲线首尾相连
- echarts画图时tooltip.formatter参数params不会更新(转载)
- Echarts实现——中国地图
- ECharts的介绍和使用方法,以及其他常见的数据可视化库介绍
- echarts饼图:实现多层图表同步自动轮播,鼠标悬浮时停止轮播,移出鼠标后重新开始轮播效果
- vue2+echarts:后台传递一天有多类数据的时候,如何渲染柱状图