lanzhouYC/components/warehousingInformationEcharts.vue

<template>
    <div id="statisticsEchsrts1" ></div>
</template>

<script>
export default {
name: "echarsDemo",
 props: {
  ydata: {
      default: () => false,
            type: [Array, Boolean],
            required: true
    },
  xdata: {
      default: () => false,
            type: [Array, Boolean],
            required: true
    },
  },
  data(){
  return{

  };
  },
  watch:{
    ydata:{
      handler:function(newV){
        console.log("newV",newV)
         this.getRuKuEcharts()
      }
    },
    xdata:{
      handler:function(newV1){
         console.log("newV1",newV1)
         this.getRuKuEcharts()
      }
    }
  },
  mounted() {
  this.getRuKuEcharts()
  console.log("111",this.xdata);
   console.log("222",this.ydata);
  },
  methods:{
   getRuKuEcharts() {
       var myChart = this.$echarts.init(
        document.getElementById("statisticsEchsrts1")
      );
      //     let value = [5, 7, 8, 9, 10, 11, 13, 15, 16, 14, 13, 12, 8, 6, 5, 4, 5, 6, 7, 8, 10, 11, 10, 8,12,13,9,6];
      //    let min = Math.min(...value); //计算最小值
      //    let max = Math.max(...value); //计算最大值
      var option = {
        tooltip: {
          trigger: "axis",
        },
        color: ["#52F478"],
        icon: "circle",
        //   legend: {
        //     x:'580px',
        //     y: '30px',
        //     data: [{
        //       name: '月',
        //       icon:'none'
        //     },
        //       {
        //         name: '日',
        //          icon:'none'
        //       }],
        //     textStyle:{
        //       fontSize: 14,//字体大小
        //       color: '#BBF6FF',//字体颜色

        //     },
        //     selectedMode: 'single',
        //   },
        grid: {
          left: "10%", //默认10%
          right: "5%", //默认10%
          // bottom: "8%", //默认60
        },
         dataZoom: [//滑动条
                 {
            type: "slider",
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 33,
            // handleSize: 10,//左右2个滑动条的大小
             borderColor: 'rgba(8,50,56,0)', //滑动通道的边框颜色
         fillerColor: 'rgba(8,50,56,0)', //滑动条颜色
         backgroundColor: 'rgba(8,50,56,0)',//未选中的滑动条的颜色
         showDataShadow: false,//是否显示数据阴影 默认auto
            // textStyle:{
            //   color:"#ccd7d7"
            // }
          },
                  ],
        xAxis: {
          type: "category",
          name: "",
          nameGap: "16",
          show: true,
          boundaryGap: false,
          offset: 25,
          axisLabel: {
            textStyle: {
              color: "#FFFFFF",
            },
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#BBF6FF",
              width: 2,
            },
            symbol: ["none", "arrow"],
          },
          // data: this.dateArry,
         data: this.xdata,
        },
        yAxis: {
          type: "value",
          name: "单位: 千克",
          show: true,
          offset: "35",
          // position: 'absolute',
          nameTextStyle: {
            color: "#ffffff",
            padding: [0, -15, 30, 0],
            // verticalAlign: 'top'
            align: "right",
          },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgb(13,190,196)",
              width: 1,
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgb(8,99,116)",
              width: 1,
            },
            symbol: ["none", "arrow"],
          },
        },
        series: [
          {
            name: "",
            type: "line",
            smooth: true,
            // symbol:'rect',
            //  symbolSize:10,
            lineStyle: {
              normal: {
                color: "#29f0f1",
                width: 3,
              },
            },
            // areaStyle: {
            //   normal: {
            //     color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //       {
            //         offset: 0,
            //         color: "rgb(9,84,88)",
            //       },
            //       {
            //         offset: 1,
            //         color: "rgb(9,71,72)",
            //       },
            //     ]),
            //   },
            // },
            // data: [3666, 2666, 1666, 234, 250, 899, 1200, 900, 2000, 666, 999],
            data: this.ydata,
            // markPoint: {
            //   data: [{ type: "max", name: "最大值" }],
            // },
            // symbol: function (value, params) {
            //   if (value == min || value == max) {
            //     return "circle"; //拐点类型
            //   } else {
            //     return "none"; //拐点不显示
            //   }
            // },
            markPoint: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: "#ffffff",
                borderColor: "#29f0f1", //拐点边框颜色

                lineStyle: {
                  color: "#29f0f1", //折线颜色
                },
                label: { show: false, color: "#ffffff" },
              },
            },
          },
          // {
          //   name: "",
          //   type: "line",
          //   smooth: true,
          //   // symbol:'rect',
          //   //  symbolSize:10,
          //   lineStyle: {
          //     normal: {
          //       color: "#29f0f1",
          //       width: 3,
          //     },
          //   },
          //   // areaStyle: {
          //   //   normal: {
          //   //     color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //   //       {
          //   //         offset: 0,
          //   //         color: "rgb(9,84,88)",
          //   //       },
          //   //       {
          //   //         offset: 1,
          //   //         color: "rgb(9,71,72)",
          //   //       },
          //   //     ]),
          //   //   },
          //   // },
          //   // data: [5000, 3444, 6666, 4888, 3444, 2333, 1200, 900, 2000, 666],
          //   data: this.ydata,
          //   // markPoint: {
          //   //   data: [{ type: "max", name: "最大值" }],
          //   // },
          //   // symbol: function (value, params) {
          //   //   if (value == min || value == max) {
          //   //     return "circle"; //拐点类型
          //   //   } else {
          //   //     return "none"; //拐点不显示
          //   //   }
          //   // },
          //   markPoint: {
          //     show: true,
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#ffffff",
          //       borderColor: "#29f0f1", //拐点边框颜色

          //       lineStyle: {
          //         color: "#29f0f1", //折线颜色
          //       },
          //       label: { show: false, color: "#ffffff" },
          //     },
          //   },
          // },
        ],
      };

      myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
#statisticsEchsrts1{
  height: 93%;
          width: 77%;
}
</style>