Writing in the front

Recently, due to some force majeure factors, I changed my job to a company providing college education services. Right after I joined the company, I just caught up with the reconstruction of the PC side project. I was mainly responsible for the module of data visualization.

This is the next part of vUE project Echarts. If you haven’t seen the previous part, please click here. After learning from the previous article, you must have a basic understanding of how to use Echarts in vUE and can skillfully draw any Echart you want in your project.

How to Use Echarts elegantly in A Project

If you haven’t seen it yet, be sure to practice it first

I hope you can master the correct way of using Echarts in the project after reading it, and step on fewer holes on my basis.

After learning the previous part, I believe you will feel very simple, and the real project, our data is returned by the interface request, how to show the returned data in Echarts, with this problem to learn with me.

The body of the

To ensure that everyone can proceed smoothly, you can copy the following code into data as a call after the request.

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
};
Copy the code

Since the example of radar chart I found in the last article is relatively simple, we just put the data in one by one, give the code of Option >series, and your friend can copy it over.

series: [
    {
        type: "radar".data: [{value: [
                    this.userAnalycomplexEchart.attenceRate,
                    this.userAnalycomplexEchart.homewordRate,
                    this.userAnalycomplexEchart.topicRate,
                    this.userAnalycomplexEchart.starRate,
                    this.userAnalycomplexEchart.interactRate
                ],
                name: "Individual Student"
            },
            {
                value: [
                    this.userAnalycomplexEchart.classAttenceRate,
                    this.userAnalycomplexEchart.classHomewordRate,
                    this.userAnalycomplexEchart.classTopicRate,
                    this.userAnalycomplexEchart.classStarRate,
                    this.userAnalycomplexEchart.classInteractRate
                ],
                name: "Class average"}}]]Copy the code

In real development, you only need to call Echarts drawn methods in the then after the interface is requested.

But…

For example, when there is a lot of data in line charts and bar charts, the interface often returns us an array, and we need to accurately get the value of the array and push it to the corresponding place. Let me take the broken line diagram as an example.

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},];Copy the code

Give the interface data first, and copy it into data yourself. Below I also give you my line chart option configuration, again you can copy mine or copy the official example into your own project.

option = {
    tooltip: {
        trigger: "axis"
    },
    legend: {
        orient: "vertical".left: "5%".data: ["On top of the situation"]},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: "On top of the situation".smooth: true.type: "line".data: []}]};Copy the code

OK, so now you have an empty line chart. Reading the code, you can see that in option there are xAxis and yAxis, respectively, corresponding to the X and Y axes, and data is the corresponding data item for the X and Y axes. Now we take out the value of knowledgeChartData and put them into the corresponding data respectively through the loop.

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

Execute setOption after adjusting options and all data will be displayed on the page correctly

Of course, in real development, there will still be a variety of interface data returned, more often we need to compare the returned data, split, organize, merge and other steps to become the data structure we really need.

conclusion

This article is mainly an introduction to let friends know how to use Echarts in vUE project, and really be able to use simple Echarts in the project, more in-depth partners need to study.

If you don’t understand the common operation of the array, you can check this article. After learning, you can easily process the data returned by various interfaces into the format you want, so that you can use various Echarts in the project

conclusion

The above is the whole content of this article, if there are incorrect places welcome to correct.

Thank you for reading. If you find it useful, please like it/forward it.

Front-end in-depth series is a pit series, which is an exploration and summary of the problems AND pits I have encountered in work and study. It is recorded and shared here, and also a reflection and questioning of my skills.

The front end road is diffuse, step pit ceaseless.

Front-end in-depth series continues to be updated…

More than 2020-01-15.