carInsightSystem_wxapp/pages/index/Rankdetail/Rankdetail.js

// pages/index/Rankdetail/Rankdetail.js
  Page({
      /**
       * 页面的初始数据
       */
      data: {
          show:false,
          sortOpt: [
              {
                  text: '列表展示',
                  value1: 0
              },
              {
                  text: '图表展示',
                  value1: 1
              }
          ],
          value:0, 
          priceOpt: ['2022年5月','2022年4月','2022年3月',
                      '2022年2月','2022年1月','2021年12月',
                      '2021年11月','2021年10月','2021年9月',
                      '2021年8月','2021年7月','2021年6月',
                      '2021年5月','近半年','近一年',

            ],
          prcieInterval: [0, 10, 20, 30, 40, 50, '不限'],
          typeOpt: [
          ],
          value1: 0,
          value2: 'a',
          level:[
              {
                  text:'全部级别',
                  value4:'0'
              },
              {
                text:'微型车',
                value4:'1'
            },
            {
                text:'小型车',
                value4:'2'
            },
            {
                text:'紧凑型车',
                value4:'3'
            },
            {
                text:'中型车',
                value4:'4'
            },
            {
                text:'中大型车',
                value4:'5'
            },
            {
                text:'MPV',
                value4:'6'
            },
            {
                text:'SUV',
                value4:'7'
            }
          ],
          Price:[
            {
                text:'全部价格',
                value5:'0'
            },
            {
              text:'10万以内',
              value5:'1'
          },
          {
              text:'10万-15万',
              value5:'2'
          },
          {
              text:'15万-25万',
              value5:'3'
          },
          {
              text:'25万-35万',
              value5:'4'
          },
          {
              text:'35万-50万',
              value5:'5'
          },
          {
              text:'50万以上',
              value5:'6'
          }
          ],
          energy:[
            {
                text:'全部能源',
                value6:'0'
            },
            {
              text:'新能源',
              value6:'1'
          },
          {
              text:'汽油',
              value6:'2'
          },
          {
              text:'柴油',
              value6:'3'
          },
          {
              text:'油电混合',
              value6:'4'
          },
          {
              text:'轻混系统',
              value6:'5'
          },
        ],
        ranking: [
            {
                volume: '12345',
                media: '媒体',
                num:'3.23-6.98万',
                energy:'新能源',
                stsId:"2",
            },
            {
                volume: '12345',
                media: '媒体',
                num:'3.23-6.98万',
                energy:'汽油',
                stsId:"1",
            },
            {
                volume: '12345',
                media: '媒体',
                num:'3.23-6.98万',
                energy:'柴油',
            },
            {
                volume: '12345',
                media: '媒体',
                num:'3.23-6.98万',
                energy:'油电混合',
            },
            {
                volume: '12345',
                media: '媒体',
                num:'3.23-6.98万',
                energy:'轻混系统',
            },
            {
                volume: '12345',
                media: '媒体',
                num:'3.23-6.98万',
                energy:'新能源',
            },
            {
                volume: '12345',
                media: '媒体',
                num:'3.23-6.98万',
                energy:'新能源',
            },
            {
                volume: '12345',
                media: '媒体',
                num:'3.23-6.98万',
                energy:'新能源',
            },
        ],
        showChart: true,
        positiveOption: {
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                },
                confine: true
              },
             
              legend: {
                  x:'15',
                  icon: 'rectangle',//data图标样式
                  itemWidth: 10,//data图标大小
                  itemHeight: 10,
                  textStyle: {
                      fontSize: 9
                  },
                data: ['正面', '中性','负面'],
              },
              //图表位置
              grid: {
                left: 20,
                right: 20,
                bottom: 15,
                top: 40,
                containLabel: true
              },
              yAxis: [
                {
                  type: 'value',
                  axisTick:{
                      show:false   //去除刻度线
                  },
                  axisLine:{
                      show:false  //去除轴线
                  },
                  axisLabel: {
                    color: '#999999',//y轴文本颜色
                    textStyle: {
                      fontSize : 9
                  }
                  },
                  splitLine: {  //分割线
                      // lineStyle:{
                      //     // color:"#2d3436"
                          
                      // }
                      show: true,
                  lineStyle: {
                      type: 'dashed',
                      color: '#E8E8E8',
                  }
                  }
                }
              ],
              xAxis: [
                {
                  type: 'category',
                  data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
                  axisTick:{
                      show:false   //去除刻度线
                  },
                  axisLine:{
                      show:false,  //去除轴线
                  },
                  axisLabel: {
                    color: '#999999',//x轴文本颜色
                    textStyle: {
                      fontSize : 9
                  }
  
                  }
                }
              ],
              series: [
                {
                  name: '正面',
                  type: 'line',
                  symbol:'none', //去圆点
                  data: [100, 200, 300, 500, 700, 500, 300],
                  itemStyle: {
                      normal:{
                          color: '#0084FF',
                          lineStyle: {
                              color: '#0084FF'
                            }
                      }
                    }
                },
                {
                  name: '中性',
                  type: 'line',
                  symbol:'none', //去圆点
                  data: [700, 900, 1100, 800, 1690, 1250, 920],
                  itemStyle: {
                      normal:{
                          color: '#20CC62',
                          lineStyle: {
                              color: '#20CC62'
                            }
                      }
                    }
                },
                {
                  name: '负面',
                  type: 'line',
                  symbol:'none', //去圆点
                  data: [1100, 1300, 1500, 1200, 1300, 2000, 1000],
                  itemStyle: {
                      normal:{
                          color: '#FFBF00',
                          lineStyle: {
                              color: '#FFBF00'
                            }
                      }
                    }
                  
                },
              ]
            },
      },
    //   sliderChange(event) {
    //       this.setData({
    //           sliderValue: event.detail
    //       });
    //   },
      dropdownSel(e){
         this.setData({
            value1:e.detail
  })
  },
  priceSel(e){
      this.setData({
          priceSelected: e.currentTarget.dataset.index
      })
  },
  onclick() {
    this.setData({ show: true });
  },
 
  onClose() {
    this.setData({ show: false });
  },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
          console.log('111',this.data.sortOpt[0].value1)
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
  
      },
  
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        // this.getTabBar().init();
  
      },
  
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
  
      },
  
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
  
      },
  
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
  
      },
  
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
  
      },
  
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
  
      }
  })