如何用Echarts制作标准折线图

我们经常使用Echarts制作各种图表，那么如何运用Echarts制作标准折线图呢？下面我给大家演示一下。

首先打开Sublime Text软件，新建一个HTML文档，并在文档中添加如下图所示的HTML结构

接下来运用scripts标签在HTML中引入echarts的库文件，如下图所示

然后我们在body标签中创建一个div区域用来存放折线图，如下图所示，注意给div设置高度

接下来我们通过echarts的init方法对刚才创建的div区域进行初始化，如下图所示

然后我们设置折线图的参数，包括X，Y坐标轴数据，折线图标题等信息，如下图所示

接下来在series参数中设置折线图所需要的数据，如下图所示，一条折线配置一个大括号

参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域，如下图所示

最后我们运行HTML文件，就可以看到如下图所示的标准折线图了，点击顶部的折线标题可以隐藏或者显示折线

<LineChart  :reportsList="reportsList"  v-if="Object.keys(reportsList).length" />

data() {

    return {

      reportsList: {},

    }

  },

  created() {

    reportsGet("reports/type/1").then((res) =>{

      console.log(res)

      let { meta, data } = res.data

      if (meta.status == 200) {

        this.reportsList = data

      } else {

        this.$message.error(meta.msg)

      }

    })

  },

data() {

    return {

      lineList: {},

    }

  },

  props: {

    reportsList: {

      type: Object,

      default: () =>{

        return {

          title: {

            text: "折线图",

          },

          tooltip: {},

          xAxis: {

            axisLabel: { interval: 0, rotate: 0, margin: 15 },

            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],

          },

          yAxis: {},

          series: [

            {

              name: "销量",

              type: "line",

              data: [5, 20, 36, 10, 10, 20],

            },

          ],

        }

      },

    },

  },

  mounted() {

    var myChart = echarts.init(this.$refs.main)

    this.lineList = JSON.parse(JSON.stringify(this.reportsList))

    this.lineList.title = {

      text: "折线图",

    }

/* 给折线图设置上下左右的距离 */

    this.lineList.legend.top='10%'

    this.lineList.xAxis[0].axisLabel =

      { interval: 0, rotate: 30, margin: 15 }

    this.lineList.grid = {

      top: "30%",

      width: "80%",

      height: "50%",

      left: "20%",

    }

    /* 把折线图所属区域删掉 */

    this.lineList.series.forEach(r=>{

      delete r.areaStyle

      r.smooth=true

    })

    myChart.setOption(this.lineList)

    window.LineChart = myChart

  },

}

---