vue中使用数据可视化

1.多坐标系

就是一个图表实现展现多个坐标系，一个坐标系就是一个grid

这里主要用到关键几个属性：grid,xAxis,yAxis,gridIndex,xAxisIndex,yAxisIndex

grid：定义坐标系网络

xAxis：x轴

yAxis: y轴

gridIndex：网络的下标从0开始，0代码第一个网格坐标,1代码第2个坐标系。。。。

xAxisIndex：代表横轴坐标编号 0代码第1个横轴。。。。

yAxisIndex：代纵轴坐标编号 0代码第1个纵轴。。。。

完整示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>
</head><body><div id="box" style="width: 100%; height: 800px"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
<script>function getChart() {//创建Echarts对象var myEchart = echarts.init(document.getElementById("box"));var options = {title: {text: "Echarts入门",},tooltip: {},//数据源dataset: {source: [['全栈', 11000, 14000, '初中', 150],['大数据', 9000, 3000, '高中', 100],['人工智能', 10000, 12060, '本科', 20],['测试', 8000, 11000, '中专', 30],]},grid: [{bottom:'50%',width:300}, {left:600,bottom:'50%',width:300},{width:300,top:500}],xAxis: [{type: 'category',gridIndex: 0}, {type: 'category',gridIndex: 1}, {type: 'category',gridIndex: 2}],yAxis: [{gridIndex:0}, {gridIndex:1},{gridIndex:2}],series: [{type: 'bar',xAxisIndex:0,yAxisIndex:0,encode: {x: 0,y: 1}}, {type: 'line',xAxisIndex:1,yAxisIndex:1,encode: {x: 0,y: 2}},{type: 'bar',xAxisIndex:2,yAxisIndex:2,encode: {x: 0,y: 2}}]};myEchart.setOption(options);myEchart.resize()}window.onload = function() {getChart()window.onresize = function() {getChart()};};
</script></html>

目前国内基于数据可视化解决方案：
- 百度 sugar
- 腾讯云图
- 阿里 dataV
vue初始化项目
安装element ui和echarts

1.vue add element

How do you want to import Element?
Fully import //完整引入
❯ Import on demand //按需引入，可以节约打包空间，文件小很多
1. npm install echarts
清理项目中无用的文件
引入reset.css
项目组件拆分
- topView
- salesView
- bottomView
- mapView

vue中使用数据可视化相关推荐

Vue中使用数据可视化Echarts图表展示
目录 Echarts--商业级数据图表 Echarts支持的图表 Echarts的使用方法 Echarts--商业级数据图表商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览 ...
【AI白身境】深度学习中的数据可视化
文章首发于微信公众号<有三AI> [AI白身境]深度学习中的数据可视化今天是新专栏<AI白身境>的第八篇,所谓白身,就是什么都不会,还没有进入角色. 上一节我们已经讲述了如何 ...
【Python】在模仿中精进数据可视化09：近期基金涨幅排行可视化
❝ 本文完整代码及数据已上传至Github仓库https://github.com/CNFeffery/FefferyViz ❞ 1 简介最近几个月一是工作繁忙,二是将业余的注意力多数放在Dash系 ...
ROS机器人程序设计（原书第2版）3.9.1　使用rqt_rviz在3D世界中实现数据可视化
3.9.1 使用rqt_rviz在3D世界中实现数据可视化在roscore运行时,启动rqt_rviz(请注意rviz在ROS hydro中依然有效): 我们将会看到如下图所示的图形化工作界面: 在 ...
对pca降维后的手写体数字图片数据分类_【AI白身境】深度学习中的数据可视化...
今天是新专栏<AI白身境>的第八篇,所谓白身,就是什么都不会,还没有进入角色. 上一节我们已经讲述了如何用爬虫爬取数据,那爬取完数据之后就应该是进行处理了,一个很常用的手段是数据可视化. ...
大数据 vr csdn_VR中的数据可视化如何革命化科学
大数据 vr csdn Astronomy has become a big data discipline, and the ever growing databases in modern ast ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
r语言中进行数据可视化_R中的数据可视化
r语言中进行数据可视化 R programming was developed in 1993 for making graphs and producing statistical results. ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...

vue中使用数据可视化

vue中使用数据可视化相关推荐

最新文章

热门文章