百度echarts柱状图

1，共享开发包下载地址 http://pan.baidu.com/s/1bnCt14V

官网网址 http://echarts.baidu.com/doc/example.html

2，脚本引入

 <script src="~/Scripts/lib/echarts/echarts-all.js"></script>
<script src="~/Scripts/lib/echarts/theme/default.js">

3，js脚本

<script type="text/javascripts">

$(function()

var myChart = echarts.init($(h).find("#chart")[0], theme);//theme是加载主题，可以自定义，可以省略
                myChart.showLoading({ text: "加载中……" });
                $.post("/Controlsl/GetStoryEcharData")", { storyId: storyId }, function (data) {
                    if (data.error) {

alert('数据加载失败！');

                    } else {
                        myChart.setOption(getOption(data));
                    }
                    myChart.hideLoading();

                });

});

function getOption(data) {
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: "{b}<br/>{a}:{c} 天"
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: data.part1, //后台返回的数据类型 : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    number: '20'
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    //axisLabel: {
                    //    show: true,
                    //    interval: 'auto',
                    //    formatter: '{value} 天',                       
                    //}
                    
                }
            ],
            series: [
                {
                    name: '状态迁移时间',
                    type: 'bar',
                    data: data.part2,
                    barWidth: 40,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#800080'
                                },
                                formatter: "{c} 天"
                            }
                        }
                    }
                }
            ]
        };


        return option;
    };

4，html

<div id='chart' style='height:400px;'></div>

5，后台代码示例

public ActionResult GetStoryEcharData(Guid storyId)
{

return Json(new {
                    part1 = myDictionary.Keys.ToList(),
                    part2 = myDictionary.Values.ToList()
                });

}