vue使用echarts

vue使用echarts的安装和使用

1.下载echarts

npm install echarts --save

2.在main.js中配置（设置全局）

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.页面的使用

//页面的使用
<template>
<div>
   <div
          id="myCharts"
          ref="myCharts"
          style="width:100%;height:400px;background:#ffffff"
        />
   </div>
</template>     

//使用方法
eharts1() {
      const myCharts = this.$echarts.init(this.$refs.myCharts);//获取页面的dom然后绘制

      let options = {
        title: {
          text: "未来一周气温变化", //图表顶部的标题
          subtext: "纯属虚构", //副标题
        },
        tooltip: {
          //鼠标悬浮框的提示文字
          trigger: "axis",
        },
        legend: {
          data: ["最高气温", "最低气温"],
        },
        xAxis: [
          {
            //x轴坐标数据
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            //y轴坐标数据
            type: "value",
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
          {
            name: "最高气温",
            type: "line", //pie->饼状图  line->折线图  bar->柱状图
            data: [11, 11, 15, 13, 12, 13, 10],
          },
          {
            name: "最低气温",
            type: "line", //pie->饼状图  line->折线图  bar->柱状图
            data: [1, -2, 2, 5, 3, 2, 0],
          },
        ],
      };
      //调用上边myCharts方法然后赋值属性
      myCharts.setOption(options);
    },

问题：无法渲染的解决方法

1.如果调用eharts1（）后，不渲染，就放在created（）{}或mounted（）{}里面调用
2.使用  this.$nextTick(() => { this.eharts1()});  把 this.eharts1()方法写在 this.$nextTick(() => { });

这里我把官网的使用疏通了，只要按我的步骤只用把官网的options 复制过来，覆盖我的就可以直接使用，

这里是echarts官网实例
希望可以帮助大家！！！