mounted thisgetuserstudy; 通过ref获取div元素 const chartDom = this$refschart; const pieChartDom = this$refspieChart; 初始化echarts实例 const chartInstance = echartsinitchartDom; const pie

： // 设置学习任务的柱状图配置项和数据 const option = { title: { text: '学习任务完成情况', subtext: '最近30天', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['已完成', '未完成'], top: 30 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6', '任务7'], axisTick: { alignWithLabel: true } }, yAxis: { type: 'value' }, series: [ { name: '已完成', type: 'bar', stack: '任务', barWidth: '60%', label: { show: true, position: 'insideRight' }, data: [10, 20, 30, 40, 50, 60, 70] }, { name: '未完成', type: 'bar', stack: '任务', barWidth: '60%', label: { show: true, position: 'insideRight' }, data: [5, 10, 15, 20, 25, 30, 35] } ] }; chartInstance.setOption(option);

// 设置任务管理的柱状图配置项和数据
const taskOption = {
  title: {
    text: '任务完成情况',
    subtext: '最近30天',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['已完成', '未完成'],
    top: 30
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6', '任务7'],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '已完成',
      type: 'bar',
      stack: '任务',
      barWidth: '60%',
      label: {
        show: true,
        position: 'insideRight'
      },
      data: [10, 20, 30, 40, 50, 60, 70]
    },
    {
      name: '未完成',
      type: 'bar',
      stack: '任务',
      barWidth: '60%',
      label: {
        show: true,
        position: 'insideRight'
      },
      data: [5, 10, 15, 20, 25, 30, 35]
    }
  ]
};
pieChartInstance.setOption(taskOption);

}