VUE折线图和柱状图

26 篇文章 0 订阅
<!--标签-->
      <el-tabs class="stat1_3" v-model="activeName">
        <el-tab-pane label="柱状图" name="first">
          <!--柱状图-->
          <v-chart class="stat1_chart" :forceFit="true" :height="height" :data="data" :scale="scale">
            <v-tooltip/>
            <v-axis/>
            <v-bar position="collectTime*paramterValue" />
          </v-chart>
        </el-tab-pane>
        <el-tab-pane label="折线图" name="second" lazy="true"><!--lazy="true"-->
          <!--折线图-->
          <v-chart class="stat1_chart" :forceFit="true" :height="height" :data="data" :scale="scale">
            <v-tooltip/>
            <v-axis/>
            <v-line position="collectTime*paramterValue" />
          </v-chart>
        </el-tab-pane>
      </el-tabs>
<script>
//折线图
const data = [
  {collectTime: '1月', paramterValue: 20},  //x轴*y轴
  {collectTime: '2月', paramterValue: 50},
];
const scale = [{
  dataKey: 'paramterValue',    //y轴
  min: 0,
}, {
  dataKey: 'collectTime',   //x轴
  min: '0',
  max: '1',
}];

export default {
  name: "station4",
  data() {
    return {
      //标签
      activeName: 'first',
      //折线图
      data,
      scale,
      height: 400,
    }
  },
 //按钮
    SELECT(){
      let data1 = new Date(this.time1);
      let y1 = data1.getFullYear();
      let m1 = data1.getMonth()+1;
      m1 = m1 < 10 ? ('0'+m1):m1;
      let d1 = data1.getDate();
      d1 = d1 < 10 ? ('0'+d1):d1;
      const Time1 = y1 + '-' + m1 + '-' + d1;
      let data2 = new Date(this.time2);
      let y2 = data2.getFullYear();
      let m2 = data2.getMonth()+1;
      m2 = m2 < 10 ? ('0'+m2):m2;
      let d2 = data2.getDate();
      d2 = d2 < 10 ? ('0'+d2):d2;
      const Time2 = y2 + '-' + m2 + '-' + d2;
      if(this.time1>this.time2){
        this.$message.error('时间输入错误:开始时间不得大于结束时间');
      }
      else if(this.time1===this.time2){
        this.$message.error('时间输入错误:开始时间不得于结束时间相同');
      }
      else {
        this.axios({
          url:this.ip+'/Api/..',
          method:'get',
          params:{
            time1:Time1,
            time2:Time2,
            stationName:this.select1,
            cs:this.select2,
            cxtj:this.select3,
          }
        }).then((res)=>{
          console.log(res.data.result)
          this.data=res.data.result//点击查询后把数据给data
        }).catch((err)=>{
          console.log(err)
        })
      }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值