百度Echarts图表简单使用

项目中需要用到图表这个功能，网上搜了半天，后台数据获取了但是效果就是出不来，弄了很久终于出来了，特来分享下

当然，看效果 

首先导入js文件

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Content/echarts.js"></script>

其次，创建一个容器，必须制定宽度高度

<div align="center">
    <div id="main" style="width: 1000px;height:700px"></div>
</div>

下面是script代码

var myChart = echarts.init(document.getElementById('main'));//渲染组件
    myChart.showLoading({//加载动画
        text:'正在加载数据。。。。'
    });

  var names = [];    //类别数组（实际用来盛放X轴坐标值）
    var nums = [];    //销量数组（实际用来盛放Y坐标值）

   //加载数据
    jQuery.ajax({
        url:"@Url.Action("GetEchart", "Charts")",
        type: 'get',
        datatype:'json',
        async: true,
        success: function (jsons) {
        
            if (jsons) {
                myChart.hideLoading();//隐藏动画
                $.each(jsons, function (i, value) {
               
                    //alert(jsons[index].price);
                    names[i] = value['pname'];
                    nums[i] =  value['price'] ;
                
                    var option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data: ['销量']
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: names
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                'name': '销量',
                                'type': 'bar',
                                'data': nums
                            }
                        ]
                    };
                
                   myChart.setOption(option)//绑定数据
                });
            }
           


     
        },
        error:function(){
            alert("数据加载失败！请检查数据链接是否正确");
        }
    });
    // 初次加载图表(无数据)
    myChart.setOption(option);

这样就完成了 ，后台的话只需要返回json数据就可以了