echart 动态加载json数据

Echarts怎么获取json数据

2017年12月14日 17:58:34 lily2016n 阅读数：3625 标签： jsonecharts 更多

个人分类： Echarts

 

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

json代码如下 
命名为city.json

{
    "list":[
        {
            "department":"杭州",
            "num":480
        },
        {
            "department":"上海",
            "num":380
        },
        {
            "department":"北京",
            "num":366
        },
{
            "department":"河南",
            "num":320
        },
{
            "department":"厦门",
            "num":300
        }

    ]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

js代码

function tai(){
    var myChart = echarts.init(document.getElementById('chart'));    
    option = {
        title: {
            text: 'xxxx',
            x: '40', 
            textStyle:{
                color:'#4ba493',
                fontSize: 18,
                fontWeight: 'bold',
                align: 'center',            
            }
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },//鼠标悬浮的效果
        grid:{
            top:40,
            x:50,
            y:45,
            bottom:40,
            borderWidth:4
              },//容器的距离
        xAxis: {
            type : 'value',
            position: 'top',
            show: false, 
        },
        yAxis: {
            type : 'category',
             axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
//          axisLabel : { 
//                  formatter : '{b}%' 
//              }, 
//            
//          data : [ '杭州', '北京', '上海', '厦门', '成都']
            data : []
        },
        series: [
            {
                name: '实时在线台数',
                type: 'bar',
                itemStyle: {
                     emphasis: {
                        barBorderRadius: 5
                   },//设置圆角
            normal: {
//                  color: function(params) {
//                      // build a color map as your need.
//                      var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'];
//                              return colorList[params.dataIndex]
//                  },//设置柱状图的颜色

                   barBorderRadius: 5,//圆角
                   color: new echarts.graphic.LinearGradient(
                            0, 0, 1, 0,
                            [
                                {offset: 0, color: '#65d0de'},
                                {offset: 1, color: '#abd5da'}

                            ]
                        ),//设置柱状图渐变
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}',　　　　//这是关键，在需要的地方加上就行了  
                        color: '#fff',  
                        }
                     }
                },
//              data: [120,210,100,40,120],
                data: [],
            }]
        };
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var namey = [];    //类别数组（实际用来盛放X轴坐标值）
            var numo = [];    //销量数组（实际用来盛放Y坐标值）
            console.log(namey)
            console.log(numo)
            $.ajax({
                type: 'get',
                url: 'json/city.json',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        namey.push(item.department);    //挨个取出类别并填入类别数组                    
                        numo.push(item.num);    //挨个取出销量并填入销量数组
                    });


                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        yAxis: {
                            data: namey
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            data: numo
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });