- echart
- 百度开源
官网链接:http://echarts.baidu.com/
1.在demo区选一张图表测试-折柱混合型图表
2.创建pojo-setget方法省略
public class MixLineBarEchart { private EchartLegend legend;//显示项目 private EchartXAxis xAxis;//横坐标 private List<EchartSeries> series;//内容 } public class EchartLegend { private List<String> data; } public class EchartXAxis { private String type;//category private List<String> data;// } public class EchartSeries { private String name; private String type;//bar-柱,line-折线 private List<BigDecimal> data; private int yAxisIndex = 0;//0默认纵坐标左边,1右边纵坐标 }3.业务注入数据
@RequestMapping("getData") @ResponseBody public String getData(){ MixLineBarEchart mixLineBarEchart = new MixLineBarEchart(); EchartLegend echartLegend = new EchartLegend(); EchartXAxis xAxis = new EchartXAxis(); List<EchartSeries> echartSeriesList = new ArrayList<EchartSeries>(); List<String> legendData = new ArrayList<>(); legendData.add("蒸发量");legendData.add("降水量是么");legendData.add("平均温度"); echartLegend.setData(legendData); List<String> xAxisData = new ArrayList<>(); xAxisData.add("1月");xAxisData.add("2月");xAxisData.add("3月");xAxisData.add("4月");xAxisData.add("5月");xAxisData.add("6月");xAxisData.add("7月");xAxisData.add("8月");xAxisData.add("9月");xAxisData.add("10月");xAxisData.add("11月");xAxisData.add("12月"); xAxis.setType("category"); xAxis.setData(xAxisData); EchartSeries echartSeries1 = new EchartSeries(); echartSeries1.setName("蒸发量"); echartSeries1.setType("bar"); echartSeries1.setyAxisIndex(0); List<BigDecimal> echartSeries1Data = new ArrayList<>(); echartSeries1Data.add(new BigDecimal("2.0"));echartSeries1Data.add(new BigDecimal("3.0"));echartSeries1Data.add(new BigDecimal("4.0"));echartSeries1Data.add(new BigDecimal("5.0"));echartSeries1Data.add(new BigDecimal("6.0"));echartSeries1Data.add(new BigDecimal("7.0"));echartSeries1Data.add(new BigDecimal("8.0"));echartSeries1Data.add(new BigDecimal("9.0"));echartSeries1Data.add(new BigDecimal("8.0"));echartSeries1Data.add(new BigDecimal("7.0"));echartSeries1Data.add(new BigDecimal("6.0"));echartSeries1Data.add(new BigDecimal("5.0")); echartSeries1.setData(echartSeries1Data); echartSeriesList.add(echartSeries1); EchartSeries echartSeries2 = new EchartSeries(); echartSeries2.setName("降水量是么"); echartSeries2.setType("bar"); echartSeries2.setyAxisIndex(0); List<BigDecimal> echartSeries2Data = new ArrayList<>(); echartSeries2Data.add(new BigDecimal("9.0"));echartSeries2Data.add(new BigDecimal("8.0"));echartSeries2Data.add(new BigDecimal("7.0"));echartSeries2Data.add(new BigDecimal("6.0"));echartSeries2Data.add(new BigDecimal("5.0"));echartSeries2Data.add(new BigDecimal("4.0"));echartSeries2Data.add(new BigDecimal("5.0"));echartSeries2Data.add(new BigDecimal("6.0"));echartSeries2Data.add(new BigDecimal("7.0"));echartSeries2Data.add(new BigDecimal("8.0"));echartSeries2Data.add(new BigDecimal("9.0"));echartSeries2Data.add(new BigDecimal("10.0")); echartSeries2.setData(echartSeries2Data); echartSeriesList.add(echartSeries2); EchartSeries echartSeries3 = new EchartSeries(); echartSeries3.setName("平均温度"); echartSeries3.setType("line"); echartSeries3.setyAxisIndex(1); List<BigDecimal> echartSeries3Data = new ArrayList<>(); echartSeries3Data.add(new BigDecimal("9.0"));echartSeries3Data.add(new BigDecimal("5.0"));echartSeries3Data.add(new BigDecimal("6.0"));echartSeries3Data.add(new BigDecimal("10.0"));echartSeries3Data.add(new BigDecimal("7.0"));echartSeries3Data.add(new BigDecimal("2.0"));echartSeries3Data.add(new BigDecimal("5.0"));echartSeries3Data.add(new BigDecimal("8.0"));echartSeries3Data.add(new BigDecimal("11.0"));echartSeries3Data.add(new BigDecimal("4.0"));echartSeries3Data.add(new BigDecimal("7.0"));echartSeries3Data.add(new BigDecimal("5.0")); echartSeries3.setData(echartSeries3Data); echartSeriesList.add(echartSeries3); mixLineBarEchart.setLegend(echartLegend); mixLineBarEchart.setxAxis(xAxis); mixLineBarEchart.setSeries(echartSeriesList); return JSON.toJSONString(mixLineBarEchart); }4.页面调用实现数据图表展示
<script src="../../../dist/js/echarts.js" ></script> <script type="text/javascript"> //基于准备好的dom，初始化echarts实例 var myChart=echarts.init(document.getElementById(‘main‘));//图表位置 function initChart1(obj){ myChart.clear(); alert(obj.legend.data); option = { tooltip: { trigger: ‘axis‘, axisPointer: { type: ‘cross‘, crossStyle: { color: ‘#999‘ } } }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: [‘line‘, ‘bar‘]}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:obj.legend.data }, xAxis: [ { type: obj.xAxis.type, data: obj.xAxis.data, axisPointer: { type: ‘shadow‘ } } ], yAxis: [ { type: ‘value‘, name: ‘水量‘, min: 0, max: 12, interval: 1, axisLabel: { formatter: ‘{value} ml‘ } }, { type: ‘value‘, name: ‘温度‘, min: 0, max: 12, interval: 1, axisLabel: { formatter: ‘{value} °C‘ } } ], series: obj.series }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); } function search1(){ $.ajax({ type:"post", url:"http://localhost:8080/user/getData.do", dataType: "json", success:function(data) { initChart1(data); } }); } $(function () { search1(); }); </script>5.最终效果-项目的编码有冲突,没找到解决办法,大神可留言相助,pom文件已经指定utf-8编码,idea也是utf-8
原文：https://www.cnblogs.com/heiqiubaihu/p/9342562.html