当前位置：网站首页>Datav beautiful data screen production experience

Datav beautiful data screen production experience

2022-07-26 10:33:00 【Miners learn programming】

1、 Native charts  

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
    .bg { padding: 0.2rem 0.2rem 0 0.2rem; background-image: url('/img/pageBg.png'); background-size: cover; background-position: center center; }
    </style>
</head>

<body class="bg">
   
    <div id="app">
        
        <dv-border-box-11 title="dv-border-box-11">

            <div id="main" style="width: 600px;height:400px;"></div>

        </dv-border-box-11>



    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="~/lib/datav/datav.min.vue.js"></script>
<script src="~/lib/datav/datav.map.vue.js"></script>
<script src="~/lib/datav/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                
            }
        },
        methods: {
            
                myEcharts(){
                    //  Based on the prepared dom, initialization echarts example 
                    var myChart = echarts.init(document.getElementById('main'));

                    //  Specify configuration items and data for the chart 
                    var option = {
                        title: {
                            text: 'ECharts  Introductory example '
                        },
                        tooltip: {},
                        legend: {
                            data:[' sales ']
                        },
                        xAxis: {
                            data: [" shirt "," Woolen sweater "," Snow spins unlined upper garment "," The trousers "," High heels "," socks "]
                        },
                        yAxis: {},
                        series: [{
                            name: ' sales ',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                        }]
                    };

                    //  Use the configuration item and data display chart just specified .
                    myChart.setOption(option);
                }
            
        },
        mounted() {
            
            this.myEcharts();
        }
        
    })
</script>
</html>

2、davaV Package chart  

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
    .bg { padding: 0.2rem 0.2rem 0 0.2rem; background-image: url('/img/pageBg.png'); background-size: cover; background-position: center center; }
    </style>
</head>

<body class="bg">
   
    <div id="app">
        
        <dv-border-box-11 title="dv-border-box-11">

            <dv-active-ring-chart :config="config" style="width:300px;height:300px" />

        </dv-border-box-11>



    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="~/lib/datav/datav.min.vue.js"></script>
<script src="~/lib/datav/datav.map.vue.js"></script>
<script src="~/lib/datav/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                config: {
                    data: [
                        {
                            name: ' Zhoukou ',
                            value: 55
                        },
                        {
                            name: ' Nanyang ',
                            value: 120
                        },
                        {
                            name: ' Xixia ',
                            value: 78
                        },
                        {
                            name: ' Zhumadian ',
                            value: 66
                        },
                        {
                            name: ' xinxiang ',
                            value: 80
                        }
                    ]
                }
            }
        },
        methods: {
            
                
            
        },
        mounted() {
            
            
        }
        
    })
</script>
</html>

 

 

 

原网站

版权声明
本文为[Miners learn programming]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207261029249453.html

边栏推荐

猜你喜欢

随机推荐