echarts图引入的几大步骤，新手必看

echarts对于刚进入前端工作的同学来说还是一个新的技术，学好echarts也是必不可少的。接下来是引入eachats具体的几个步骤，希望对你们有帮助哟

第一步，下载echarts  （在npm里面下载）

npm i  echarts  -s

第二步是在 script 标签引入（不引入的话，报错是会报找不到eachars的）

const echarts = require('echarts');

第三步是在页面上写这一句话就行

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

第四步 在style标签里面写样式，主要是要把echarts高设置(不然你的eacharts图还是会出不来的)

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

 

第五步

是我在methods里面引入具体的eachats了

 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的配置

      },
}