百度開源圖表Ecahrt-牛刀小試
阿新 • • 發佈:2018-07-20
最終 clear rtx dem 找到 ons image label store
# 百度開源圖表Ecahrt-牛刀小試 #
- 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
百度開源圖表Ecahrt-牛刀小試