标签：doc ide 图表 obj post save abs Matter fun
官网链接: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
标签：doc ide 图表 obj post save abs Matter fun
原文地址：https://www.cnblogs.com/heiqiubaihu/p/9342562.html
