echarts柱状图-异步加载数据

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34357835/article/details/79049742

echarts异步加载数据形成柱状图效果如下:


代码:先引入echarts.js文件


在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。


然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

猜你喜欢

转载自blog.csdn.net/qq_34357835/article/details/79049742