fxc-wecat/pages/index/indexRight/rightBar2/index.js

const app = getApp();
import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
Component({
  data:{
    Ec: { lazyLoad: true, },
  },
  lifetimes: {
    attached: function () {
      
      var token = wx.getStorageSync('token');
      if(!token){
        var list = [
          {name:"已使用",data:[{name:"2022",value:35,},{name:"2021",value:30,},{name:"2020",value:20,},{name:"2019",value:30,}]},
          {name:"未使用",data:[{name:"2022",value:50,},{name:"2021",value:30,},{name:"2020",value:30,},{name:"2019",value:30,}]},
          {name:"不良率",data:[{name:"2022",value:10,},{name:"2021",value:5,},{name:"2020",value:10,},{name:"2019",value:10,}]},
        ]
        this.initChart(list);
      }
    },
    moved: function () { },
    detached: function () { },
  },
  properties:{
    prductIndex:{
      type:String,
      value:'',
    }
  },
  observers:{
    'prductIndex':function(nv,ol){
      var token = wx.getStorageSync('token');
      if(token && nv){
        this.getYearStatusStateList(nv);
      }
    }
  },
  methods:{
    getYearStatusStateList(productName){
      app.requestP({
        url: '/daping/yearStatusState?productName=',
        method: 'post',
      }).then(res=>{
        console.log(res.data.data);
        var yearType = [{name:'已使用',type:'use'},{name:'未使用',type:'unuse'},{name:'不良率',type:'fail'}];
        var datas = [];
        for (var index = 0; index < yearType.length; index++) {
          var types = [];
          res.data.data.map((item,i)=>{
            types.push({
              name:item.year,value:item[yearType[index].type],
            })
            if(i == res.data.data.length-1){
              datas.push(
                {name:yearType[index].name, data:types}
              )
            }
          })
        }
        this.initChart(datas)
      })
    },
    initChart(list){
      var that = this;
      that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        var option = that.getOrderWarnOption(list);
        chart.setOption(option);
        return chart;
      });
    },
    getOrderWarnOption(list){
      var fontSize = 10
      var fontColor = "#999999"
      return {
        color:["#2D59E6","#7FD1FF","#E1291C","#2D59E6"],
        title:{
          text:"历年所有试剂的数据",
          show:0,
          textStyle:{
            color:fontColor,
            fontSize:fontSize,
          },
          left:'15%',
          top:0,
        },
        grid: {
          top: '20%',
          left: '6%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          }
        },
        legend:{
          icon:"circle",
          right:'auto',
          top:0,
          itemWidth:fontSize*0.8,
          itemHeight:fontSize,
          textStyle:{
            fontSize:fontSize,
            color:fontColor,
          },
          data:list.map(item=>item.name)
        },
        yAxis: [
          {
            type: 'value',
            name:"",
            splitNumber:5,
            axisTick:{show:false,},
            axisLabel:{
              fontSize:fontSize,
              color:fontColor,
            },
            nameTextStyle:{
              fontSize:fontSize,
              color:fontColor,
            },
            nameGap:5,
          },
          {
            type: 'value',
            position: 'right',
            splitNumber:5,
            boundaryGap:[0,1],
            name:"%",
            axisTick:{show:false,},
            splitLine:{show:false,},
            axisLabel:{
              fontSize:fontSize,
              color:fontColor,
            },
            nameTextStyle:{
              fontSize:fontSize,
              color:fontColor,
            },
            nameGap:5,
          },
        ],
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisTick:{show:false,},
          axisLabel:{
            fontSize:fontSize,
            color:fontColor,
          },
          data: list.length? list[0].data.map(item=>item.name) : []
        },
			  series:this.setOptItem(list),
      }
    },
    setOptItem(list){
      var data = []
      var fontSize = 10
      for(var i in list){
        if(i==2){
          data.push({
            type: 'line',
            name:"%",
            silent:1,
            yAxisIndex: 1,
            barMaxWidth:fontSize*1.5,
            name:list[i].name,
            data:list[i].data
          })
        }else{
          data.push({
            type: 'bar',
            stack: 'Total',
            name:"千万",
            silent:1,
            barMaxWidth:fontSize*1.5,
            name:list[i].name,
            data:list[i].data
          })
        }
      }
      return data
    },
  },
})