前端深刻之Vue篇 丨如何在项目中优雅的使用Echarts（下）

写在前面

最近因为一些不可抗力因素，我跳槽去了一家作高校教育服务的公司，刚入职就正好遇上了PC端项目的重构，而我主要负责数据可视化这一模块，其实作起来不算复杂，可是在使用Echarts的过程当中也踩到了一些坑。

这是vue项目实战echarts的下篇，尚未看过上篇的同窗请点击这里进行查阅。通过了上一文章的学习， 相信你必定对如何在vue中使用echarts有了初步认识，能够在项目中熟练的绘制你想要的任何echart了。

上篇连接：前端深刻之Vue篇 丨如何在项目中优雅的使用Echarts（上）

尚未看过的小伙伴必定要先学习上篇练习一下呐~

但愿小伙伴阅读完以后能够在项目中掌握Echarts正确的使用方式，而且在个人基础上可以少踩一些坑。

在学习完上篇以后相信你必定会感受很简单的，而真正作项目，咱们的数据都是接口请求返回来的，如何将返回的数据展现到Echarts中呢，带着这个问题跟我一块儿来学习吧。

正文

为了保证小伙伴们都可以顺利进行，能够复制如下代码到data中，当作请求完以后的调用。

chartData = {
    attenceRate: 0.125,
    homewordRate: 0.125,
    topicRate: 0.125,
    starRate: 0.125,
    interactRate: 0.125,
    classAttenceRate: 0.125,
    classHomewordRate: 0.125,
    classTopicRate: 0.125,
    classStarRate: 0.125,
    classInteractRate: 0.125
};

因为上一篇我找的雷达图这个例子比较简单，因此咱们依次把数据放进去就好，给出option>series的代码，小伙伴复制过去就能够了。

series: [
    {
        type: "radar",
        data: [
            {
                value: [
                    this.userAnalycomplexEchart.attenceRate,
                    this.userAnalycomplexEchart.homewordRate,
                    this.userAnalycomplexEchart.topicRate,
                    this.userAnalycomplexEchart.starRate,
                    this.userAnalycomplexEchart.interactRate
                ],
                name: "学生我的"
            },
            {
                value: [
                    this.userAnalycomplexEchart.classAttenceRate,
                    this.userAnalycomplexEchart.classHomewordRate,
                    this.userAnalycomplexEchart.classTopicRate,
                    this.userAnalycomplexEchart.classStarRate,
                    this.userAnalycomplexEchart.classInteractRate
                ],
                name: "班级平均"
            }
        ]
    }
]

实际开发中只须要在接口请求完的 then中调用 Echarts绘制的方法就能够了。

可是。。。

更多时候并非这样直接填入就能够，好比折线图、柱状图等数据量不少的时候，接口返回给咱们的经常是一个数组，咱们须要准确取到数组的值push到对应的地方才能够。下面我以折线图为例进行展现。

knowledgeChartData = [
    { timeDay: "01-08", knowledgeCount: 24 },
    { timeDay: "01-09", knowledgeCount: 23 },
    { timeDay: "01-10", knowledgeCount: 32 },
    { timeDay: "01-11", knowledgeCount: 43 },
    { timeDay: "01-12", knowledgeCount: 12 },
    { timeDay: "01-13", knowledgeCount: 53 },
];

首先给出接口数据，请你自行把它复制到data中。在下面我也给出你我页面中折线图option配置，一样你能够复制个人或者复制官方示例到本身的项目里。

option = {
    tooltip: {
        trigger: "axis"
    },
    legend: {
        orient: "vertical",
        left: "5%",
        data: ["掌握状况"]
    },
    color: ["#FF507C"],
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: []
    },
    yAxis: {
        splitLine: {
            lineStyle: {
                type: "dotted"
            }
        },
        nameTextStyle: {
            color: "#b5b8ba"
        },
        type: "value"
    },
    series: [
        {
            name: "掌握状况",
            smooth: true,
            type: "line",
            data: []
        }
    ]
};

OK，到这里你已经有了一个空的折线图了，经过阅读代码能够看到在option中分别有xAxis和yAxis，对应的分别是X轴和Y轴，而其中的data就是X轴和Y轴所对应的数据项。如今咱们将knowledgeChartData的值拿出来，经过循环，将它们分别到对应的data中就能够了。

this.knowledgeChartData.map(i => {
     option.xAxis.data.push(i.timeDay);
     option.series[0].data.push(i.knowledgeCount);
 });
myChart.setOption(option);

在调整完option以后执行setOption，全部数据就可以正确显示到页面上了~

固然，真实开发中仍是会有各类各样的接口数据返回，更多时候返回的数据须要咱们进行比对、拆分、整理、合并等步骤才能变成咱们真正须要的数据结构。

结论

这篇文章主要是一个引子，让小伙伴们了解如何在vue项目中使用Echarts，而且真正可以在项目中使用简单的Echarts，更多更深刻的就须要小伙伴们本身去研究了。

再对数据处理的时候免不了对数组的一些操做，若是有对数组的经常使用操做不了解的地方能够查看这篇文章，相信学完之后你就能够从容地将各类接口返回的数据处理成你想要的格式，从而能够在项目中使用各类Echarts了~

结语

以上就是本文章的所有内容了，若是有不正确的地方欢迎指正。

感谢您的阅读，若是感受有用不妨点赞/转发。

前端深刻系列是一个踩坑系列，是由我本人对工做和学习中所遇到的问题和踩过的坑的一个探索与总结，在此记录分享出去，同时也是对自我技能的一个反思和追问。

前端路漫，踩坑不断。

前端深刻系列持续更新中……

以上2020-01-15。