echart使用

安装方式从 npm 获取 

npm install echarts

使用的页面js部分引入：

import * as echarts from "echarts"; // 图标引入 

html：需要带id标签的div

  <div class="bottom">
      <div id="main1"></div>
    </div>

css:需要设定长宽

 #main1
{
  width: 49%;
  // height: 70vh;
  height: 40vh;
  background: #fff;
}

js :

  mounted() {
     // 渲染图表
          this.$nextTick(() => {
            this.drawChart1();
          });
  },

   drawChart1() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      myChart.clear(); // 清空图表，重新渲染图表
      // 指定图表的配置项和数据
      let option = {
        grid: {
          top: "18%",
          left: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
          right: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
          bottom: "7%",
        },
        title: {
          text: "7日识别总次数",
        },
        tooltip: {},
        legend: {
          data: ["人数"],
        },
        // 日期
        xAxis: {
          // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          data: this.Days7,
        },
        yAxis: {},
        series: [
          {
            name: "次数",
            type: "bar",
            // data: [5, 20, 36, 10, 10, 20],
            data: this.Days7Data,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

就是直接去复制官网中你要的那个的完整代码，第一行的引入上面已经写了

 补充：

要想获取数据的时候再重新渲染表格只需加一行：

 myChart.clear(); // 清空图表，重新渲染图表