[echarts] echarts markLine使用

最新推荐文章于 2024-06-28 16:41:08 发布

优秀的cc

最新推荐文章于 2024-06-28 16:41:08 发布

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_43863505/article/details/125755951

版权

ECharts 动态图表线性图数据可视化 JavaScript

关键词由CSDN通过智能技术生成

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var xAxisData = [];
        var lineData = [];
        for (let i = 0; i < 1000; i++) {
            xAxisData[i] = String(i);
            lineData[i] = 60
        }   

        /** 设值data数据 */
        function setValue(start, end, val) {
            for (let i = start; i < end; i++) {
                lineData[i] = val
            }
        }

        setValue(200, 210, 59);
        setValue(210, 260, 58);

        setValue(400, 420, 40);
        setValue(420, 430, 59);
        lineData[560] = 0;
        lineData[580] = 50;
        setValue(590, 999, 49);

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            backgroundColor: 'rgb(255,255,255)',
            grid: {
                left: '8%',
                top: 30,
                right: '5%',
                bottom: 30,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    interval: 99
                },
                data: xAxisData,
            },
            yAxis: {
                type: 'value',
                name: '发电期望/W',
                nameLocation: 'center',
                nameGap: 50,
                nameTextStyle: {
                    color: '#000',
                    fontSize: 12
                }
            },
            series: [
                {
                    symbol: 'none',
                    data: lineData,
                    type: 'line',
                    smooth: true,
                    markLine: {
                        silent: true,
                        symbol: 'arrow',
                        data: [
                            {
                                silent: false,
                                xAxis: 600,  // 表现自定义的位置，可赋值
                                label: {
                                    position: 'end', // 表现内容展示的位置
                                    formatter: '当前值',  // 标线展示的内容
                                    color: '#8C8C8C'  // 展示内容颜色
                                },
                                // lineStyle: { type: 'solid', color: '#C1E7FF', width: 3 } // 样式： 线型、颜色、线宽
                            },
                            [
                                {
                                    name: '历史值',
                                    label: {
                                        position: 'middle', // 表现内容展示的位置
                                        // formatter: '当前值',  // 标线展示的内容
                                        color: '#8C8C8C'  // 展示内容颜色
                                    },
                                    symbol: 'arrow',
                                    coord: [0, 30]
                                },
                                {
                                    symbol: 'arrow',
                                    coord: [600, 30]
                                }
                            ],
                            [
                                {
                                    name: '预测值',
                                    label: {
                                        position: 'middle', // 表现内容展示的位置
                                        // formatter: '当前值',  // 标线展示的内容
                                        color: '#8C8C8C'  // 展示内容颜色
                                    },
                                    symbol: 'arrow',
                                    coord: [600, 30]
                                },
                                {
                                    symbol: 'arrow',
                                    coord: [999, 30],
                                }
                            ],
                        ]
                    }
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
    </script>
</body>

</html>