JavaScript 数据可视化 + 常见的数据可视化库

最新推荐文章于 2024-03-08 22:31:50 发布

MDR_0820

最新推荐文章于 2024-03-08 22:31:50 发布

阅读量543

点赞数

分类专栏： JavaScript 文章标签： javascript echarts 开发语言

本文链接：https://blog.csdn.net/mdr_0820/article/details/121116679

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

数据可视化

数据可视化的主要目的：借助于图形化手段清晰有效的传达与沟通信息
数据可视化可以把数字转换为图形揭示蕴含在数据中的规律和道理

数据可视化的使用场景

在这里插入图片描述

常见的数据可视化库

D3.js 目前web端评价最高的JavaScript可视化工具库（入手难）
ECharts.js 百度出品的一个开源JavaScript数据可视化库
Highcharts.js 国外的前端数据可视化库
Antv 蚂蚁金服全新一代数据可视化解决方案
等等

<style>
        .box{
            width: 400px;
            height: 400px;
            background-color: skyblue;
        }
    </style>
      <!-- 引入 Echarts.min.js 文件  -->
    <script src="js/Echarts.min.js"></script>
</head>
<body>
      <!-- 准备一个盒子装生成的图表 这个盒子必须具备大小 -->
    <div class="box"></div>

    <script>
        // 初始化Echarts实例对象
       var myChart =  echarts.init(document.querySelector('.box'))
        // 指定配置项和数据
       var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 将配置项和数据（option） 设置给实例对象（myChart）
      myChart.setOption(option);
    </script>
</body>

在这里插入图片描述

相关配置

在这里插入图片描述

引入使用

<style>
        .box{
            width: 1000px;
            height: 800px;
            /* background-color: slategray; */
        }
    </style>
    <script src="js/Echarts.min.js"></script>
</head>
<body>
    <div class="box"></div>
    <script>
        var myChart = echarts.init(document.querySelector('.box'))
        option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                name: 'Email',
                type: 'line',    // 图表类型 是线性图
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
            };
            myChart.setOption(option);

    </script>
</body>

在这里插入图片描述

serise :系列列表

type ：类型什么类型的图表（比如 line是折线型 bar 是柱形等）
name：系列名称用于tooltip 的显示 legend的图形筛选变化
stack：数据堆叠如果设置相同值则会数据堆叠
数据堆叠：
第二个数据值 = 第一个数据值 + 第二个数据值
第三个数据值 = 第二个数据值+ 第三个数据值
以此叠加…
如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠

…
// stack: ‘Total’, 去掉stack 就不会产生数据堆叠图表就会很准
在这里插入图片描述

Echarts网站：https://echarts.apache.org/zh/index.html

MDR_0820

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 数据可视化 + 常见的数据可视化库

数据可视化数据可视化的主要目的：借助于图形化手段清晰有效的传达与沟通信息数据可视化可以把数字转换为图形揭示蕴含在数据中的规律和道理数据可视化的使用场景常见的数据可视化库D3.js 目前web端评价最高的JavaScript可视化工具库（入手难）ECharts.js 百度出品的一个开源JavaScript数据可视化库Highcharts.js 国外的前端数据可视化库Antv 蚂蚁金服全新一代数据可视化解决方案等等<style> .box{
复制链接

扫一扫