关于echarts: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, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!