echarts 显示柱状图

1、引入

<script type="text/javascript" src="/Common/echarts/echarts.js?v=636474012741000281"></script>

2、添加容器

<div id="main" style="height:100%;width:100%"></div>	

3、读数据，显示图标

// 基于准备好的dom，初始化echarts图表
	        var myChart = echarts.init(document.getElementById('main'));

	        var option = {
	            title: {
	                text: '投资计划完成情况'
	            },
	            tooltip: {
	                show: true
	            },
	            toolbox: {
	                show: true,
	                feature: {
	                    mark: { show: true },
	                    //dataView: { show: true, readOnly: false },
	                    magicType: { show: true, type: ['line', 'bar'] },
	                    //restore: { show: true },
	                    saveAsImage: { show: true }
	                }
	            },
	            legend: {
	                data: ['计划', '实际']
	            },
	            xAxis: [
                        {
                            type: 'category',
                            data: []
                        }
                    ],
	            yAxis: [
                        {
                            type: 'value', name: '单位（亿）'
                        }
                    ],
	            series: [
                        {
                            "name": "计划",
                            "type": "bar",
                            "data": []
                        },
                         {
                             "name": "实际",
                             "type": "bar",
                             "data": []
                         }
                    ]
	        };
	        // 为echarts对象加载数据 
	        myChart.setOption(option);
	        myChart.showLoading();
	        //加载数据
	        var x = [];    //投资公司
	        var y1 = [];    //计划
	        var y2 = [];    //实际

	        $G.dispatcher({
	            action: "GetTZJHWCQK",
	            showMask: false,
	            //args: [changeSum[0]],
	            success: function (data) {

	                for (var i = 0; i < data.length; i++) {
	                    x.push(data[i].DWMC);    //单位
	                    y1.push(data[i].JHMB);    //计划
	                    y2.push(data[i].SJWC);    //实际
	                }

	                myChart.hideLoading();    //隐藏加载动画

	                myChart.setOption({        //加载数据图表
	                    xAxis: {
	                        data: x
	                    },
	                    series: [{
	                        name: '计划',
	                        data: y1
	                    },
                        {
                            name: '实际',
                            data: y2
                        }
                        ]
	                });

	            }
	        });