在vue项目中使用Echarts

参考图

一、创建自己的工程和安装 echarts
npm install echarts --save

二、引入方式
挂载到mi n.js全局中
import echarts from “echarts”;
Vue.prototype.$echarts = echarts;

三、在页面中使用

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: "app",
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        backgroundColor: "#011c3a",
        xAxis: {
          data: [
            "人员1",
            "人员2",
            "人员3",
            "人员4",
            "人员5、人员6",
            "人员7",
            "人员8",
          ],
          axisLine: {
            lineStyle: {
              color: "#3d5269",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 14,
          },
        },
        yAxis: {
          name: "单位:次",
          nameTextStyle: {
            color: "#fff",
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#3d5269",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 16,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#2d3d53",
            },
          },
          interval: 500,
        },
        series: [
          {
            type: "bar",
            barWidth: 50,
            itemStyle: {},
            label: {
              normal: {
                show: true,
                fontSize: 18,
                fontWeight: "bold",
                color: "#ffffff",
                position: "top",
              },
            },
            data: [254, 3254, 1654, 2454, 4757, 2011, 1211],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawChart();
  },
};
</script>


<style scoped>
</style>