echars 图表展示

第一：官网下载echars相关版本的jar

第二：在页面引用echars.js        配置       

<script type="text/javascript" src="${contextPath }/echart/echarts.js"></script>
<script type="text/javascript">
            var contextPath = "${contextPath}";
</style>

                           function defChart(){
				          title=['无'];
				          var t="价格";
				          var text='价格走势图';
				       
				           require(
				            [
				                'echarts',
				                'echarts/chart/line', <span style="color:#ff0000;">// 使用折线就加载line模块，按需加载</span>
				                'echarts/chart/bar'
				            ],
				            function (ec) {
				               <span style="color:#ff0000;"> // 基于准备好的dom，初始化echarts图表</span>

<span style="color:#ff0000;">                                                //图表显示的层是id，所以如果显示多个图表，可以根据条件分别获取id</span>
				                var myChart = ec.init(document.getElementById("zst"));
				                var option = {
				                    title : {
								        text: text
// 								        subtext: '纯属虚构' <span style="color:#ff0000;"> //副标题
</span>								    },
				                    tooltip: {
				                        show: true,
				                        trigger: 'item',
				                        formatter: "{a}<br/> 时间:{b}</br> 价格:{c} ￥"
				                    },
				                    legend: {
				                        data:[t+'价格']    <span style="color:#ff0000;">//纵坐标单位</span>
				                    },
				                    toolbox: {
								        show : true,
								        feature : {
								            mark : {show: false},
								            dataView : {show: true, readOnly: false},
								            magicType : {show: true, type: ['line', 'bar']},
								            restore : {show: true},
								            saveAsImage : {show: true}
								        }
								    },
								    calculable : true,
				                    xAxis : [
				                        {
				                            type : 'category',
				                            boundaryGap : true,
				                            nameLocation:'end',
				                            name:'日期(年/月/日)',
				                            data : time       <span style="color:#ff0000;">//横轴显示的数组</span>
				                        }
				                    ],
				                    yAxis : [
				                        {
				                            type : 'value',
				                             axisLabel : {
								                formatter: '{value} ￥'
								            }
				                        }
				                    ],
				                    series : [
									        {
									            name:t+'价格',
									            type:'line',
									            data:num   <span style="color:#ff0000;">//纵轴现实的数据数组</span>
									        }
									    ]
				                };
				                // 为echarts对象加载数据 
				                myChart.setOption(option); 
				            }
				        );
				 }

到这里基本的配置就结束了，接下来根据你的需求，调用方法，并且拿到横坐标和纵坐标的数据、赋值。