一、开发人员之间的协调：

前端应该对图表的数据要有一个大概的认知，比如产品给我们原型稿，ui再根据原型稿进行相对应的美化加工，但是ui不一定是对业务比较了解的，那么这个时候前端，还是会起到一定的协调作用的，在每次需求列会的时候，就应该提出自己的见解，如果是不合理的情况之下，就需要提出不合理的地方所在，其实在绝大数情况之下ui和产品对技术方面都会有一点欠缺的，会提出一些不是相对合理的图表展示需求，因而还是会大量提高前端的开发难度，所以我们还是得对echarts图表有一定的认知，这样就不至于在每次开发的时候，都会进行缓慢，以上是我们确定了echarts的基本架子，那么我们可以先根据原型进行开发了，到时只需要再更具ui进行微调即可，因为ui其实在大多数情况之下，和原型也是相差不大的，如果我们一味地等待ui出来之后再开发是十分被动的，所以我们应该先开发，再矫正ui，这是我们和ui以及产品的触发，接下来就是后端的数据，交流了，首先，我们更具ecahrts图表进行开发时，最开始当然是更具静态数据进行布局的，这个时候我们已经静态页面已经搭建好了，那么对数据而言会有一定的了解了，所以是可以和后端进行协商的，后端其实可以更具前端提供的数据格式进行相对应的json格式返回，这样，我们前端相对应的开发起来就会顺畅很多，当然并不是每次开发，后端都会返回前端想要的数据，前端在一定的情况之下，还是会进行数据处理，再进行渲染的，这样无疑提高了前端的工作量，但是我想说，在开发的过程我们还是的根据双方之间的便利性来进行彼此之间的处理，但是理应遵行最好后端处理数据，前端进行布局，这样则会大大提升展示的优化性问题，但是一定要和后端沟通好哦，不能总是顺从后端，总什么数据都往前端扔，如果今后涉及到大量的图标开发，则会十分难受的，前端还是在某一些特定的时段强硬一些的，这是我在公司初始开发图表时所遇到问题，当然开发的越多之后，整个团队的开发质量也会越来越好，好了，这一节课，我们大概了解图表的开发流程，下一节我们就去了解一下ecahrts的一些基本数据类型以及echarts的相关属性吧，

二、echarts图表的基本数据类型：

Ehacrt图表中的series属性就是图表的数据源，他是一个数组，它里面包含的是对象，注意如果是显示几个折现或者是柱形，那么series里面就有几个对象，对象里面的data属性接收的就是我们的数据，常见的数据接收格式是数组 [1,2,13,312,312,3,213,1] 第二种就是数组里面包含数组 [[‘1’,1],[‘2’,2],[‘3’,3]] ，下标1数组中的字符串1就是我们x轴下面的名称，他是为了，直接和x轴相对应，也就是说‘1’就会对应x轴中的相同名称的点第三种则是 [{ endDate: '2022-07-17', startDate: '2022-07-11', stock: 9800, unit: '万方', value: 9800, },] 。echarts则会自动识别数组中的对应下标对象中是否含有value属性，如果有则会填充到图表中

后端返回数据

     lastYearStocks: [
        {
          date: "2021-12-20",
          infoId: "491",
          stock: 58.9,
          stock2: 158.9,
          type: 1,
          unit: "%",
        },
        {
          date: "2021-12-21",
          infoId: "492",
          stock: 58.2,
          stock2: 158.9,
          type: 1,
          unit: "%",
        },
        {
          date: "2021-12-22",
          infoId: "493",
          stock: 57.5,
          stock2: 158.9,
          type: 1,
          unit: "%",
        },
        {
          date: "2021-12-23",
          infoId: "494",
          stock2: 158.9,
          stock: 56.9,
          type: 1,
          unit: "%",
        },
        {
          date: "2021-12-24",
          infoId: "495",
          stock2: 158.9,
          stock: 56.6,
          type: 1,
          unit: "%",
        },
        {
          date: "2021-12-25",
          infoId: "496",
          stock: 54.6,
          stock2: 158.9,
          type: 1,
          unit: "%",
        },
        {
          date: "2021-12-26",
          infoId: "497",
          stock: 54.3,
          type: 1,
          stock2: 158.9,
          unit: "%",
        },
        {
          date: "2021-12-27",
          infoId: "498",
          stock: 54,
          type: 1,
          stock2: 158.9,
          unit: "%",
        },
        {
          date: "2021-12-28",
          infoId: "499",
          stock: 53.7,
          type: 1,
          stock2: 158.9,
          unit: "%",
        },
        {
          date: "2021-12-29",
          infoId: "500",
          stock: 53.6,
          stock2: 158.9,
          type: 1,
          unit: "%",
        },
        {
          date: "2021-12-30",
          infoId: "501",
          stock: 53.6,
          stock2: 158.9,
          type: 1,
          unit: "%",
        },
        {
          date: "2021-12-31",
          infoId: "502",
          stock: 53.8,
          type: 1,
          stock2: 158.9,
          unit: "%",
        },
      ],

前端转换相对应的数据格式：

三、属性统计

折线的名称：series[0].name
            折线的类型：series[0].type
            折线是否平滑：series[0].smooth
            调节折线的上面圆珠的类型，该处就是使圆珠为实心，图列也是：series[0].symbol
           调节折线的上面圆珠的大小尺寸：series[0].symbolSize
            折线的属性样式设置：series[0].lineStyle
            控制折线上面每个点的内容的属性：series[0].label
            折线的下面的区域面积的样式，可是设置渐变色：series[0].areaStyle
           X轴名称的数据源：xAxis[0].data

echarts图表的开发流程

一、开发人员之间的协调：

二、echarts图表的基本数据类型：

三、属性统计