码迷,mamicode.com
首页 > Web开发 > 详细

VueJs echarts使用

时间:2020-07-10 09:26:51      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:method   dsa   char   otc   属性   methods   ntb   lib   样式   

VueJs echarts使用

栗子

渲染echart一定是要在 mounted 生命周期中使用,created只是创建dom。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div>
        <div id="app">
            <!--为echarts准备一个具备大小的容器dom-->
            asdasdsa
            <div id="main" style="width: 600px;height: 400px;"></div>
        </div>

    </div>

    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>

    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        var app = new Vue({
            el: ‘#app‘,
            data: {
                echartData: { xAxis: { type: ‘category‘, data: [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘] }, yAxis: { type: ‘value‘ }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: ‘line‘ }] },


            },
            computed: {//计算属性
            },
            mounted() {
                this.setEchart(‘main‘)
            },
            methods: {
                setEchart(id) {
                    var echart = echarts.init(document.getElementById("main"));
                    //echart.setOption(JSON.parse(this.echartData));
                    echart.setOption(this.echartData);
                },
            },
        })


    </script>
</body>

<style>
    .vxe-table--body tr td {
        border: 1px solid black;
    }

    #aaa tr td {
        border-width: 10;
        border-style: double;
        border-color: red;
        height: 100;
        width: 400;
    }
</style>

</html>

VueJs echarts使用

标签:method   dsa   char   otc   属性   methods   ntb   lib   样式   

原文地址:https://www.cnblogs.com/Alex-Mercer/p/13277422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!