vue echarts line动态刷新数据组件

<template>
  <div class="echartLine-wrap">
    <div class="echartLine-title">
      <img src="@/assets/icon.png" alt />
      <div class="text">
        <div>{{echartData.title}}</div>
        <div>{{echartData.title2}}</div>
        <div>{{echartData.title3}}</div>
      </div>
    </div>
    <div ref="lineDom" id="myChart"></div>
  </div>
</template>

<script>
export default {
  name: "echartLine",
  props: {
    echartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      img: require("../assets/time_bj.png")
    };
  },
  mounted() {
    setTimeout(() => {
      this.ButtomDrawLine();
    }, 500);
  },
  created() {},
  methods: {
    ButtomDrawLine() {
      let t = this;
      let myChart = this.$echarts.init(this.$refs.lineDom);
      myChart.setOption({
        title: { text: "" },
        tooltip: {
          trigger: "axis",
          borderRadius: 8, //边框圆角
          backgroundColor: "rgba(51,204,204,0)", //背景颜色（此时为默认色）
          formatter: function(params) {
            let value = params[0].value;
            let name = params[0].name;
            let html = ` 
              <div class='line-html'> 
                <span>
                <span class='active' style="background: ${t.echartData.itemStyle.color}"></span>
                ${value}
                </span>
                <span>${t.echartData.title3}</span>
                <span></span>
                <span>${name}</span>
              </div>
            `;
            return html;
          },
          textStyle: { color: "#ffff", align: "center", fontSize: 18 }
        },
        // legend: {
        //   left: 'right',
        //   textStyle: {//图例文字的样式
        //     color: '#ffffff',
        //     fontSize: 14
        //   },
        //   show: true,
        //   data: [
        //     {
        //       name: '审方数',
        //     },
        //     {
        //       name: '处方数',
        //     },
        //     {
        //       name: '会员数'
        //     },
        //     {
        //       name: '含麻登记',
        //     }
        //   ]
        // },
        /*toolbox: {
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            },
            iconStyle:{
              normal:{
                color:'white',//设置颜色
              }
            }
          },*/
        xAxis: [
          {
            boundaryGap: true,
            type: "category",
            axisLine: {
              // x轴的颜色和宽度
              lineStyle: {
                color: "#0070C6"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            offset: 0,
            nameTextStyle: {
              align: "right"
            },
            axisTick: {
              alignWithLabel: true
            },
            data: t.echartData.XData
          }
        ],
        yAxis: [
          {
            type: "value",

            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#0070C6"
              }
            },
            // 控制网格线是否显示
            splitLine: {
              show: false
            },
            min: 0,
            splitNumber: 5,
            boundaryGap: [0.2, 0.2],
            data: [0, 50, 100, 150]
          }
        ],
        grid: {
          top: "3.5%",
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true
        },
        series: [
          {
            name: t.echartData.title,
            type: "line",
            // smooth: true,

            showSymbol: true,
            symbolSize: 4, // 拐点图形大小
            cursor: "pointer",
            areaStyle: {
              normal: {
                color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: t.echartData.areaStyleColor.fromColor
                  },
                  {
                    offset: 0.4,
                    color: t.echartData.areaStyleColor.toColor
                  }
                  // {
                  //   offset: 1,
                  //   color: "rgba(63,227,236,0.00)"
                  // }
                ])
                // ['rgba(63,227,236,0.3)'],
              }
            },
            itemStyle: {
              color: [t.echartData.itemStyle.color]
            },
            data: t.echartData.YData,
            icon:
              "image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png"
          }
          // {
          //   name: '处方数',
          //   type: 'line',
          //   smooth: true,
          //   symbolSize: 1,          // 拐点图形大小
          //   areaStyle: {
          //     color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: 'rgba(82,206,86,0.8)'
          //     }, {
          //       offset: .4,
          //       color: 'rgba(82,206,86,0.3)'
          //     }, {
          //       offset: 1,
          //       color: 'rgba(82,206,86,0.00)'
          //     }])
          //     // ['rgba(82,206,86,0.3)'],
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: ['#52CE56'],
          //     }
          //   },
          //   data: [10, 5, 15, 5, 15, 20, 15, 20, 15, 5, 15, 10]
          // },
          // {
          //   name: '会员数',
          //   type: 'line',
          //   smooth: true,
          //   symbolSize: 1,          // 拐点图形大小
          //   areaStyle: {
          //     color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: 'rgba(251,98,100,0.8)'
          //     }, {
          //       offset: .4,
          //       color: 'rgba(251,98,100,0.3)'
          //     }, {
          //       offset: 1,
          //       color: 'rgba(251,98,100,0.00)'
          //     }])
          //     // ['rgba(251,98,100,0.3)'],
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: ['#FB6264'],
          //     }
          //   },
          //   data: [35, 45, 65, 25, 65, 44, 15, 40, 35, 46, 50, 25]
          // },
          // {
          //   name: '含麻登记',
          //   type: 'bar',
          //   itemStyle: {
          //     normal: {
          //       color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //         offset: 0,
          //         color: 'rgba(231,233,65,0.8)'
          //       }, {
          //         offset: .4,
          //         color: 'rgba(231,233,65,0.3)'
          //       }, {
          //         offset: 1,
          //         color: 'rgba(231,233,65,0.00)'
          //       }]),
          //       // ['rgba(231,233,65,0.5)'],
          //       barBorderColor: '#E7E941',            // 柱条边线
          //       barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0
          //       barBorderWidth: 1,                     // 柱条边线线宽，单位px，默认为1
          //     }
          //   },
          //   barWidth: 15,//柱图宽度
          //   data: [5, 7, 3, 7, 5, 4, 5, 6, 4, 7, 5, 8]
          // }
        ]
      });
    }
  }
};
</script>

<style lang="less">
.line-html {
  width: 83.5px;
  height: 38px;
  text-align: center;
  background: url("../assets/line_btn_bj.png") no-repeat;
  background-size: 83.5px 38px;
  line-height: 42px;
  box-sizing: border-box;
  position: relative;
  font-size: 9px;
  padding-right: 2px;
  box-sizing: border-box;

  .active {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    margin-left: 3px;
    margin-bottom: 1.5px;
    box-sizing: border-box;
  }
  > span:nth-child(3) {
    background: url("../assets/time_bj.png") no-repeat;
    background-size: 38.5px 14px;
    position: absolute;
    top: -5px;
    left: 23px;
    right: 0;
    bottom: 0;

    box-sizing: border-box;
  }
  > span:nth-child(4) {
    position: absolute;
    top: -19px;
    left: 2px;
    right: 2px;
    bottom: 0;
    font-size: 8px;
    
      box-sizing: border-box;
  }
}
</style>
<style scoped lang="less">
.echartLine-wrap {
  width: 100%;
  height: 100%;
  .echartLine-title {
    width: 100%;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding-bottom: 13px;

    > img {
      width: 7.5px;
      height: 14px;
      margin-right: 8.5px;

      box-sizing: border-box;
    }
    > .text {
      text-align: left;
      display: flex;
      flex-direction: row;
      justify-content: start;
      font-size: 12px;
      line-height: 1;
      align-items: baseline;

      > div:nth-child(2) {
        font-size: 15px;
        margin: 0 5px 0 10px;
        font-weight: bold;

        box-sizing: border-box;
      }
    }
  }
  #myChart {
    width: 100%;
    height: 165px;
  }
}
</style>

调用

//html
 <echartLine :echartData="echartData" ref="echartData1" />

//index.js
 echartData: {
        title: "溶氧",
        title2: 3,
        title3: "毫克/升",
        XData: [1,2,3,4,5,6,7,8,9],
        YData: [12,34,56,66,65,77,12,11,33,44],

        areaStyleColor: {
          fromColor: "#1AB8F9",
          toColor: "rgba(63,227,236,0.1)"
        },
        itemStyle: {
          color: "#1AB8F9"
        }
      }