Vue 使用echart实现柱状图

安装echarts依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

全局引入

在main.js中

import * as echarts from 'echarts'

 Vue代码

<template>
  <div ref="chart" style="width: 100%; height: 500px"></div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
import { reactive, ref } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken, ddo } from "@/common";

export default {
  setup() {
    const state = reactive({
      //创建响应式数据对象和相关数据
      id: 1,
      chart: ref(),
      data1: ref([10]),
      data2: ref([10, 10]),
    });

    const init = () => {
      //定义方法
      if (state.chart) {
        //图标初始化
        var myChart = echarts.init(state.chart);
        const option1 = {
          title: {
            text: "当日撮合交易总量情况",
          },
          xAxis: {
            type: "category",
            data: ["撮合交易总量", "最高成交价", "最低成交价", "平均交易价格"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [120, 200, 150, 80],
              type: "bar",
            },
          ],
        };
        //指定配置项与数据显示
        myChart.setOption(option1);
      }
    };
    onMounted(() => {
      getReportData();
      init();
    });
    const reportData = ref({});
    const getReportData = () => {
      get("/user/user-count").then((res) => {
        reportData.value = res.data;
        state.data2 = [reportData.value.manNum, reportData.value.womanNum];
        console.log(state.data1);
        state.data1 = [
          reportData.value.ageOne,
          reportData.value.ageTwo,
          reportData.value.ageThree,
          reportData.value.ageFour,
          reportData.value.ageFive,
        ];
        init();
      });
    };
    return state;
  },
};
</script>
<style>
.contains {
  padding: 10px;
}
</style>

结果

注： 代码可根据Examples - Apache ECharts 官网代码自行对照修改实现其他图

参考：在Vue中使用echarts - 简书