利用Echarts插件生成柱状折线图饼图等

相信很多时候我们都会遇到将后台数据汇总前台是需要将数据生成图表形式来让我们更加直观的观看分析数据，对于刚刚接触的人来说，可能会感到头疼，基于此，依据我自己对其的一个简单的学习，给大家分享下自己所做的步骤。

1. 首先需要在前台html页面引用相应的图表插件echarts插件，如下所示：

<script type="text/javascript" src="echart.min.js"></script>

具体所需插件可在Echarts在线构建可进行自己选择所需要生成图表的js插件。

2. 再在该html页面写入指定id的div，为 ECharts 准备一个具备大小（宽高）的 DOM如下所示：

<div id="main" style="width: 600px;height:400px;"></div>

3. 然后在中在其里面对基于准备好的dom，初始化echarts实例。

  var myChart = echarts.init(document.getElementById('main'));

4. 再配置相应图表信息，注意此处为生成图表的关键代码，相应的图表信息格式都可在此处进行调整，此处我以柱状图为例进行展示。

option = {
    title : {
        text: '蒸发量和降水量图表',       
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6],
           
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7],
           
        }
    ]
};

此处的option为柱状图生成关键之处，对于大家想生成什么样式的图表（柱状折线或饼图或其他）可在Echarts图表样式进行自己所需生成图表的option。

5. 最后使用刚指定的配置项和数据显示图表，执行如下代码：

myChart.setOption(option, true);

由此在script中编写代码完成。

6. 在浏览器展示图表如下图所示：
   
7. 以上就是图表生成的主要步骤，对于我来说，只要能帮助到一人，我觉得自己所写就是有价值的。当然，要有有误的地方还需大家及时将正确的告诉我以便我们共同进步哈。