springboot—结合echart绘制折线图(带最大值/最小值气泡显示,修改折线颜色)

1. 引入echart.js 和echar.min.js

springboot—结合echart绘制折线图(带最大值/最小值气泡显示,修改折线颜色)_第1张图片

    
    

2. html页面添加

 

3. Controller从数据库获取数据,返回json数据

    @ResponseBody
    @RequestMapping(value = "/echartWeight")
    public List getEchartWeight() {
        System.out.println("echartWeight");
        List list = checkService.getMyChek("006524");
        return list;
    }

4.html编写ajax


5. 运行效果:

springboot—结合echart绘制折线图(带最大值/最小值气泡显示,修改折线颜色)_第2张图片

6. 注意事项

(1)legend中数据要和series中name的值保持一致,否则legend不显示

springboot—结合echart绘制折线图(带最大值/最小值气泡显示,修改折线颜色)_第3张图片

(2)最大值/最小值气泡显示

 markPoint : {
                                  data : [
                                   {type : 'max', name: '最大值'},
                                   {type : 'min', name: '最小值'}
                                    ]
                             },

(3)修改折线颜色

   color:['#3399FF'],  //折线条的颜色

 

你可能感兴趣的:(springboot,mybatis,bootstrap,echart)