vue中使用数据可视化
Posted ```飞翔的翅膀```
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 //按需引入，可以节约打包空间，文件小很多- npm install echarts
-
清理项目中无用的文件
-
引入reset.css
-
项目组件拆分
-
topView
-
salesView
-
bottomView
-
mapView
-
以上是关于vue中使用数据可视化的主要内容，如果未能解决你的问题，请参考以下文章