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