Vue/Echarts 的安装和使用

安装

npm install echarts

 

 

引入

//var echarts = require('echarts');//这两个选中一个就行

import * as echarts from "echarts";

 

使用

<template>

<div>

<div id="main" style="width: 300px; height: 300px"></div>

<div id="main1" style="width: 300px; height: 300px"></div>

</div>

</template>

import * as echarts from "echarts";
export default {
  data() {
    return {
      dataX: [],
      dataY: [],
    };
  },
  created() {},
  methods: {
    setEcharts(option) {
      this.myChart.setOption(option);
      this.myChart1.setOption(option);
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("main"));
     this.myChart1 = echarts.init(document.getElementById("main1"));
    setTimeout(() => {
      //模拟的数据请求
      this.dataX = ["leson", "lili", "lulu"];
      this.dataY = [5, 20, 36];
      var option = {
        title: {
          text: "2106班缺勤数据",
        },
        tooltip: {},
        xAxis: {
          data: this.dataX,
        },
        yAxis: {},
        series: [
          {
            name: "次数",
            type: "bar",
            barWidth: 5,
            data: this.dataY,
          },
        ],
      };
      this.setEcharts(option);
      // 使用刚指定的配置项和数据显示图表。
    }, 2000);
    // 指定图表的配置项和数据
  },
};