【echart】1使用

1

npm install echarts --save

2 main.js

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts //引入组件

3使用

<template>
  <div>
    <div class="bar" id="myChart" ref="myChart"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.initBarFun();
  },
  methods: {
    initBarFun() {
      var myChart = this.$echarts.init(document.getElementById("myChart")),
      option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: "red",
            },
          },

          type: "value",
          boundaryGap: [0, 0.01],
          splitLine: {
            // 去除网格
            show: false,
          },
        },
        yAxis: {
          type: "category",
          axisTick: {
            // 去除刻度线
            show: false,
          },
          data: [
            "书号呼数书数",
            "书号呼数书",
            "书号呼数书",
            "书是",
            "书号呼数",
            "书号呼数书",
          ],
        },
        color: ["#dedede", "#000000"],
        series: [
          {
            name: "目标值",
            type: "bar",
            data: [13, 14, 15, 16, 13, 16],
          },
          {
            name: "实际值",
            type: "bar",
            data: [12, 12, 14, 15, 12],
          },
        ],
      };

       window.onresize = function () {
        myChart.resize();
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.bar {
  width: 100%;
  height: 400px;
  border: 1px solid red;
}
</style>