1.用echats绘制图表的时候，遇到的问题是切换tab,图表无法绘制出来。

解决方案，在??<el-tab-pane>里添加lazy

<!-- 6企业渠道统计 -->
<el-row
:gutter="12"
style="margin-top: 20px"
>
<el-col style="width: 1100px">
    <el-card shadow="always">
    <div
        slot="header"
        class="clearfix memberTeam"
    >
        <div class="left">
        <span class="teamTitle">企业渠道统计
        </span>
        </div>
        <div class="right">
        <el-date-picker
            v-model="time_enterprise_channel"
            type="month"
            value-format="yyyy-MM"
            format="yyyy 年 MM 月 "
            placeholder="选择月"
            style="margin-right: 10px"
            @change="changeEnterpriseChannel()"
            :picker-options="pickerOptionDisable"
        >
            </el-date-picker>
            <el-button
            type="primary"
            @click="exportData(6)"
            >导出</el-button>
        </div>
        </div>

        <div
            class="card_box"
            v-loading="amountLoading3"
            element-loading-text="数据加载中，请耐心等待"
            element-loading-spinner="el-icon-loading "
        >
            <el-tabs
            v-model="activeName2"
            @tab-click="handleClick2"
            >
            <el-tab-pane
                label="企业数"
                name="one"
            >
            <div
            id="enterpriseChannelEchart"
            style="height: 300px"
            >企业数图表</div>
            </el-tab-pane>
            <el-tab-pane
                label="广告消耗企业"
                name="two"
                lazy
            >
            <div
            id="adConsumeEchart"
            style="height: 300px"
            >广告消耗企业图表</div>
            </el-tab-pane>
            <el-tab-pane
                label="广告充值客单价"
                name="three"
                lazy
            >
            <div
            id="adRechargeEchart"
            style="height: 300px"
            >广告充值客单价图表</div>
            </el-tab-pane>
            </el-tabs>
            </div>
    </el-card>
</el-col>
</el-row>

?2.自定义tooltip的内容

这里的环比数据从接口拿到的，并不参与真正的图表绘制，想要展示这个数据，需要自定义tooltip.

核心代码如下：

              tooltip: {
                  trigger: "axis",
                  formatter: function (params) {
                    // console.log("打印")
                    // console.log(params);//打印params
                    return `${params[0].axisValue}<br/>${params[0].marker}${params[0].seriesName}:${newInfo[params[0].dataIndex]}<br/>
                    ${params[1].marker}${params[1].seriesName}:${allInfo[params[1].dataIndex]}`;
                  }
                },

?其中，newInfo 和 allInfo是从接口拿到关于环比信息的数组。

?3.堆叠图的数值展示问题。

想要实现如下效果

思路：将新增的数值隐藏，自定义总计的数值。

核心代码

formatter: function (v) {
  console.log(v)
  return newData[v.dataIndex] + "/" + (v.value)
},

完整的配置信息

var myChart = this.Echarts.init(
  document.getElementById("teamActionEchart")
);
var option = {
  color: ["#67C23A", "#409EFF"],
  tooltip: {
    trigger: 'axis',
    axisPointer: {????????????//?Use?axis?to?
      type: 'shadow'????????//?
    }
  },
  legend: {
    data: ['新增', '总计']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',


  },
  yAxis: {
    type: 'category',
    data: ['流失团队', '续约团队', '会员团队', '广告消耗团队', '活跃团队', '所有团队']
  },
  series: [
    {
      name: '新增',
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      emphasis: {
        focus: 'series'
      },

      data: newData,
    },
    {
      name: '总计',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: allData,
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: 'right',
            formatter: function (v) {
              console.log(v)
              return newData[v.dataIndex] + "/" + (v.value)
            },
            textStyle: { //数值样式
              color: '#666',
              fontSize: 12
            }
          }
        }
      },
    },


  ]              }
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

4.双Y轴图表，数值和比例同时参与绘制

如图所示，实现双y轴的配置如下：

?核心代码：

yAxis: [{
  type: "value",
},
{
  type: "value",
  min: 0,
  max: 100,
  interval: 25,
  axisLabel: {
    formatter: '{value} %'
  }

}],

series 里配置：yAxisIndex:?'1',

完整配置：

var myChart = this.Echarts.init(
  document.getElementById("adConsumeEchart")
);
var option = {
  color: ["#409EFF", "#67C23A"],
  tooltip: {
    trigger: "axis",
    formatter: function (params) {
      // console.log("打印")
      // console.log(params);//打印params
      return `${params[0].axisValue}<br/>${params[0].marker}${params[0].seriesName}:${adCostAddRate[params[0].dataIndex]}<br/>
      ${params[1].marker}${params[1].seriesName}:${activeAddRate[params[1].dataIndex]}`;
    }
  },
  legend: {
    data: ['广告消耗企业数', '活跃度']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    show: true,
    feature: {

    },
  },
  calculable: true,
  xAxis: {
    type: "category",
    data: channel_name,
  },
  yAxis: [{
    type: "value",
  },
  {
    type: "value",
    min: 0,
    max: 100,
    interval: 25,
    axisLabel: {
      formatter: '{value} %'
    }

  }],
  series: [
    {
      name: "广告消耗企业数",
      type: "bar",
      data: adCostCount
    },
    {
      name: "活跃度",
      type: "bar",
      yAxisIndex: '1',
      data: active
    },
  ],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

echart相关问题持续更新中~敬请期待