前端学习Vue+ECharts--数据对比折线图

1、创建ID

2、在组建里面引入

import echarts from "echarts";

3、在data里定义chartLine为null

         chartLine:null,

        public_data:[],  //定义X轴

        data1:[],  //y轴上周数据

        data2:[],  //y轴本周数据

4、在methods：{}获取ID并获取接口数据及调用

methods:{

    drawLineChart() {

      this.chartLine= echarts.init(document.getElementById("chartLine"));

      this.chartLine.setOption({

        backgroundColor: "#0f3c42",//背景色

        title: {

            textStyle: { color: "#65eacc" },

            text: "进水瞬时流量"

        },

        tooltip: {

            trigger: "axis"

        },

        legend: {

            x: "right", // 'center' | 'left' | {number},

            y: "top", // 'center' | 'bottom' | {number}

            padding: 10, // [5, 10, 15, 20]

            itemGap: 20,

            textStyle: { color: "#fff" },

            data: ["本周", "上周"]

        },

        xAxis: {

            type: "category",

            // boundaryGap: false,

            axisLine: {

                lineStyle: {

                    type: "solid",

                    color: "#7ec8d3", //左边线的颜色

                    width: "2" //坐标线的宽度

                }

            },

            axisLabel: {

                textStyle: {

                    color: "#7ec8d3" //坐标值得具体的颜色

                }

            },

            data:this.public_data

        },

        yAxis: {

            type: "value",

            axisLine: {

                lineStyle: {

                    type: "solid",

                    color: "#7ec8d3", //左边线的颜色

                    width: "2" //坐标线的宽度

                }

            },

            axisLabel: {

                textStyle: {

                    color: "#7ec8d3" //坐标值得具体的颜色

                }

            }

        },

        series: [

            {

                name: "本周",

                type: "line",

                smooth: true,

                //修改折线的颜色

                itemStyle: {

                    color:'#d5e24a'

                },

                data: this.data1

            },

            {

                name: "上周",

                type: "line",

                smooth: true,

                itemStyle: {

                    color:'#0055ba'

                },

                data:this.data2

            }

        ]

      });

    },

    //获取数据

    Echarts_list(){

            this.$axios.get('接口').then(res => {

                console.log(res)

                //将获取到的X轴数据复制给this.public_data

                //将获取到的y轴上周数据复制给this.data1

                //将获取到的y轴本周数据复制给this.data2

        })

    }

}

//在mounted(){}调用

mounted() {

      this.drawLineChart()

      this.Echarts_list()

  }

// watch监听实时数据

watch: {

      public_data(val){

        this.drawLineChart()

      }

  },

注明：如果那里有不对的地方还请大牛多多指教