数据可视化进一步学习

最新推荐文章于 2024-10-06 14:44:47 发布

Eli-sun

最新推荐文章于 2024-10-06 14:44:47 发布

阅读量696

点赞数

分类专栏：数据可视化文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/vfjcgg/article/details/121725557

版权

数据可视化专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Highcharts

Highcharts是一个用纯JavaScript编写的一个图表库。

Highstock

Highstock是纯用JavaScript编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。

Highmaps

highmaps是一款基于HTML5的优秀地图组件。

echarts

<!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>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js"></script>
</head>
<style>
    #chart{
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <!-- 一个坐标系绘制多个图 -->
    <div id="chart"></div>
    <script>
        const chartDom = document.getElementById('chart')
        const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom 主体 渲染为svg
        chart.setOption({
            title:{
                text:'echarts入门案例'
            },
            xAxis:{
                data:['一季度','二季度','三季度','四季度']
            },// x轴
            yAxis:{

            },// y轴
            series:[{
                type:'pie',
                center:['70%',60],
                radius:35,
                data:[
                    {
                        name:'分类1',
                        value: 50
                    },
                    {
                        name:'分类2',
                        value: 60
                    },
                    {
                        name:'分类3',
                        value: 55
                    },
                    {
                        name:'分类4',
                        value: 70
                    }
                ]
            },{
                type:'line',
                data:[100,120,96,123]
            },{
                type:'bar',
                data:[79,81,88,72]
            }] // 图表类型和数据
        })

    </script>
</body>
</html>

dataset的使用

在这里插入图片描述

<!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>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js"></script>
</head>
<style>
    #chart{
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <!-- 一个坐标系绘制多个图 -->
    <div id="chart"></div>
    <script>
        const chartDom = document.getElementById('chart')
        const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom 主体 渲染为svg
        chart.setOption({
            dataset:{
                source:[
                    ['一季度',100,79,'分类一',50],
                    ['二季度',112,81,'分类二',60],
                    ['三季度',96,88,'分类三',55],
                    ['四季度',123,82, '分类四',70]
                ]
            },
            title:{
                text:'echarts入门案例'
            },
            xAxis:{
                data:['一季度','二季度','三季度','四季度']
            },// x轴
            yAxis:{

            },// y轴
            series:[{
                type:'pie',
                center:['70%',60],
                radius:35,
                encode:{itemName:3,value:4}
            },{
                type:'line',
                encode:{x:0,value:1}
            },{
                type:'bar',
                encode:{x:0,y:2}
            }] // 图表类型和数据
        })

    </script>
</body>
</html>

echarts组件

在这里插入图片描述

<!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>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js"></script>
</head>
<style>
    #chart{
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <!-- 一个坐标系绘制多个图 -->
    <div id="chart"></div>
    <script>
        const chartDom = document.getElementById('chart')
        const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom 主体 渲染为svg
        chart.setOption({
            dataset:{
                source:[
                    ['一季度',100,79,'分类一',50],
                    ['二季度',112,81,'分类二',60],
                    ['三季度',96,88,'分类三',55],
                    ['四季度',123,82, '分类四',70]
                ]
            },
            title:{
                text:'echarts入门案例',
                subtext:'数据可视化案例' // 副标题

            },
            xAxis:{
                data:['一季度','二季度','三季度','四季度']
            },// x轴
            yAxis:{

            },// y轴
            legend:{
                // data:['分类','折线图','柱状图']
                data:[{
                    name:'分类',
                    icon:'circle',
                    textStyle:{
                        color:"red"
                    }
                },'折线图','柱状图'],
                left:300
            },// 图例
            toolbox:{
                feature:{
                    dataZoom:{
                        yAxisIndex:false
                    },
                    restore:{},
                    saveAsImage:{}
                }
            },// 区域缩放 、区域还原 刷新和下载
            dataZoom:[
                {
                    show:true,
                    start:0,
                    end:100
                }
            ],// 下面那个横拉条
            series:[{
                name:'分类',
                type:'pie',
                center:['70%',60],
                radius:35,
                encode:{itemName:3,value:4}
            },{
                name:'折线图',
                type:'line',
                encode:{x:0,value:1}
            },{
                name:'柱状图',
                type:'bar',
                encode:{x:0,y:2}
            }] // 图表类型和数据
        })

    </script>
</body>
</html>

ECharts定位

在这里插入图片描述
可以通过调整grid来解决图的显示位置，可以树数值也可以是百分比

grid:{
                top:100,
                left:'10%',
                right:10,
                bottom:100
            },// 定位

整体代码：

<!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>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js"></script>
</head>
<style>
    #chart{
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <!-- 一个坐标系绘制多个图 -->
    <div id="chart"></div>
    <script>
        const chartDom = document.getElementById('chart')
        const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom 主体 渲染为svg
        chart.setOption({
            dataset:{
                source:[
                    ['一季度',100,79,'分类一',50],
                    ['二季度',112,81,'分类二',60],
                    ['三季度',96,88,'分类三',55],
                    ['四季度',123,82, '分类四',70]
                ]
            },
            title:{
                text:'echarts入门案例',
                subtext:'数据可视化案例' // 副标题

            },
            xAxis:{
                data:['一季度','二季度','三季度','四季度']
            },// x轴
            yAxis:{

            },// y轴
            legend:{
                // data:['分类','折线图','柱状图']
                data:[{
                    name:'分类',
                    icon:'circle',
                    textStyle:{
                        color:"red"
                    }
                },'折线图','柱状图'],
                left:300
            },// 图例
            grid:{
                top:100,
                left:'10%',
                right:10,
                bottom:100
            },// 定位
            toolbox:{
                feature:{
                    dataZoom:{
                        yAxisIndex:false
                    },
                    restore:{},
                    saveAsImage:{}
                }
            },// 区域缩放 、区域还原 刷新和下载
            dataZoom:[
                {
                    show:true,
                    start:0,
                    end:100
                }
            ],// 下面那个横拉条
            series:[{
                name:'分类',
                type:'pie',
                center:['70%',60],
                radius:35,
                encode:{itemName:3,value:4}
            },{
                name:'折线图',
                type:'line',
                encode:{x:0,value:1}
            },{
                name:'柱状图',
                type:'bar',
                encode:{x:0,y:2}
            }] // 图表类型和数据
        })

    </script>
</body>
</html>

ECharts坐标系

普通但坐标系散点图的案例

<!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>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js"></script>
</head>
<style>
    #chart{
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <div id="chart"></div>
    <script>
         const chartDom = document.getElementById('chart')
        const chart = echarts.init(chartDom)
        chart.setOption({
            xAxis:{},
            yAxis:{},
            dataset:{
                source:[
                [
                   13,44 
                ],
                [34,77],
                [44,78],
                [22,34],
                [12,55]
                ]
            },
            series:[{
                type:'scatter',
                encode:{x:0,y:1}
            }]
        })
    </script>
</body>
</html>

散点图双坐标系案例
在这里插入图片描述

ECharts 多坐标系

在这里插入图片描述

<!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>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js"></script>
</head>
<style>
    #chart{
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <div id="chart"></div>
    <script>
         const chartDom = document.getElementById('chart')
        const chart = echarts.init(chartDom)
        chart.setOption({
            xAxis:[{
                type:'category',
                gridIndex:0
            },{
                type:'category',
                gridIndex:1
            }],
            yAxis:[{
                min:0,
                max:100,
                gridIndex:0
            },
            {
                splitLine:{
                show:false
            },
            gridIndex:0
            },
            {
                min:0,
                max:150,
                gridIndex:1
            }
            
        ],
        grid:[{
            bottom:'55%'
        },{
            top:'55%'
        }],
            dataset:{
                source:[
                ['product','2012','2013','2014','2015'],
                ['Matcha Latte',41.1,30.4,65.1,53.3],
                ['Milk Tea',86.5,92.1,85.7,83.1]
                ]
            },
            series:[{
                type:'bar',
                seriesLayoutBy:'row',
                xAxisIndex:0,
                yAxisIndex:0
            },
            {
                type:'line',
                seriesLayoutBy:'row',
                xAxisIndex:0,
                yAxisIndex:1
            },
            {
                type:'bar',
                seriesLayoutBy:'row',
                xAxisIndex:1,
                yAxisIndex:2
            }
        ]
        })
    </script>
</body>
</html>