echarts -01 入门

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 入门

最新文章

热门文章
