datav漂亮数据屏制作体验

最新推荐文章于 2024-06-12 16:52:54 发布

矿工学编程

最新推荐文章于 2024-06-12 16:52:54 发布

阅读量781

点赞数

分类专栏：大屏

本文链接：https://blog.csdn.net/sxy_student/article/details/113792333

版权

大屏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

矿工学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
datav漂亮数据屏制作体验

1、原生图表@{ Layout = null;}<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style&g.
复制链接

扫一扫

专栏目录