前端vue使用ECharts如何制作精美统计图

ECharts在vue中简单实现统计图

一、什么是ECharts

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

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

详情内容关注ECharts的官方文档，里面有更加详细的介绍！

二、在vue中使用ECharts

今天的重头戏来了，现在vue是很多公司前端的主流框架，我目前所在公司接触的项目也都是使用vue来实现的，很少有完全使用原生的JavaScript来写项目的了，所以今天也是详细记录一下vue中如何使用 ECharts来制作折线图，也算是对自己知识的一个补充。

1. 安装ECharts：npm install echarts --save
2. 在组件中引入：import echarts from “echarts”
3. 在view中定义一个带有宽高的容器：
4. 逻辑编写：

//drawAmountCharts为一个自定义方法     setOption是一个特定的方法，使用指定的配置项和数据显示图表
drawAmountCharts(id) {
      this.amountCharts = echarts.init(document.getElementById(id));
      this.amountCharts.setOption({
        title: {
          text: "学生成绩表",
          left: "center"
        },
        tooltip: {   //设置tip提示
          trigger: "axis"
        },
        legend: {  //设置区分（哪条线属于什么）
          y: "bottom",
          x: "center",
          data: ["学生成绩", "平均成绩"]  
        },
        color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
        grid: {
          left: "10%",
          right: "20%",
          bottom: "15%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {  //设置x轴
          name: "日期",  //X轴 name
          type: "category",
          boundaryGap: true,  //坐标轴两边留白
          nameTextStyle: {        //坐标轴名称的文字样式
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
                    lineStyle: {
                        color: '#FA6F53',
                    }
          },
          axisTick: {
            alignWithLabel: true
          },
          data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1']  //x轴的数据
        },
        yAxis: {
            name: '成绩',
            nameTextStyle: {
                color: '#FA6F53',
                fontSize: 16,
                padding: [0, 0, 10, 0]
            },
            axisLine: {
                lineStyle: {
                    color: '#FA6F53',
                }
            },
            type: 'value'
        },
        series: [
              {
                name: '平均成绩',
                data:  [220, 232, 201, 234, 290, 230, 220],
                type: 'line',               // 类型为折线图
                lineStyle: {                // 线条样式 => 必须使用normal属性
                    normal: {
                        color: '#8AE09F',
                    }
                },
              },
              {
                name: '学生成绩',
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#FA6F53',
                    }
                },
              }
          ]
      });
    }

这样一个简单的折线统计图就写好了，当然，现在只是写好的死数据，真实项目开发中就可以使用我们从后端请求来的真实数据了，然后将该函数写在某一个生命周期或者点击事件里面，根据实际需求进行相应的改变。

前端开发是一个神奇的岗位，祝愿自己在前端的学习道路上如鱼得水，也祝愿其他学习前端的小伙伴学的精，学的快，学的透！