数据可视化Echarts—— Echarts、设置cssrem 插件的基准值、边框图片、字体图标、立即执行函数用法、无缝滚动原理

本文链接：https://blog.csdn.net/weixin_52819925/article/details/119838218

数据可视化

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

数据可视化的场景：数据可视化在互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑&图分析，地理可视化等。

常见的数据可视化库

D3.js目前 Web 端评价最高的 Javascript 可视化工具库(入手难) 。
ECharts.js百度出品的一个开源 Javascript 数据可视化库。
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用。
AntV蚂蚁金服全新一代数据可视化解决方案。

Echarts

Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
官网网站：https://echarts.apache.org/zh/index.html
官方教程：[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)

Echarts-基本使用步骤

第一步：下载Echarts并引入Echarts：https://echarts.apache.org/zh/download.html —— 图表依赖这个js库

<script src="js/echarts.min.js"></script>

第二步：准备一个具备大小的DOM容器 —— 生成的图表会放入这个容器内（容器必须有大小）

<div id="main" style="width: 600px;height:400px;"></div>

第三步：初始化echarts实例对象 —— 实例化echarts对象

var myChart = echarts.init(document.getElementById('main'));

第四步：指定配置项和数据(option) —— 根据具体需求修改配置选项

var option = {
   
            title: {
   
                text: 'ECharts 入门示例'
            },
            tooltip: {
   },
            legend: {
    //legend:图例组件 （组件）图例组件展现了不同系列的标记(symbol)，颜色和名字
                data:['销量']
            },
            xAxis: {
    //Axis：轴
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
   },
            series: [{
    //series:自定义系列（系列）
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

第五步：将配置项设置给echarts实例对象 —— 让echarts对象根据修改好的配置生效

myChart.setOption(option);

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts体验</title>
    <style>
        .box {
     
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <!-- 1. 下载引入EChart.js 文件 -->
    <script src="js/echarts.min.js"></script>
</head>