echarts画河道断面图

光华♏

于 2021-01-18 14:25:49 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： echarts vue-cli3

本文链接：https://blog.youkuaiyun.com/fire_f_f/article/details/112779184

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
        }