数据可视化ECharts知识点

最新推荐文章于 2024-07-25 15:29:53 发布

千字符

最新推荐文章于 2024-07-25 15:29:53 发布

阅读量1k

点赞数 32

文章标签：信息可视化 echarts 数据分析

本文链接：https://blog.csdn.net/abcd661054026/article/details/136550526

版权

数据可视化

数据可视化主要目的：借助图形化手段，清晰有效地传达与沟通信息。

基于flexible.js和cssrem插件实现屏幕适配

屏幕适配：对于不同尺寸的屏幕，页面可以自适应的等比例缩放。

flexible.js：是淘宝开发出的一个用来适配移动端的js框架。根据不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。

cssrem插件：在插件内设置好 x rem = y px，当我们在文件中输入任意px时，会帮我们自动转换为相应的rem。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>数据可视化</title>

<link rel="stylesheet" href="css/index.css"/>

</head>

<body>



<script src="js/flexible.js"></script>

</body>

</html>

当出现下图就说明导入成功了

设置flexible.js

调整cssrem设置

ECharts

下载 - Apache ECharts

ECharts入门

使用ECharts步骤

1.下载Echarts

2.准备一个Dom容器

3.初始化ECharts实例对象

4.指定配置项和数据

5.把配置项设置给echarts实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化</title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
    <!-- 准备Dom容器 必须有大小 -->
    <div class="box" style="width: 500px;height: 500px;background-color: pink;"></div>
    <!-- 导入echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script>
        <!-- 初始化 echarts -->
        //代码： echarts.init(Dom容器)
        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]
          }
        ]
      };
      //将配置项设置给echarts实例对象
      myChart.setOption(option);

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

ECharts基础配置

主要配置：series，xAxis，yAxis，grid，tooltip，title，legend，color

series：

系列列表。每个系列通过type决定自己的图标类型。（可以多个图标重叠）

xAxis：直角坐标系grid中的x轴

boundaryGap：坐标轴两边留白策略true，这时候刻度只是作为分隔符，标签和

数据点都会在两个刻度之间的带中间。

yAxis：直角坐标系grid中的y轴

grid：直角坐标系内绘图网格

tooltip：提示框组件

toolbox：工具箱组件

title：标题组件

legend：图案组件

color：调色盘颜色列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <!-- 准备Dom容器 必须有大小 -->
    <div class="box" style="width: 800px;height: 600px;margin: auto;margin-top: 50px;"></div>
    <!-- 导入echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script>
        <!-- 初始化 echarts -->
        //代码： echarts.init(Dom容器)
        var myChart = echarts.init(document.querySelector(".box"));
        //指定配置项和数据
        option = {
            // 设置线条的颜色，数组类型
            color: ['pink','red','green'],
            // 配置图标标题
            title: {
                text: 'Stacked Line'
            },
            // 图标的提示框组件 
            tooltip: {
                // 触发方式 axis，item，none
                trigger: 'axis'
            },
            // 图例组件，可以通过点击显示或隐藏
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            //网格配置  grid可以控制线形图，柱状图等的大小
            grid: {
                //如：left：3% 指grid容器的左侧距离Dom容器的左侧3%
                left: '3%',
                right: '4%',
                bottom: '3%',
                // 刻度标签是否显示
                containLabel: true
            },
            // 工具箱组件 可以另存为图片等功能
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            // X轴的相关配置 xAxis和yAxis的type可以设置为category和value，也可以颠倒
            xAxis: {
                type: 'category',
                //数据是否与坐标轴有间隙
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            // 系列图标配置，决定着显示哪种类型的图标
            // 如折线图，每有一个数据，就有一条线
            series: [
                {
                    // 数据名：如果series的数据有name，那legend里的data可以不要，但legend需要，它控制数据是否显示
                    name: 'Email',
                    // 该数据是折线图，如果为bar则为柱状图
                    type: 'line',
                    // 数据堆叠，下一个数据在表上的显示会在这个数据上叠加
                    // 如 现在为120，下个为220，那在表上这个数据为120，下个为340
                    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]
                }
            ]
        };
        //将配置项设置给echarts实例对象
        myChart.setOption(option);

    </script>
</body>

</html>

图标自适应缩放

window.addEventListener('resize',function () {

myChart.resize()

})

千字符

关注

32
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
数据可视化ECharts知识点

flexible.js：是淘宝开发出的一个用来适配移动端的js框架。根据不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。cssrem插件：在插件内设置好 x rem = y px，当我们在文件中输入任意px时，会帮我们自动转换为相应的rem。主要配置：series，xAxis，yAxis，grid，tooltip，title，legend，color。屏幕适配：对于不同尺寸的屏幕，页面可以自适应的等比例缩放。
复制链接

扫一扫