Echarts异步加载json文件数据编写柱状图Bar

最新推荐文章于 2024-05-15 14:53:08 发布

菜鸟小晨

最新推荐文章于 2024-05-15 14:53:08 发布

阅读量1k

点赞数 1

文章标签： echarts

本文链接：https://blog.csdn.net/weixin_46496659/article/details/117375220

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_Data</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>


</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="main" style="width: 2400; height: 400px;"></div>

</body>
</html>
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//设置图标配置项
myChart.setOption({
    title:{
        text:'ECharts 异步加载数据'
    },
    tooltip:{},
    legend:{
        data:['指数']
    },
    xAxis:{
        data:[],
        axisLabel:{
            interval:0
                   }
    },


    yAxis:{},
    series:[{
            name:'指数',
            type:'bar',
            data:[]
        }]
});
//异步加载数据
$.get('data1.json').done(function (data) {
    myChart.setOption({
        xAxis:{
            data: data.result.name

        },
        yAxis: {},
        series:[{
                //根据名字对应到相应的系列
                name:"指数",
                type: 'bar',
                data: data.result.data_json
            }]
    });
});
</script>

Echarts一定区分大小写！！！
一定要避雷

菜鸟小晨

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Echarts异步加载json文件数据编写柱状图Bar

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test_Data</title> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <script src="https://cd
复制链接

扫一扫