数据可视化大屏——基于echarts的开发经验分享-Toy模板网

这篇具有很好参考价值的文章主要介绍了数据可视化大屏——基于echarts的开发经验分享。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

各位同事大家好！下面是我使用echarts中总结的一些个人经验，仅供参考。

echarts的能力、优劣等特点大家应该在技术选型阶段已经有所了解，这里主要分享使用、设计等经验。

一、最简单的步骤概述

echarts由无到有一共只需要四步：

引入echarts资源：支持模块化项目使用npm下载引入，老项目使用script方式链接引入，只是试用、演示且互联网环境，可以使用cdn方式引入。
创建一个div容器：echarts图表在页面中显示，需要有一个容器来盛放，告诉浏览器应该在哪渲染，注意这个容器一定是有宽、高的dom元素，否则有可能图表渲染成功，但是高度为0，导致无法显示。
初始化一个echarts实例：echarts所有的属性、方法都封装在我们引入的资源里，这个初始化的实例，就是一个带着所有属性和方法的对象，方便我们通过这个对象直接调用echarts提供的所有属性和方法。
设置echarts参数：获得echarts实例后，我们就能为它设置各种参数，来实现各种图表样式。

二、最简单的demo

引入官网的demo：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!--第一步：引入echarts资源-->
    <script src="echarts.js"></script>  
  </head>
  <body>
    <!--第二步：创建定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 第三步：初始化实例，并告诉实例应该渲染到哪个DOM
      var myChart = echarts.init(document.getElementById('main'));
      //第四步：指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

三、工作流程

大屏开发工作一般要经历以下几个主要流程节点：

用户需求 -> 大屏设计 -> 美工优化-> 前端开发 -> 后端接口提供。

单纯的前端开发，主要对接人员是美工与后端，并在大屏设计节点，提供技术难度、可行性等参数。

3.1 与美工合作

美工主要负责大屏页面设计与交互设计等工作，输出为设计稿文件，前端开发依稿开发。这里要注意的是美工提供的动画设计，实现方案可选以下几种：

简单动画效果，使用纯CSS实现。例如：几何变化、大小变化、颜色变化、透明度变化等。
复杂动画效果，推荐使用lottie动画插件。由美工设计实现动画，输出动画json文件，前端负责渲染、控制动画。
另一种动画插件补充——svga：其实就是svg+animation，只不过不需要前端手动写svg动画，而是由美工生成svga文件，前端负责渲染svga文件。与lottie相比各有优劣。
复杂动画手动实现，推荐gsap插件。由flash动画插件原班人马开发，可以理解为flash的js实现。除了开发成本高，学习成本高，其它都是优点。

各位同事大部分是经验丰富的前辈，应该比我更清楚，项目中，能力最强大的插件，不一定是最适合的。所以对于要求一般的场景，止步于lottie动画即可。