enchart初使用

最新推荐文章于 2025-03-12 15:20:08 发布

weixin_43677409

最新推荐文章于 2025-03-12 15:20:08 发布

阅读量392

点赞数

本文链接：https://blog.csdn.net/weixin_43677409/article/details/107554171

版权

让标题和价格换行数据为0的不展示处理

    // 初始化echart
 drawPie(id, channelData) {
      this.chart = this.$echarts.init(document.getElementById(id));
      console.log(this.chart);
      let color = ["#5b9bd5", "#ed7d31", "#a9d18e", "#ffc000", "#06d3c4"];
      this.chart.setOption({
        name: "访问来源",
        type: "pie",
        radius: "30%",
        center: ["30%", "55%"],
        // itemStyle: {
        //   normal: {
        //     color: function(params) {
        //       return color[params.dataIndex];
        //     }
        //   }
        // },
        label: {
          position: "inner",
          fontSize: 14,
          formatter: function(params) {
            var str=`${params.name}:￥${params.value} `
            if(params.value>0){
              return str.split(":").join("\n")//设置标题和价格换行
            }
            
          },
          show: true
        },
        series: [
          {
            name: "今日收银概况",
            type: "pie",
            radius: "55%",
            data: channelData
          }
        ],
        color: ["#f89588", "#63b2ee", "#76da91", "#7cd6cf",'#f8cb7f'],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      });
    },

getData() {
      getHomeData().then(res => {
        if (res.code == 200) {
          this.showDetail = false;
          this.detailData = res.data;
          this.$nextTick(() => {
           
            let channel = [];
            for (let i = 0; i < res.data.payment_channel.length; i++) {
              if (res.data.payment_channel[i].pay_type == 1) {
                channel.push({
                  name: "现金",
                  value: res.data.payment_channel[i].payment?res.data.payment_channel[i].payment:null
                });
              } else if (res.data.payment_channel[i].pay_type == 2) {
                channel.push({
                  name: "支付宝",
                  value: res.data.payment_channel[i].payment?res.data.payment_channel[i].payment:null
                });
              } else if (res.data.payment_channel[i].pay_type == 3) {
                channel.push({
                  name: "微信",
                  value: res.data.payment_channel[i].payment?res.data.payment_channel[i].payment:null//为0的数据不让使用
                });
              } else if (res.data.payment_channel[i].pay_type == 4) {
                channel.push({
                  name: "银行卡",
                  value: res.data.payment_channel[i].payment?res.data.payment_channel[i].payment:null
                });
              } else if (res.data.payment_channel[i].pay_type == 5) {
                channel.push({
                  name: "POS",
                  value: res.data.payment_channel[i].payment?res.data.payment_channel[i].payment:null
                  //为0不展示 设置为null
                });
              }
            }
            this.drawPie("chartPie", channel);
          });
        }
      });
    },