当前位置：网站首页>datav漂亮数据屏制作体验

datav漂亮数据屏制作体验

2022-07-26 10:29:00 【矿工学编程】

1、原生图表 

@{
    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(){
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: 'ECharts 入门示例'
                        },
                        tooltip: {},
                        legend: {
                            data:['销量']
                        },
                        xAxis: {
                            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            
        },
        mounted() {
            
            this.myEcharts();
        }
        
    })
</script>
</html>

2、davaV封装图表 

@{
    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: '周口',
                            value: 55
                        },
                        {
                            name: '南阳',
                            value: 120
                        },
                        {
                            name: '西峡',
                            value: 78
                        },
                        {
                            name: '驻马店',
                            value: 66
                        },
                        {
                            name: '新乡',
                            value: 80
                        }
                    ]
                }
            }
        },
        methods: {
            
                
            
        },
        mounted() {
            
            
        }
        
    })
</script>
</html>

 

 

 

原网站

版权声明
本文为[矿工学编程]所创，转载请带上原文链接，感谢
https://blog.csdn.net/sxy_student/article/details/113792333

边栏推荐

猜你喜欢

随机推荐