百度开源图表Echart-⽜⼑⼩试
百度开源图表Echart-⽜⼑⼩试
echart
百度开源
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⽉"); 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"));echartS  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"));echartS  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"));echartS  echartSeries3.setData(echartSeries3Data);
echartSeriesList.add(echartSeries3);
mixLineBarEchart.setLegend(echartLegend);
mixLineBarEchart.setxAxis(xAxis);
mixLineBarEchart.setSeries(echartSeriesList);
JSONString(mixLineBarEchart);
}
4.页⾯调⽤实现数据图表展⽰
<script src="../../../dist/js/echarts.js" ></script>
<script type="text/javascript">
//基于准备好的dom，初始化echarts实例
var myChart=echarts.ElementById('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: pe,
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'setoption
}
}
],
series: obj.series
};
/
/使⽤刚指定的配置项和数据显⽰图表
myChart.setOption(option);
}
function search1(){
$.ajax({
type:"post",
url:"localhost:8080/user/getData.do",
dataType: "json",
success:function(data) {
initChart1(data);
}
});
}
$(function () {
search1();
});
</script>
5.最终效果-项⽬的编码有冲突，没到解决办法,⼤神可留⾔相助,pom⽂件已经指定utf-8编码,idea也是utf-8

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。