之前一直想着如何在网页上面显示折线图,知道java有AWT和Swing,但是总觉的用哪种方法比较麻烦,而且我也没有自信自己已有的java只是,能够做到。但是最近做的项目必须得在网页上显示折线图,所以就不得不逼得我往前走。之前或许还有不做的余地,但是最近不信了。
所以就直接在网页上搜索,发现有个Echarts,然后查看了Echarts的主页,找了些例子,在自己的代码里面写,发现出现了很多问题。之后不断的搜索解决的方法,最后终于在页面上出现了图。
关于下面导入的两个文件,我已经共享在我的百度网盘中:http://pan.baidu.com/s/1qYSJad2 大家可以去下载。
说明一下:script用的是src
<script src="<%=contextpath%>/admin/js/echarts2/echarts.js"></script> <script src="<%=contextpath%>/admin/js/echarts2/echarts-all.js"></script>
<script type="text/javascript"> // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '未来一周气温变化', }, tooltip: { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name:'最高气温', type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { name:'最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0], markPoint: { data: [ {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5} ] }, markLine: { data: [ {type: 'average', name: '平均值'}, [{ symbol: 'none', x: '90%', yAxis: 'max' }, { symbol: 'circle', label: { normal: { position: 'start', formatter: '最大值' } }, type: 'max', name: '最高点' }] ] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); </script>效果图:
如果想要修改折线图的内容,只需要修改option的内容即可