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 //按需引入,可以节约打包空间,文件小很多

    1. npm install echarts
  • 清理项目中无用的文件

  • 引入reset.css

  • 项目组件拆分

    • topView

    • salesView

    • bottomView

    • mapView

以上是关于vue中使用数据可视化的主要内容,如果未能解决你的问题,请参考以下文章

存储-国内知名医药大学录播教室应用Infortrend存储

大数据抓取软件哪个好用

使用 Vue 开发 Electron 桌面应用入门

python实战爬虫+数据可视化帮表弟选大学,直呼牛X

现在都有哪些常用的大数据分析工具?

BI的介绍