1.main.js

import * as echarts from "echarts";

Vue.prototype.$echarts = echarts; // 将echarts引入与到vue的原型中，方便使用

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

<script>
export default {
  name: "Echarts",
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      //配置图表
      var option = {
        backgroundColor: "#00ff00", //背景色,
        color: "#000", //柱子颜色
        title: {
          // 标题设置
          text: "展示", // 标题文字
          textStyle: {
            // 标题文字样式设置
            color: "red",
          },
          borderWidth: 5, // 标题边框宽度
          borderColor: "blue", // 标题边框颜色
          borderRadius: 5, // 标题边框圆角
          left: 50, // 标题距离左边的距离
          top: 10, // 标题距离顶部的距离
        },

        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          // axisLabel: { show: true }, //显示x轴的数值
          // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], 把数据改成横过去就把数据改到yAxis
        },
        yAxis: {
          data: ["手机", "电脑", "ipad", "平横车", "投影仪", "单反相机"],
        },
        series: [
          {
            name: "销量",
            type: "bar",

            barWidth: "45%", //柱子宽度
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",

              // color: "blue", 空白的是蓝色
            },
            data: [5, 20, 36, 10, 10, 20],
            //最大值最小值
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            //平均值
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                },
              ],
            },

            label: {
              show: true, //值 是否可见
              rotate: 0, // 旋转角度
              position: "top", // 显示位置
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts();
  },
};
</script>

<style></style>