initChart() {
        var myChart = echarts.init(document.getElementById('lineChart'));
        this.chart = echarts.init(this.$el, 'macarons')
        
        this.chart.setOption({
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
           tooltip: {
              trigger: 'axis',
              formatter: (comp, value) => {
                  const [serie] = comp;

                  return `${serie.name}: ${serie.value}`;
              },
              axisPointer: {
                  show: true,
                  status: 'shadow',
                  z: -1,
                  shadowStyle: {
                      color: '#e6f7ff',
                  },
                  type: 'shadow',
              },
           },
          xAxis: {
              type: 'category',
              // data: ['超期', '1天', '1-3天', '3-5天', '5天以上']
              data: this.typeList
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              // data: [120, 200, 150, 80, 70],
              data: this.numList,
              type: 'bar',
              //设置柱状图大小
              barWidth : 40,
              itemStyle: {
                normal: {
                  color: "#5087EC",
                }
              },
          }]
        })
        //点击事件
        let that= this;

        // 防止重复点击事件,反复调用接口
        myChart.getZr().off('click');
        // 柱状图因高度太低难以点击,设置点击阴影就触发点击事件
        myChart.getZr().on('click', function (p) {
          const pointInPixel = [p.offsetX, p.offsetY];
          if (myChart.containPixel('grid', pointInPixel)) {
              let pointInGrid = myChart.convertFromPixel({seriesIndex: 0}, pointInPixel);
              let xIndex = Number(pointInGrid[0]); //索引
              let seriesObj = myChart.getOption(); //图表object对象
              // console.log(xIndex, seriesObj);
              let xLabels = seriesObj.xAxis[0].data; // 横坐标各标志名称数组
              that.title = xLabels[xIndex] + '到货';
              let type = xLabels[xIndex];
              // console.log('type',type)
              switch(type) {
                case that.typeList[0]: that.thisType = '1'; break;
                case that.typeList[1]: that.thisType = '2'; break;
                case that.typeList[2]: that.thisType = '3'; break;
                case that.typeList[3]: that.thisType = '4'; break;
                case that.typeList[4]: that.thisType = '5'; break;
              }
              that.getDhsjListInfo(that.thisType);
              that.visible = true;
            };
          
        });
        //鼠标移入图形区域,变成可点击的小手事件
        myChart.getZr().on('mousemove',function (params) {
          var pointInPixel= [params.offsetX, params.offsetY];
          if (myChart.containPixel('grid',pointInPixel)) {
            myChart.getZr().setCursorStyle('pointer');
          };
        });


    },

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐