Echart 柱形图折线图自定义tooltip markLine

最新推荐文章于 2024-09-22 11:17:00 发布
四喜花露水
最新推荐文章于 2024-09-22 11:17:00 发布
阅读量227
点赞数 1
分类专栏： Echart 文章标签： javascript echarts 学习前端
本文链接：https://blog.csdn.net/gaowxx/article/details/142054085
版权
Echart 专栏收录该内容
7 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <style>
        .chart-item {
            width: 50%;
            height: 300px;
            margin: 48px auto;
        }
    </style>
</head>

<body>
    <div class="chart-item" id="chart"></div>
    <script>
        // 提取
        // 把会重复用到的部分提取出来，可以封装到另一个js文件中
        var commonTool = {
            opt: {
                axis: {
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: "#e0e0e0",
                            width: 1
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#e0e0e0",
                            width: 1
                        }
                    },
                    axisLabel: function (opt) {
                        var defaulte = {
                            textStyle: {
                                color: "#666",
                                fontSize: 12
                            },
                            fontFamily: "Microsoft YaHei",
                            margin: 15

                        };
                        var opt = $.extend("", defaulte, opt);
                        return opt;
                    },
                },
                tooltip: function (type) {
                    var opt = {
                        show: true,
                        trigger: "axis",
                        backgroundColor: "#fff",
                        textStyle: {
                            color: "#333",
                            fontSize: 12
                        },
                        padding: [0, 8, 8, 8],
                        extraCssText: 'box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);',

                        // 自定义tooltip关键部分
                        formatter: function (params) {
                            var html = [];
                            html.push('<div');
                            html.push('<div style="margin :16px 0 0;">' + params[0].name + '</div>');
                            for (var i = 0; i < params.length; i++) {
                                html.push('<div style="margin :0 0 8px  0; min-width:120px" ><span style="display: inline-block;vertical-align: middle;margin-right: 8px; width: 6px;height: 6px;background: ' + params[i].color + ';border-radius: 50%;"></span><span style="display: inline-block; margin-right: 3px;color: #666;">' + params[i].seriesName + '</span>');
                                html.push('<span style="float: right;">' + params[i].value + '</span>');
                                html.push("</div>");
                            }
                            html.push("</div>");
                            return html.join("");
                        },
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: "shadow", // 默认为直线，可选为："line" | "shadow",
                            shadowStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(240, 243, 249,0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: ' rgba(240, 243, 249,0)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            },
                            z: 0
                        }
                    };

                    // 可以用switch方法通过type类型做自定义扩展
                    // switch (type) {
                    // ...
                    // }

                    return opt;
                }

            }
        }
        // 提取 END

        var myChartArr = [];
        function drawChart(id, data) {
            var myEchart = echarts.init(document.getElementById(id));
            var option = {
                tooltip: commonTool.opt.tooltip(),
                grid: {
                    left: "6%",
                    right: "3%",
                    bottom: "3%",
                    top: "15%",
                    containLabel: true,
                    z: 22,
                },
                xAxis: [{
                    type: "category",
                    data: data[0],
                    axisLabel: commonTool.opt.axis.axisLabel(),
                    axisLine: commonTool.opt.axis.axisLine,
                    axisTick: commonTool.opt.axis.axisTick,
                    z: 1
                }],
                yAxis: [{
                    type: "value",
                    name: "num",
                    nameTextStyle: {
                        color: '#666',
                        fontSize: 12,
                        padding: [0, 40, 3, 0]
                    },
                    axisLabel: commonTool.opt.axis.axisLabel(),
                    splitLine: commonTool.opt.axis.splitLine,
                    splitArea: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    z: 1
                }, {
                    type: "value",
                    name: "rate(%)",
                    nameTextStyle: {
                        color: '#666',
                        fontSize: 12,
                        padding: [0, 0, 3, 30]
                    },
                    position: "right",
                    axisLabel: commonTool.opt.axis.axisLabel(),
                    splitLine: {
                        show: false,
                    },
                    splitArea: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    }
                }],
                series: [{
                    name: "item1",
                    type: "bar",
                    barWidth: "20%",
                    data: data[1],
                    z: 1
                }, {
                    name: "item2",
                    type: "line",
                    yAxisIndex: 1,
                    data: data[2],
                    symbol: "circle",
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            borderColor: "#fff",
                            borderWidth: 1,

                        },
                        emphasis: {
                            borderColor: "#fff",
                            borderWidth: 3,
                        }
                    },
                    z: 1,
                    markLine: {
                        silent: true,
                        symbol: 'none',
                        data: [{
                            yAxis: 0,
                            symbol: 'none',
                            symbolSize: 0,
                            label: {
                                show: false
                            },
                            lineStyle: {
                                color: "#1890ff"
                            }
                        }]
                    }
                }]
            };
            myEchart.setOption(option)
            myChartArr.push(myEchart)
        }


        var dataX = [],
            dataY1 = [],
            dataY2 = []
        for (var i = 0; i < 20; i++) {
            dataX.push(i);
            dataY1.push(Math.ceil(Math.random() * 1000 % 100));
            dataY2.push(Math.ceil((Math.random() - 0.5) * 1000 % 100));
        }


        drawChart('chart', [dataX, dataY1, dataY2])

        $(window).resize(function () {
            for (var i = 0; i < myChartArr.length; i++) {
                myChartArr[i].resize();
            }
        })
    </script>
</body>

</html>