html简单echarts入门示例

Wynl590

已于 2023-11-30 19:35:28 修改

阅读量718

点赞数 13

文章标签： echarts javascript 前端 html

于 2023-11-30 19:33:41 首次发布

本文链接：https://blog.csdn.net/weixin_64559691/article/details/134719794

版权

以下为简单web项目结构：

以下是简单的html+echarts模版：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入echarts.js-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!-- style内容进行了flex布局,可根据需要自行修改 -->
    <div style="display: flex;justify-content:space-around;">
        <div id="main" style="width: 1000px;height:600px;"></div>
    </div>
    <script>
        //初始化Echarts图表
        var myChart = echarts.init(document.getElementById('main'));
        //以下添加图表
        var option = {
            //图表代码
        };

        //实例化的Echarts图表，在DOM中渲染图表显示
        myChart.setOption(option);
    </script>

</body>

</html>

在echarts官网下选择示例：Examples - Apache ECharts

我选择了简单折线图作为示例

将示例代码option拷贝至html模版：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入echarts.js-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!-- style内容进行了flex布局,可根据需要自行修改 -->
    <div style="display: flex;justify-content:space-around;">
        <div id="main" style="width: 1000px;height:600px;"></div>
    </div>
    <script>
        //初始化Echarts图表
        var myChart = echarts.init(document.getElementById('main'));
        //以下添加图表
        var option = {
            //图表代码
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };

        //实例化的Echarts图表，在DOM中渲染图表显示
        myChart.setOption(option);
    </script>

</body>

</html>

点开页面即可查看效果：