需求

如下图数据格式所示，现要求按照该格式进行绘制折线图

分析

在绘制折线图时，通常我们的 series 中的 data 数据是这样的格式

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

但是给定的格式是如下的这种，我们就需要进行一些变换

1. 首先是 Y 轴的格式需要改变，之前是value，但value会导致数据变为这种情况
   
   因此需要将Y轴格式改为如下，效果就出来了
   
   

2. X 轴需要变换

xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },

3. series 中 data 的数据需要变换

 series: [{
      data: [
          // xAxis    yAxis
          [  0,        0,    2  ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
          [  '星期四',  2,    1  ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
          [  2,       'p',   2  ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
          [  3,        3,    5  ]
      ]
  }] 

格式处理如下：

for (let index = 0; index < res.series.length; index++) {
      const item = res.series[index];
      const obj = {
          name: item.name,
          type: 'line',
          data: item.data,
          stack: 'Total',
          areaStyle: {},
          emphasis: {
              focus: 'series'
          },
      }
      option.value.series.push(obj)
  }

  option.value.xAxis.data = res.xAxisData

4. 源码

<template>
    <div ref="echartsRef" class="content"> </div>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive,
    watch,
    watchEffect,
    toRefs,
    defineProps,
    onMounted,
} from 'vue';
import * as echarts from 'echarts';
import { getInfoAQJCApi } from '@/api/dashboard'

/**
 * @description : 安全监测模块
 * @author : 'Hukang'
 * @param : '' 
 * @date : 2024-03-05 14:59:56
*/
const props = defineProps({
    //子组件接收父组件传递过来的值
    InfoAQJ: Object,
})
//使用父组件传递过来的值
const { InfoAQJ } = toRefs(props)



const echartsData = reactive({
    option: {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: [],
            right: "5%",
            top: "5%",
            textStyle: {
                fontSize: 12, //字体大小
                color: "#ffffff" //字体颜色
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [],
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.20)"
                }
            },
            axisTick: {
                show: false
            },
            nameTextStyle: {
                color: "#ffffff",
                fontSize: 12
            },
            axisLabel: {
                textStyle: {
                    color: "#ffffff",
                    fontSize: 12
                },
                formatter: (value, index) => {
                    return value
                        .replace(/(\d{4})-(\d{1,2})-(\d{1,2}).*/, "$1-$2-$3")
                        .slice(5);
                }
            }
        },
        yAxis: [
            {
                name: '',
                type: "value",
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: "#ffffff",
                    fontSize: 12
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#ffffff"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 12
                    }
                },
                splitLine: {
                    lineStyle: {
                        type: "dashed", //虚线
                        color: "rgba(255,255,255,0.2)"
                    },
                    show: true //隐藏
                },
                min(v) {
                    return v.min
                }
            }
        ],
        series: []
    }
});


const { option } = toRefs(echartsData);
const echartsRef = ref<string>();
let echartInstance;
let series = [];
function getAreaStyle(index) {
    let areaStyle = null;
    if (index == 0) {
        areaStyle = {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: "#FDBD35"
                },
                {
                    offset: 0.8,
                    color: "rgba(253, 189, 53, 0.1)"
                }
            ])
        };
    } else if (index == 1) {
        areaStyle = {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: "#32D7FF"
                },
                {
                    offset: 0.8,
                    color: "rgba(0,254,243,0.1)"
                }
            ])
        };
    } else {
        areaStyle = {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: "#20D661"
                },
                {
                    offset: 0.8,
                    color: "rgba(32,214,97,0.06)"
                }
            ])
        };
    }
    return areaStyle;
}
watchEffect(() => {
    if (InfoAQJ.value) {
        const res = InfoAQJ.value
        option.value.legend.data = res.legend
        option.value.yAxis[0].name = res.yMain[0]
        option.value.xAxis.data = res.xAxisData
        res.series.forEach((item, index) => {
            let obj = {
                name: item.name,
                type: "line",
                data: item.data,
                smooth: true,
                areaStyle: getAreaStyle(index)
            };

            series.push(obj);
            option.value.series.push(obj)
        });

    }
})
onMounted(() => {
    echartInstance = echarts.init(echartsRef.value, 'macarons');
    echartInstance.setOption(option.value);
});
</script>



<style scoped lang="less">
@import '@/assets/style/leftright.less';

.content {
    width: 100%;
    height: 100%;
}
</style>