Echarts数据动态可视化的实现

怼烎@ 2023-06-16 07:24 10阅读 0赞

### Echarts简介 ###

Echarts缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行。与此相同的数据可视化插件还有Highcharts。不过我还是比较喜欢还是Echarts(支持国货)，这篇文章讲解从Echarts的基础入门到通过Echarts制作动态图表。

### 使用步骤 ###

##### 1.下载Echarts插件 #####

可以去Echarts官网下载Echarts插件  
![ecahrts下载][ecahrts]  
可以进行在线定制，可能有人会在选择定制的模块上很纠结，一句话：你觉得你可能用的上的模块都勾上就行了。  
下载成功后是这个样子：  
![在这里插入图片描述][20191217084024449.png]

##### 2.通过插件开始编写图表 #####

先将插件导入自己的工程  
我用的webStrom，我的工程目录大概是这样子的（内容比较简单）：  
![在这里插入图片描述][20191217084451770.png]  
工程中也就两个js文件，以及一个页面  
学过html都知道html文件就是将页面的大体框架部署出来就OK了，不需要在里面进行复杂的修饰，所以我将要写的js文件一并放到了index.js文件中

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    
        <script src="js/echarts.min.js"></script>
    
        <script src="js/index.js"></script>
        <title>Title</title>
    </head>
    <style>
        *{
        
            margin: 0;
            padding: 0;
        }
        .login-content{
        
            width: 1518px;
            height: 750px;
            margin: 0 auto;
            background-image: url("image/night_background.png");
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .title{
        
            font-size: 20px;
            width: 200px;
            height: 40px;
            margin: 0 auto;
            color: deepskyblue;
            text-align: center;
    
        }
        #echarts{
        
            width: 90%;
            height: 300px;
            margin: 0 auto;
        }
        #echarts3{
        
            width: 90%;
            height: 300px;
            margin: 0 auto;
        }
        #echarts2{
        
            width: 90%;
            height: 300px;
            margin: 0 auto;
        }
        .panel{
        
            margin-top: 100px;
            width: 500px;
            float: left;
        }
    </style>
    <body>
    <div class="login-content">
        <div class="panel">
    
            <div class="title">图表一</div>
            <div id="echarts" ></div>
        </div>
    
        <div class="panel">
    
            <div class="title">图表二</div>
            <div id="echarts2"></div>
        </div>
    
        <div class="panel">
            <div class="title">图表三</div>
            <div id="echarts3"></div>
        </div>
    </div>
    </body>
    </html>

html页面一目了然，也就是构建了一个大体的框架，由于小编为了展示出来的漂亮些，所以就给整个页面加了一个背景图片，如果嫌麻烦这完全可以去掉。

之后就可以开始编写index.js文件了，也就是正式编写可视化图表  
我直接源码展示出来：

这个js文件主要编写了三种图表：柱状图，饼状图，折线图  
上面代码备注了比较多的注释，更多关于其具体配置的详解可以在Echarts官网上查看：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODMwNzA1_size_16_color_FFFFFF_t_70]  
最终展现的的可视化界面也跟大家分享下吧：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODMwNzA1_size_16_color_FFFFFF_t_70 1]  
上面的代码只将图表一进行了动态化，剩下两个图表都是静态的，其原理与图表一的原理相似。  
**有问题可以或者需要前端资源可以留言或私聊噢！**

[ecahrts]: https://img-blog.csdnimg.cn/20191217083749191.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODMwNzA1,size_16,color_FFFFFF,t_70
[20191217084024449.png]: https://img-blog.csdnimg.cn/20191217084024449.png
[20191217084451770.png]: https://img-blog.csdnimg.cn/20191217084451770.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODMwNzA1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019121709053546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODMwNzA1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODMwNzA1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191217090747448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODMwNzA1,size_16,color_FFFFFF,t_70