在Vue项目中引入Echarts图表

在Vue项目中引入Echarts图表 一个基于 JavaScript 的开源可视化图表库

Echarts官网https://echarts.apache.org/zh/index.html

步骤 1.使用npm下载echarts！

npm install echarts --save

2.安装完成以后，可以将echarts全部引入，就可以在该页面使用echarts所有组件

import * as echarts from 'echarts';

3.在需要的页面使用echarts

<template>
  <div class="content">
    <!-- 收入趋势 -->
    <div class="tablebodybox">
      <div class="tableleft">
        <div class="tablelefttitlebox">
          <div class="tabtitleft">收入趋势</div>
        </div>
        <div class="tableleftcontent" id="inoutEcharts"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      inoutEchart: "",
    };
  },
  destroyed() {
    window.onresize = null;
  },
  mounted() {
  this.$nextTick(() => {
      setTimeout(() => {
        this.inoutInit();
      }, 500);
    });
    window.onresize = () => {
      this.inoutEchart.resize();
    };
  },
  methods: {
    // 真实数据
    // async shouruquery() {
    //   let data = {
    //     type: 1,
    //     mold: this.shourumold,
    //   };
    //   let info = await dashboard.dashboardquery(data);
    //   let shourutime = [];
    //   let shourushouru = [];
    //   let shourunum = [];
    //   for (let i = 0; i < info.data.shoyi.length; i++) {
    //     let element = info.data.shoyi[i];
    //     shourutime.push(element.time);
    //     shourushouru.push(element.allPrice);
    //     shourunum.push(element.num);
    //   }
    //   this.inoutInit(shourutime, shourushouru, shourunum);
    // },
    // 初始化
    inoutInit(shourutime, shourushouru, shourunum) {
      this.inoutEchart = echarts.init(document.getElementById("inoutEcharts"));
      this.inoutEchart.clear();
      this.inoutEchart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          right: "12%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#fa8b15", "#3DD598"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: shourutime,
          data: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "收入金额",
            // data: shourushouru,
            data: ["234","343","232","323","212","145","656","343","65","34","354"],
            type: "line",
            smooth: true,
            symbolSize: 10, //拐点大小
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3, // 折线图粗细
                },
              },
            },
          },
          {
            name: "支付笔数",
            data: ["232","444","333","234","345","232","174","99", "89","565","671",],
            type: "line",
            smooth: true,
            symbolSize: 10, //拐点大小
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3, // 折线图粗细
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .tablebodybox {
    display: flex;
    .tableleft {
      height: 460px;
      background: #fff;
      display: flex;
      flex-direction: column;
      .tablelefttitlebox {
        flex: none;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        .tabtitleft {
          padding-left: 9px;
          position: relative;
          font-size: 18px;
          font-weight: Bold;
          color: #233c52;
        }
        .tabtitleft:before {
          position: absolute;
          content: "";
          width: 4px;
          height: 16px;
          background: #0062ff;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
      .tableleftcontent {
        flex: 1;
      }
    }
  }
}
</style>

真实数据格式

效果图