首页 > 代码库 > echarts -01 入门

echarts -01 入门

2024-08-22 16:34:17   227人阅读

1.效果图

技术分享

2. code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">

        require.config({ //  // 路径配置
            paths: {
                echarts: ‘http://echarts.baidu.com/build/dist‘
            }
        });
        require(
                [
                    ‘echarts‘,
                    ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) { // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById(‘main‘));
                    var option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data:[‘销量‘]  // 销量是黄颜色柱条， 不同的字显示不同的颜色！！！
                        },
                        xAxis : [ //x轴的 标记
                            {
                                type : ‘category‘,
                                data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                            }
                        ],
                        yAxis : [
                            {
                                type : ‘value‘ // y轴的数值是根据series数组中的data数组的最大值来定的
                            }
                        ],
                        series : [
                            {
                                "name":"销量",
                                "type":"bar",
                                "data":[5, 20, 60, 10, 10, 20]
                            }
                        ]
                    };

                    myChart.setOption(option);  // 为echarts对象加载数据
                }
        );
    </script>
</head>
<body>
    <div id="main" style="height: 400px"></div>
</body>
</html>

 

echarts -01 入门


联系
我们