echarts画河道断面图

最新推荐文章于 2025-09-22 00:00:00 发布

原创

最新推荐文章于 2025-09-22 00:00:00 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue-cli3

本文将详细介绍如何利用Echarts库在Vue.js项目中创建一幅详细的河道断面图。通过vue-cli3搭建的项目环境中，结合Echarts提供的图表API，实现动态展示河道地形数据，包括设置坐标轴、添加系列、调整图表样式等关键步骤。

let xAxisData = ["1", "2", "3", "4", "5", "6", "7", "8"];
let yAxisData1 = [333, 333, 150, 113, 120, 100, 110, 333];
let yAxisData2 = [233, 233, 233, 233, 233, 233, 233, 233];

option = {
    "backgroundColor": "#fff",
    "tooltip": {
        "trigger": "axis"
    },
    "legend": {
        "data": ["1",'2'],
        "top": "10%"
    },
    "toolbox": {
        "show": false,
        "feature": {
            "dataZoom": {}
        }
    },
    "grid": {
        "top": "30%",
        "left": "0%",
        "right": "0%",
        "bottom": "9%"
    },
    "xAxis": {
        "show": false,
        "type": "category",
        "boundaryGap": false,
        "axisLabel": {
            "color": "rgba(0,0,0,0.8)",
            "fontSize": 30
        },
        "data": xAxisData
    },
    "yAxis": {
        "show": false,
        "type": "value",
        "axisLabel": {
            "formatter": "{value} °C",
            "color": "rgba(0,0,0,0.8)",
            "fontSize": 30
        }