折线图根据数据格式显示不同线条

最新推荐文章于 2024-08-19 20:48:55 发布

兴奋的马喽

最新推荐文章于 2024-08-19 20:48:55 发布

阅读量92

点赞数 3

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

本文链接：https://blog.csdn.net/Crazy___Promise/article/details/140608507

版权

图示：

数据格式代码：

lineChartsData: {
                xData: ['家具', '电器', '数码', '食品', '服装', '医药'],
                yData: [
                    {
                        name: '店铺一',
                        data: [10, 50, 60, 24, 52, 35]
                    },
                    {
                        name: '店铺二',
                        data: [20, 80, 50, 34, 22, 45]
                    }
                ]
            }

组件代码：

<template>
    <div class="box">
        <div :id="chartsId">
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    props: {
        chartsId: {
            type: String,
            default: ''
        },
        chartsData: {
            type: Object,
            default: () => { }
        },
    },
    data() {
        return {}
    },
    mounted() {
        setTimeout(() => {
            this.init()
        }, 600)
    },
    methods: {
        init() {
            // 初始化echarts实例
            var myChart = echarts.init(document.getElementById(this.chartsId));
            let color = [
                {
                    color1: 'rgba(137, 189, 27, 0.3)',
                    color2: 'rgba(0, 136, 212, 0)',
                    color3: 'rgba(0, 0, 0, 0.1)',
                    color4: 'rgb(0,136,212)',
                    color5: 'rgba(137,189,2,0.27)',
                },
                {
                    color1: 'rgba(0, 136, 212, 0.3)',
                    color2: 'rgba(137, 189, 27, 0)',
                    color3: 'rgba(0, 0, 0, 0.1)',
                    color4: 'rgb(137,189,27)',
                    color5: 'rgba(0,136,212,0.2)',
                },
                {
                    color1: 'rgba(219, 50, 51, 0.3)',
                    color2: 'rgba(219, 50, 51, 0)',
                    color3: 'rgba(0, 0, 0, 0.1)',
                    color4: 'rgb(219,50,51)',
                    color5: 'rgba(219,50,51,0.2)',
                },
                {
                    color1: 'rgba(150, 70, 51, 0.3)',
                    color2: 'rgba(150, 50, 51, 0)',
                    color3: 'rgba(0, 0, 0, 0.1)',
                    color4: 'rgb(150,70,51)',
                    color5: 'rgba(150,70,51,0.2)',
                },
                {
                    color1: 'rgba(195, 50, 51, 0.3)',
                    color2: 'rgba(195, 50, 51, 0)',
                    color3: 'rgba(0, 0, 0, 0.1)',
                    color4: 'rgb(195,50,51)',
                    color5: 'rgba(195,50,51,0.2)',
                },
                {
                    color1: 'rgba(129, 50, 68, 0.3)',
                    color2: 'rgba(129, 50, 68, 0)',
                    color3: 'rgba(0, 0, 0, 0.1)',
                    color4: 'rgb(129,50,68)',
                    color5: 'rgba(129,50,68,0.2)',
                }
            ]
            let arr = []
            let title = []
            if (this.chartsData.yData.length > 0) {
                arr = this.chartsData.yData.map((e, i) => {
                    title.push(e.name)
                    return {
                        name: e.name,
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: color[i].color1,
                                        },
                                        {
                                            offset: 0.8,
                                            color: color[i].color2,
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: color[i].color3,
                                shadowBlur: 10,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: color[i].color4,
                                borderColor: color[i].color5,
                                borderWidth: 12,
                            },
                        },
                        data: e.data,
                    }
                })
            }
            var option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                },
                legend: {
                    icon: "rect",
                    itemWidth: 14,
                    itemHeight: 5,
                    itemGap: 13,
                    data: title,
                    right: "4%",
                    top: '5%',
                    textStyle: {
                        fontSize: 12,
                        color: "#F1F1F3",
                    },
                },
                grid: {
                    top: '20%',
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        data: this.chartsData.xData,
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14,
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#57617B",
                            },
                        },
                    },
                ],
                series: arr

            }

            // 使用配置项和数据显示图表
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    },
    computed: {},
    watch: {
        chartsData: {
            handler(val) {
                if (val.yData.length > 0) {
                    this.init()
                }
            },
            deep: true,
            // immediate: true
        }
    },
}
</script>
<style scoped lang='less'>
.box {
    width: 100%;
    height: 100%;

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