百度开源图表Ecahrt-牛刀小试

Posted 2020-12-05 heiqiubaihu

# 百度开源图表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