vue中echarts基本使用(学习篇)

1、准备一个具有宽高的dom

 <div id="myChart1" :style="{ width: '1004px', height: '400px' }"></div>

2、将处理数据的myEcharts挂载到mounted钩子函数中，尽量别挂载到created函数中，因为要操作dom，挂载到created钩子函数中，有可能拿不到dom

mounted() {
    this.myEcharts();
  },

3、处理数据，将数据插入到dom中

 // echart基本使用
    myEcharts() {
      // 获取要插入图表的dom,初始化echart实例
      let echart = echarts.init(document.getElementById("myChart1"));

      //假设option为后台请求到的数据
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      echart.setOption(option);
    },

4、结果如下图显示

 5、这就是echart基本的一些使用方法，这是柱状图，饼状图，折线图等等，他们基本的使用方法是相同的。至于后面的改变图形的颜色，纵坐标加上单位，纵坐标不能有小数。给图表加上标题，副标题，如果数据过多，怎样处理等等，这些后期可以慢慢学习，先把基础的先学好！！！！