views/components/echarts/lineGraph.vue
<template>
  <div v-bind:id="id" v-bind:data="data"></div>
</template>

<script>
export default {
  name: "lineGraph",
  data() {
    return {
      ChartLineGraph: null,
    };
  },
  //  深度监听 父组件刚开始没有值，只有图标的配置项
  //  父组件ajax请求后改变数据的值，传递过来，图标已生成，监听传过来的值的改变
  // deep:true.深度监听，确保data中子项修改也能监听到。写法参考：https://cn.vuejs.org/v2/api/#watch
  watch: {
    data: {
      handler(newvalue, oldvalue) {
        this.drawLineGraph(this.id, newvalue);
      },
      deep: true,
    },
  },
  // id为容器的id   data为配置项   clickOnOff点击事件的开关   params参数
  props: ["id", "data", "clickOnOff", "params"],
  mounted() {
    this.drawLineGraph(this.id, this.data,this.clickOnOff,this.params);
  },
  methods: {
    drawLineGraph(id, data, clickOnOff, params) {
      let _this = this;
      let myChart = document.getElementById(id);
      this.ChartLineGraph = this.$echarts.init(myChart);
      this.ChartLineGraph.setOption(data);
      // clickOnOff此属性的值为true或false
      if (clickOnOff) {
        this.ChartLineGraph.on("click", function (param) {
          alert('点击事件')
          // 控制台打印数据的名称
          // console.log(params.name);
        });
      }
      window.addEventListener("resize", function () {
        _this.ChartLineGraph.resize();
      });
    },
  },
  beforeDestroy() {
    if (this.ChartLineGraph) {
      this.ChartLineGraph.dispose();
    }
  },
};
</script>

<style scoped>
</style>

views/index.vue(宽高用百分比)
<div class="content">
   <div class="line1">
          <div class="box_head">
            <h5>xxx</h5>
          </div>
          <div class="lines">
            <LineGraph
              :id="'linegraph'"
              :data="lineData"
              :clickOnOff="false"
              style="width: 100%; height: 300px"
            ></LineGraph>
          </div>
    </div>
</div>
<script>
import LineGraph from "@/views/components/echarts/barGraph";
import echarts from "echarts";
export default {
   name: "index",
  components: {
    LineGraph
  },
data(){
  return{
  lineData: {
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          top: 50,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // 去除轴内间距
          boundaryGap: true,
          // 刻度去掉
          axisTick: {
            show: false,
          },
          nameTextStyle: {
            color: "#888",
          },
          // 设置轴线
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#82abd4",
            },
          },
          axisLabel: {
            showMaxLabel: true,
            show: true,
            textStyle: {
              color: "#2bb6ff",
            },
          },
          data: ['a','b','c','d','e','f','g','h'],
        },
        yAxis: {
          type: "value",
          show: true,
          axisTick: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: "#0b244c",
            },
          },
          name: "箱",
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#82abd4",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "solid",
              color: "#40dbc3",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#2bb6ff",
            },
          },
        },
        backgroundColor: "rgba(0, 0, 0, 0)",
        color: [
          "rgb(51, 153, 255)",
          "rgb(255, 145, 92)",
          "rgb(219, 66, 90)",
          "rgb(252, 196, 92)",
        ],
        legend: {
          right: "10px",
          top: 0,
          textStyle: {
            color: "#eee",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgb(255, 255, 255)",
          borderWidth: 1,
          borderColor: "#ced3d7",
          textStyle: {
            color: "#868da0",
            fontSize: 14,
          },
          padding: [15, 15, 10, 15],
          extraCssText: "border-radius: 2px;",
          show: true,
        },
        series: [
          {
            smooth: true,
            color: ["#1CF2FF"],
            type: "line",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0469bd",
                },
                {
                  offset: 1,
                  color: "#002291",
                },
              ]),
            },
            data: [1,2,3,4,5,6,7,8],
          },
        ],
      },
}
}
}
</script>