one

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <style>
        #demo {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="demo"></div> <!-- //先给个id -->

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
                //定义一个方法
                drawchart(id) {
                    axios.get(url, {
                        params: {
                            key1: value1
                        }
                    })
                        .then(res => {    //获取到数据赋值给demoOption
                            console.log(res);
                            var datas1 = ['200', '400', '600', '800', '500', '600', '550']

                            // var datas1=[]
                            // for (let i = 0; i < res.data.list.length; i++) {
                            //     datas1.push(res.data.list[i])
                            // }

                            this.charts = echarts.init(document.getElementById(id))

                            var demoOption = {
                               xAxis: {
					                type: 'category',
					                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					            },
					            yAxis: {
					                type: 'value'
					            },
					            series: [{
					                data: datas1,
					                type: 'line'
					            }]
                            };
                            this.charts.setOption(demoOption);
                        })
                }
            },
            mounted() {
                this.$nextTick(function () {
                    this.drawchart('demo')
                })
            },
        })
    </script>
</body>

two

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <style>
        #demo {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="demo"></div> <!-- //先给个id -->

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
                //定义一个方法
                drawchart(id) {
                    this.charts = echarts.init(document.getElementById(id))
                    this.charts.setOption({
                        xAxis: {
			                type: 'category',
			                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			            },
			            yAxis: {
			                type: 'value'
			            },
			            series: [{
			                data: datas1,
			                type: 'line'
			            }]
                    });




                    this.charts.setOption(demoOption);
                }
            },
            mounted() {
                this.$nextTick(function () {
                    var thiz = this;

                    axios.get(url, {
                        params: {
                            key1: value1
                        }
                    }).then(res => {
                        console.log(res);
                        var datas1 = ['200', '400', '600', '800', '500', '600', '550']

                        // var datas1=[]
                        // for (let i = 0; i < res.data.list.length; i++) {
                        //     datas1.push(res.data.list[i])
                        // }
                        this.drawchart('demo')
                    })
                })
            },
        })
    </script>
</body>

three

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <style>
        #demo {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="demo"></div> <!-- //先给个id -->

    </div>

    <script>
        var datas1 = [820, 932, 901, 934, 1290, 1330, 1320]
        var lineDom = document.getElementById("demo");
        var lineChart = echarts.init(lineDom);
        var demoOption = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: datas1,
                type: 'line'
            }]
        };
        if (demoOption && typeof demoOption === "object") {
            axios.get(url, {
                params: {
                    key1: value1
                }
            })
                .then(res => {
                    console.log(res);

                    // var datas1=[]
                    // for (let i = 0; i < res.data.list.length; i++) {
                    //     datas1.push(res.data.list[i])
                    // }
                    // demoOption.series[0].data = datas1
                    lineChart.setOption(demoOption, true);
                })
        }
    </script>
</body>
Logo

前往低代码交流专区

更多推荐