前言

各位同事大家好！下面是我使用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">// 第三步：初始化实例，并告诉实例应该渲染到哪个DOMvar 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动画即可。