Echart 柱形图 markLine

四喜花露水

已于 2024-09-05 14:22:16 修改

阅读量187

点赞数 3

分类专栏： Echart 文章标签： echarts javascript 学习

于 2024-09-05 14:13:07 首次发布

本文链接：https://blog.csdn.net/gaowxx/article/details/141929599

版权

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: 400px;
            margin: 24px auto;
        }
    </style>
</head>

<body>
    <div class="chart-item" id="chart"></div>
    <script>
        var myChartArr = [];
        function drawChart(id, data) {
            var myEchart = echarts.init(document.getElementById(id));
            var option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(0,0,0,0.66)",
                    borderColor: 'rgba(0,0,0,0)',
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: false,
                        },
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: "6%",
                    right: "3%",
                    bottom: "3%",
                    top: "15%",
                    containLabel: true,
                },
                xAxis: [{
                    type: "category",
                    gridIndex: 0,
                    data: data.xData,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#e0edf2",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        show: false,
                        color: "#909db0",
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                    axisPointer: {
                        type: 'shadow',
                    }
                },],
                yAxis: [{
                    type: "value",
                    splitNumber: 5,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#e0edf2",
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#909db0",
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                }],
                series: [
                    {
                        name: "item1",
                        type: "bar",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [20, 20, 20, 20],
                                color: '#66be8f'
                            },
                        },
                        barWidth: 14,
                        data: data.data,
                        markLine: {
                            symbol: ['none', 'none'], // none为标线两端的样式为无，可更改
                            data: [
                                {
                                    silent: false,
                                    yAxis: data.rate,  // 警戒线位置，这个赋值为纵轴50
                                    label: {
                                        position: 'end', // 文字位置
                                        formatter: '',  //文字
                                        color: 'green'  // 文字颜色
                                    },
                                    lineStyle: { type: 'dashed', color: '#ff8372', width: 2 } // 样式： 线型、颜色、线宽
                                }
                            ]
                        }

                    },
                ],
            };
            myEchart.setOption(option)
            myChartArr.push(myEchart)
        }
        drawChart('chart', { xData: [0, 1, 2, 3, 4], data: [18, 67, 18, 67, 54], rate: 50 })

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

</html>