echarts显示10年家庭消费总量和个人消费总量柱状图，并在个人消费总量柱状图标注占比

可以使用ECharts的柱状图（bar）和标签（label）组件来实现这个需求。下面是一个简单的示例代码：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 配置家庭消费总量数据
var familyData = [5000, 6000, 7000, 8000, 9000, 10000, 11000, 12000, 13000, 14000];

// 配置个人消费总量数据
var personalData = [2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500];

// 计算个人消费总量占比
var totalPersonal = personalData.reduce(function(a, b) {
  return a + b;
});
var personalPercentage = personalData.map(function(value) {
  return (value / totalPersonal * 100).toFixed(2) + '%';
});

// 配置echarts选项
var option = {
  // 配置x轴
  xAxis: {
    type: 'category',
    data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020']
  },
  // 配置y轴
  yAxis: [
    {
      type: 'value',
      name: '消费总量'
    },
    {
      type: 'value',
      name: '个人消费总量占比',
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  // 配置系列数据
  series: [
    {
      name: '家庭消费总量',
      type: 'bar',
      data: familyData
    },
    {
      name: '个人消费总量',
      type: 'bar',
      data: personalData,
      // 配置标签
      label: {
        show: true,
        position: 'top',
        formatter: function(params) {
          return personalPercentage[params.dataIndex];
        }
      },
      // 配置y轴
      yAxisIndex: 1
    }
  ]
};

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

在这个示例中，我们首先定义了家庭消费总量和个人消费总量两个数组，然后通过reduce方法计算出了个人消费总量的占比，用map方法生成了一个新的数组personalPercentage。接着，我们配置了echarts的x轴、y轴和系列数据，其中个人消费总量的系列数据加上了标签，标签的内容就是personalPercentage数组对应位置的值。最后，将配置项应用到echarts实例中即可显示出柱状图。