fxc-wecat/pages/index/indexRight/rightBar3/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){
        this.getProductTypeStateList();
      }else{
        var list = [{name:"生化诊断",value:50,},{name:"免疫诊断",value:30,},{name:"分子诊断",value:30,},{name:"血液检测",value:30,}]
        this.init(list);
      }
    },
    moved: function () { },
    detached: function () { },
  },
  methods:{
    getProductTypeStateList(){
      app.requestP({
        url: '/daping/productTypeState',
        method: 'post',
      }).then(res=>{
        var statisticProductList = res.data.data.map(item=>{
          var name = item.product_type_name || 'N/A';
          name = name.length > 5 ? name.slice(0,2)+'...':name;
          return {...item,name,value:item.num}
        });
        this.init(statisticProductList);
      })
    },
    init(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:["#333FFF","#FFAE36"],
        title:{
          text:"产品分类信息",
          show:0,
          textStyle:{
            color:fontColor,
            fontSize:fontSize,
          },
          left:'center',
          top:0,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          }
        },
        grid: {
          top: '20%',
          left: '6%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          axisTick:{show:false,},
          axisLabel:{
            fontSize:fontSize,
            color:fontColor,
          },
        },
        xAxis: {
          type: 'category',
          axisTick:{show:false,},
          axisLabel:{
            fontSize:fontSize,
            color:fontColor,
          },
          axisLine:{
            lineStyle:{
              color:"#cccccc"
            }
          },
          data: list.map(item=>item.name)
        },
			  series:[
          {
            type: 'bar',
            barMaxWidth:fontSize*1.5,
            data:list
          },
        ],
      }
    },
  },
})