vue项目中使用echarts完成图表类的开发之折线图

下面是折线图的简单介绍：

请看代码：

折线图：子组件

<template>
  <div class="histogram" :style="{ width: lineEchartsData.width }">
    <div
      class="histogramBar"
      :id="id"
      :style="{ width: '100%', height: lineEchartsData.lineEchartsHeight }"
    ></div>
  </div>
</template>

<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
  props: {
    lineEchartsData: {
      type: Object,
    },
  },
  data() {
    return {
      mylineEcharts: "",
    };
  },
  created() {
    _c.id++;
    this.id = "c_ineEchart_" + _c.id;
  },
  mounted() {
    // 初始化echarts
    this.$nextTick(()=>{
      this.initChart();
    })
    // 监听浏览器变化初始化echarts
    window.addEventListener('resize',this.initChart,false);
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.initChart)
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById(this.id);
      if (
        this.mylineEcharts != null &&
        this.mylineEcharts != "" &&
        this.mylineEcharts != undefined
      ) {
        this.mylineEcharts.dispose(); //销毁
      }
      this.mylineEcharts = echarts.init(chartDom);
      // 监听页面变化图表自适应
      this.mylineEcharts.resize()
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis:this.lineEchartsData.xAxis,
        yAxis: this.lineEchartsData.yAxis,
        series:this.lineEchartsData.series
      };
      this.mylineEcharts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

父组件：

<template>
  <div class="indecators-area">
    <div class="indicators-line">
      <LineEchart class="histogram" :lineEchartsData="lineEchartsData" />
    </div>
  </div>
</template>

<script>
import LineEchart from "@/components/lineEchart.vue";
export default {
  components: {
    LineEchart,
  },
  data() {
    return {
      lineEchartsData: {
        width: 100 + "%", //柱状图盒子宽度
        lineEchartsHeight: "24.752vw",
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2015", "2016", "2017", "2018", "2019", "2020"],
        },
        yAxis: {
          type: "value",
          splitNumber: 1,
          min: 0,
          max: 100000,
          interval: 25000,
          axisLabel: {},
        },
        series: [
          {
            data: [18921.85, 33605, 62602.47, 76669, 76734.68, 96010],
            type: "line",
            smooth: false, //折点是圆弧状的
            showSymbol: true,
            symbol: "circle", //折点设定为实心点
            symbolSize: 4, //设定实心点的大小
            itemStyle: {
              color: "#1492FF", //折点颜色
              lineStyle: {
                color: "#1492FF", //折线颜色
              },
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1, //自定义颜色，渐变色填充折线图区域
                colorStops: [
                  {
                    offset: 0,
                    color: "#A2D0F8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#F1F8FF", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>

</style>