Several major steps introduced by echarts diagram, newbies must see

Echarts is still a new technology for students who have just entered the front-end work, and learning echarts is also essential. Next are the specific steps of introducing eachats, I hope it will be helpful to you

The first step is to download echarts (download in npm)

npm i  echarts  -s

The second step is to introduce in the script tag (if not introduced, the error will be reported that eachars cannot be found)

const echarts = require('echarts');

The third step is to write this sentence on the page

<div  class="echarts" ref="chart"></div>

The fourth step is to write the style in the style tag, mainly to set the echarts high (otherwise your eacharts picture will still not come out)

.echarts{
  width: 100%;
  height:500px;
}

 

the fifth step

I introduced specific eachats in the methods

 methods: {
      // eachart图

      initCharts() {
        this.myChart = echarts.init(this.$refs.chart); //初始化渲染echarts到这个容器里面
        this.myChart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]

        })  //echarts的配置

      },
}