# 百度開源圖表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-牛刀小試