Echarts柱状图Demo

从外部文件读入数组,做柱状图
数据文件内容如下:

[{
    "categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    "data": [5, 20, 36, 10, 10, 20]
}]

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入js,本程序中,本文件和js在同一目录下 -->
     <script src="echarts.min.js"></script>
    <script type="text/javascript" src = "jquery.js"></script>
</head>
<body>
    <div id = "main" style="width:600px;height: 400px;"></div>


    <script type="text/javascript">
    //$(document).ready(function(){
        var myChart = echarts.init(document.getElementById('main'));
        //异步加载数据
        myChart.showLoading();
        // 读取外部文件
        $.getJSON('data/data.json').done(function (data) {
            
            var  option = {
                title:{text:'异步数据加载'},
                tooltip:{},
                toolbox: {
                    show : true,
                    feature : {
                        magicType: {show: true, type: ['force', 'chord']},
                        saveAsImage : {show: true}
                    }
                 },
                legend:{data:['销量']},
                xAxis:{
                    data: data[0].categories
                },
                yAxis:{
                    type : 'value'
                },
                // 根据名字对应到相应的系列
                series:[{
                    name:'销量',
                    type:'bar',//图形类型,bar是柱状图
                    data: data[0].data
                }]
            };   
            // 为echarts对象加载数据
            myChart.setOption(option)
        
        });
    myChart.hideLoading();
    </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容