Echart入门学习：简单柱状图

谁借莪１个温暖的怀抱￠ 2022-01-28 06:51 288阅读 0赞

# Echart入门学习：简单柱状图 #

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Echart入门学习：简单柱状图</title>
    </head>
    <body>
    
        <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>