Echarts图表的使用（四步走）

<template>
  <div class="chart">

  
      <!--1 为 ECharts 准备一个定义了宽高的 DOM -->
      <div  ref="chart1" class="chart1" ></div>
      <div  ref="chart2" class="chart2" ></div>
      <div  ref="chart3" class="chart3" ></div>
    
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chart1: null, //设置初始值为空
      chart2: null,
      chart3: null,
    };
  },
  methods: {
    initChart() {
      //3 基于准备好的dom，初始化echarts实例
      this.chart1 = echarts.init(this.$refs.chart1);
      this.chart2 = echarts.init(this.$refs.chart2);
      this.chart3 = echarts.init(this.$refs.chart3);
      //2 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        color: ["#4993f6", "#e07ca1"],
        legend: {
          data: ["2020", "2021"],
          top: 20,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "2020",
            type: "line",
            stack: "总量",
            areaStyle: {
              color: "#fff",
              opacity: 0.5,
            },
            data: [
              120, 136, 250, 340, 650, 780, 1200, 1600, 1700, 1000, 600, 480,
            ],
          },
         
          {
            name: "2021",
            type: "line",
            stack: "总量",
            areaStyle: {
              opacity: 0,
            },
            data: [
              400, 260, 600, 580, 680, 720, 832, 941, 956, 1400, 1530, 1620,
            ],
          },
        ],
      };
      var option2 = {
        tooltip: {},
        legend: {
          data: ["用户数量"],
        },
        xAxis: {
          data: ["农民", "工人", "学生", "企业家", "自由职业", "无业"],
        },
        yAxis: {},
        series: [
          {
            name: "用户数量",
            type: "bar",
            data: [700, 520, 36, 510, 410, 20],
          },
        ],
      };
      var option3 = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              {
                value: 335,
                name: "直接访问",
              },
              {
                value: 310,
                name: "邮件营销",
              },
              {
                value: 234,
                name: "联盟广告",
              },
              {
                value: 135,
                name: "视频广告",
              },
              {
                value: 1548,
                name: "搜索引擎",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //4 使用刚指定的配置项和数据显示图表。
      this.chart1.setOption(option);
      this.chart2.setOption(option2);
      this.chart3.setOption(option3);
    },
  },
   mounted () {
    //挂载完成
    this.initChart()
    window.onresize = () => {
      //根据窗口大小自适应
      this.chart1.resize()
      this.chart2.resize()
      this.chart3.resize()
    }
  },
};
</script>
<style scoped>
.chart  {
  margin-top: 40px;
}

.chart .chart1 {
  width: 100%;
  height: 500px;
  background-color: #c7e4db;
}

.chart  .chart2,
.chart  .chart3 {
  width: 50%;
  height: 400px;
  margin-top: 40px;
}

.chart  .chart2 {
  float: left;
}

.chart  .chart3 {
  float: right;
}
</style>