百度開源圖表Echart-牛刀小試

---

• 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