echarts折线图组件封装

echarts折线图组件封装

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用 vue+echarts开发的过程中,我们会经常使用到折线图,下面是我对折线图组件的封装,希望对你有所帮助!
4.在组件中添加如下代码:

<template>
  <div class="zhex">
    <div :id="ZhexObj.id"  style="width: 100%; height: 100%"></div>
  </div>
</template>
<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.zhex{
  width: 100%;
  height: 96%;
  box-sizing: border-box;
  /* border: 2px solid yellow; */
}
</style>
<script>
import echarts from "echarts";
export default {
  name: "Zhex",
  props: ["ZhexObj"],
  data() {
    return {
      chenda: this.ZhexObj,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      let max = this.chenda.max;
      let min = this.chenda.min;
      let mai = (min + max) / 2 - min;
      console.log(this.chenda);
      let data=this.chenda.data;
      this.tt(max, min, mai, this.chenda.id, this.chenda.title,data);
    });
  },
  watch: {
    chenda: {
      handler(newValue, oldValue) {
        console.log(newValue);
        console.log("变化");
        console.log(newValue);
        let max = newValue.max;
        let min = newValue.min;
        let mai = (min + max) / 2 - min;
        let id = newValue.id;
        let title = newValue.title;
        console.log(this.chenda);
        this.$nextTick(() => {
            this.tt(max, min, mai, id, title);
        })
      },
      deep: true,
    },
  },
  methods: {
    dataObjfun() {
      console.log("发生了变化");
      console.log("+++++++++++");
    },
    // 封装 echarts 画图 一
    drawChart(drawChartId, Chenoption) {
      this.myChart = echarts.init(document.getElementById(drawChartId));
      let option = Chenoption;
      // 指定图表的配置项和数据
      this.myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    // 封装 echarts 画图一 结束啦
    // 封装 echarts 画图二
    //注意:进行了封装
    tt(max, min, mai, id, title,data) {
      //   console.log(max, min, mai, mi);
     this.Chenoption = {
        title: {
          text: title,
          left: "center",
          textStyle: {
            fontSize: 18, //字体大小
            color: "#bfbfbf", //字体颜色
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
        //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", ""],
          data: data,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          min: min,
          max: max,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
            },
          },

          interval:mai,
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              width: 2,
              color:"green"
            },
            show: true, //隐藏或显示
          },
        },
        series: [
          {
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data:data,
            type: "line",
            showSymbol: true,
            symbol: "circle", //设定为实心点
            symbolSize: 10, //设定实心点的大小
            color: "#00808c", //设定实线点的颜色
          },
        ],
      };
      // console.log(this.Chenoption.yAxis.min);
      // this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2;
      this.drawChart(id, this.Chenoption);
    },

    // 封装 echarts 画图二 结束啦
  },
};
</script>

5.在父组件中添加如下代码:

import Zhex from "@/components/Zhex.vue";
<Zhex :ZhexObj="chenObj.chenLTObj.kxbr" />

5-1.在return中添加如下代码:

 chenObj: {
  chenLTObj: {
        kxbr: {
                max: 190,
                min: -10,
                id: "Kxbr",
                title: "控制用XBR图",
                data: ["10", "30", "50", "88", "77"],
                },
               }
             }

6.效果图如下:

7.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!