Echarts 配置项 series 中的 data 是多维度

文章目录

• • 需求
  • 分���

    需求

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

    分析

    在绘制折线图时，通常我们的 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: []        },

    1. 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  
    源码
         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();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);});@import '@/assets/style/leftright.less';.content {    width: 100%;    height: 100%;}