echarts实现自定义折线图横坐标图片

最新推荐文章于 2024-04-11 15:29:52 发布

Best'

最新推荐文章于 2024-04-11 15:29:52 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/weixin_44252277/article/details/116204833

版权

一、我们可以参考一下echarts官网的实列

二、直接粘贴一下完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            background-color: white;
            width: 100%;
            height: 15px;
            position: absolute;
            margin-top: -78px;
        }
    </style>
</head>
<body>
<div id="main" style="width: 90%;height:600px;margin-left: 20px;"></div>
<div class="div"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.common.js"></script>
<script>
    let main = echarts.init(document.getElementById('main'));
    let digg_count = [100, 999, 666, 888, 123];//点赞数
    let share_count = [150, 919, 566, 878, 1223];//分享数
    let comment_count = [10, 99, 66, 88, 623];//评论数
    let riqi = ['2021-05-01', '2021-05-02', '2021-05-03', '2021-05-04', '2021-05-05'];//横坐标日期时间
    var img = ["https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2243316570,1742999026&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1801493210,2780773383&fm=26&gp=0.jpg",
        "https://img2.baidu.com/it/u=711656956,573821896&fm=26&fmt=auto&gp=0.jpg",
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1191289887,4203399581&fm=26&gp=0.jpg",
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=711656956,573821896&fm=26&gp=0.jpg'];//横坐标要添加的图片
    let option = {
        title: {
            text: '{a|} 最近5个作品表现',
            show: true,
            textStyle: {
                lineHeight: 20,
                rich: {
                    a: {
                        color: '#FFF',
                        fontSize: '20',
                        height: 20,
                        width: 20,
                        backgroundColor: {
                            image: (img[0])//自定义标题图片
                        }
                    },
                }
            }
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['评论数', '分享数', '点赞数']
        },
        grid: {
            containLabel: true
        },
        xAxis: [
            {//显示日期的横坐标
                triggerEvent: false,
                type: 'category',
                data: riqi,
                axisPointer: {
                    type: 'shadow'
                },
                min: 0,

            },
            {//显示图片的横坐标
                type: 'category',
                position: 'bottom',
                min: 0,
                offset: 25,
                axisPointer: {
                    type: 'none'
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                triggerEvent: true,//添加点击事件
                inverse: true,
                data: ['img1', 'img2', 'img3', 'img4', 'img5'].reverse(),
                axisLabel: {
                    formatter: function (value) {
                        return '{' + value + '| }\n{value|' + value + '}';
                    },
                    margin: 20,
                    rich: {
                        value: {
                            lineHeight: 50,
                            align: 'center'
                        },
                        img1: {
                            height: 100,
                            width: 80,
                            align: 'center',
                            backgroundColor: {
                                image: img[0]
                            }
                        },
                        img2: {
                            height: 100,
                            width: 80,
                            align: 'center',
                            backgroundColor: {
                                image: img[1]
                            }
                        },
                        img3: {
                            height: 100,
                            width: 80,
                            align: 'center',
                            backgroundColor: {
                                image: img[2]
                            }
                        },
                        img4: {
                            height: 100,
                            width: 80,
                            align: 'center',
                            backgroundColor: {
                                image: img[3]
                            }
                        },
                        img5: {
                            height: 100,
                            width: 80,
                            align: 'center',
                            backgroundColor: {
                                image: img[4]
                            }
                        }
                    }
                }
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '点赞数',
                min: 0
            },
            {
                type: 'value',
                name: '评论数-分享数',
                min: 0
            }
        ],
        series: [
            {
                name: '评论数',
                data: comment_count,
                type: 'line',
                yAxisIndex: 1,
                smooth: true,//平滑线设置
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#0b73e3', //改变折线颜色
                        }
                    }
                },
            },
            {
                name: '分享数',
                data: share_count,
                type: 'line',
                smooth: true,//平滑线设置
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#4af388' //改变折线颜色
                        }
                    }
                },
            },
            {
                name: '点赞数',
                type: 'bar',
                barWidth: 40,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: '#13c4db' //改变折线颜色
                    }
                },
                data: digg_count
            },
        ]
    };
    main.clear();//清空
    main.setOption(option);
    /*图片点击事件*/
    main.on('click', function (params) {
        //window.open(mapUrl[params.name]);
        alert(params.value);
    })
    window.addEventListener("resize", () => {//自适应浏览器大小（注：容器宽度应设置%）
        main.resize();
    });
</script>
</body>
</html>

三、效果图

在这里插入图片描述

Best'

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
echarts实现自定义折线图横坐标图片

一、我们可以参考一下echarts官网的实列二、直接粘贴一下完整的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .div{ background-color: white; width: 100
复制链接

扫一扫