Echart入门学习：简单柱状图

最新推荐文章于 2025-05-19 11:17:04 发布

原创最新推荐文章于 2025-05-19 11:17:04 发布 · 498 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Echart #柱状图

Echarts 专栏收录该内容

0 篇文章

订阅专栏

本文是Echart入门教程，通过实例讲解如何创建一个简单的柱状图。内容包括柱状图的绘制步骤，只需直接赋值并引入echarts.js即可在浏览器中运行。

Echart入门学习：简单柱状图

本文通过一个简单的例子学习柱状图。

直接赋值粘贴，就可在浏览器中运行。当然，你得自己引入echarts.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echart入门学习：简单柱状图</title>
</head>
<body>
<!--创建一个具备长宽的div-->
    <div id="main" style="width: 600px;height:400px;"></div>
<!--这是解释说明-->
    <p>这是一个柱状图，通过这张图，我们可以了解到，如果要生成一张图表需要三步：</p>
    <p>第一步：通过js获取到dom元素，然后 echarts.init初始化myChart</p>
    <p>第二步：声明一个option变量。这个变量是一个对象，包含了图表所需的属性，这些属性都以对象的形式存在。</p>
    <ul>
        <li>title图表标题，title.text是标题的内容。</li>
        <li>tooltip提示</li>
        <li>legend图例说明，legend.data是说明内容</li>
        <li>xAxis为x轴坐标，xAxis.data是x轴坐标参数</li>
        <li>yAxis为y轴坐标</li>
        <li>series图表中的数据,是列表,series.name图表展示的数据名称，series.type图表类型，series.data是列表，图表展示的数据</li>
    </ul>
    <p>第三步：myChart.setOption(option)显示图表</p>
<script src="echarts.js"></script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        // 表的标题
        title: {
            text: 'ECharts 入门示例'
        },
        // 提示
        tooltip: {},
        // 图例，说明，解释
        legend: {
            data:['销量']
        },
        //x轴坐标参数
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        // y轴
        yAxis: {},
        // 图表中的一系列数据
        series: [{
            name: '销量',
            // bar柱状图
            type: 'bar',
            // 数值
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>