echart——入门demo

最新推荐文章于 2026-07-16 17:06:30 发布

原创最新推荐文章于 2026-07-16 17:06:30 发布 · 1w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

echart

当前文章被收录于：

echart

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍如何使用ECharts库创建一个简单的柱状图。从引入ECharts文件开始，逐步讲解DOM元素准备、图表初始化及数据加载过程。适用于初学者快速上手。

引入echarts文件下载地址 https://download.csdn.net/download/sunshine0508/11171026

<script src="echarts.js" type="text/javascript" ></script>

准备一个dom

<div id="main" style="width:400px;height:400px;"></div>

通过echart.js 初始化一个echarts 的实例，并通过setOption方法生成简单的柱状图

<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['销量']
        },
        xAxis : [
            {
                type : 'category',
                data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"销量",
                "type":"bar",
                "data":[5, 20, 40, 10, 10, 20]
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
</script>