vue3堆叠图展示（附效果图）

Cookie王

已于 2023-12-22 11:11:00 修改

阅读量487

点赞数 9

文章标签：前端 javascript 开发语言

于 2023-12-22 11:05:03 首次发布

本文链接：https://blog.csdn.net/weixin_73337633/article/details/135148391

版权

const option2 = computed(() => {
    const defaultOption = {
      //   title: {
      //     text: 'Stacked Area Chart',
      //   },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['省间绿电交易', '省间直接交易', '省内绿电交易', '省内直接交易'],
      },
      //   toolbox: {
      //     feature: {
      //       saveAsImage: {},
      //     },
      //   },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: datetimeXlist.value,
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '单位：万千瓦时',
          axisLine: {
            lineStyle: {
              color: '#000',
            },
          },
          axisLabel: {
            padding: [0, 20, 0, 0], // 设置上、右、下、左四个方向的内边距
          },
        },
      ],
      series: [
        {
          name: '省间绿电交易',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: sjgreenData.value,
        },
        {
          name: '省间直接交易',
          type: 'bar',
          stack: 'Total',
          barWidth: '30',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: shjDirectdata.value,
        },
        {
          name: '省内绿电交易',
          type: 'bar',
          stack: 'Total',
          barWidth: '30',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: shnGreendata.value,
        },
        {
          name: '省内直接交易',
          type: 'bar',
          stack: 'Total',
          barWidth: '30',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: shnDirectdata.value,
        },
      ],
    };

    return defaultOption;
  });

记得给容器加个宽度和高度宽度：100%，高度 40vh