echart的整合到html

最新推荐文章于 2024-08-24 09:46:19 发布

军大君

最新推荐文章于 2024-08-24 09:46:19 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： ajax vue js echart

本文链接：https://blog.csdn.net/weixin_42581660/article/details/115348802

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何将Echarts与Vue框架结合，展示了一个从后端获取数据并渲染折线图的例子。首先，从Echarts官网获取折线图代码并引入所需js文件。然后，创建Java后端接口返回包含时间、食物集合和食物名字的Map对象。最后，在Vue的mounted钩子中，使用axios获取数据并调用echarts的setOption方法绘制图表。

摘要由CSDN通过智能技术生成

1.首先我们来简单看一下html整合echart的流程

在这里插入图片描述

2.我们这里找一个echart官网https://echarts.apache.org/的折线图来延演示

在这里插入图片描述
复制他的代码到我们的html页面，这里需要引入echarts.js和vue.js和axios.js文件，如果你是用原生的ajax也可以不引入axios.js

在这里插入图片描述

3.我们可以看到他这个代码里面series和legend.data还有xAxis.data都是可以自定义的

这个时候我们就需要封装对象了
从前端我们可以分析前端需要的参数是有2个数组和一个list对象，数据比较复杂，
所以我们直接返回一个map对象，里面包含2个数组和一个list对象

@RestController
@RequestMapping("/t")
public class Test {
    @RequestMapping("tt")
    public Map<String,Object> findall() {
        List<Integer> one_list = new ArrayList();
        one_list.add(6);one_list.add(14);one_list.add(5);
        List<Integer> two_list = new ArrayList();
        two_list.add(7);two_list.add(1);two_list.add(18);
        Tou one = new Tou();
        one.setName("西瓜");
        one.setType("line");
        one.setData(one_list);

        Tou two = new Tou();
        two.setName("香蕉");
        two.setType("line");
        two.setData(two_list);

        List<Tou> list_Food = new ArrayList<>();
        list_Food.add(one);
        list_Food.add(two);

        Map<String,Object> map = new HashMap<>();

        List<String> time = new ArrayList<>();
        time.add("第一天");
        time.add("第二天");
        time.add("第三天");

        String[] foodName={one.getName(),two.getName()};
        map.put("shiJian",time);//时间
        map.put("Food",list_Food);//食物集合
        map.put("FoodName",foodName);//食物名字
        return map;
    }
}

对应的Tou.java是

@Data
public class Tou {
    String name;
    String type;
    List<Integer> data;
}

对应的html是

<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;width: 900px"></div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<!--<script src="../plugins/elementui/index.js"></script>-->
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        //钩子函数，VUE对象初始化完成后自动执行
        mounted() {
            this.findPage();
        },
        methods: {
            findPage(){
                let myChart1 = echarts.init(document.getElementById('chart1'));
                    myChart1.setOption(
                        {
                            title: {
                                text: '折线图堆叠'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: res.data.FoodName
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: res.data.shiJian
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: res.data.Food
                        });
                });
            }
        }
    })
</script>
</html>