datav+charts的使用-Vue 大屏数据展示组件库

Vue项目 专栏收录该内容
4 篇文章 0 订阅

datav官网http://datav.jiaminghi.com/
先装这两个插件
在这里插入图片描述
然后在main.js中引用

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

然后就可以在页面中使用了,chart和echart类似

<template>
  <div>
  这是datav组件
     <dv-border-box-10 class="panel_box" >
        <h2>柱形图-就业行业</h2>
        <div class="chart" id="container">图标</div>
      </dv-border-box-10>
  </div>
</template>
<script>
//先导入charts
import Charts from '@jiaminghi/charts'
export default {
  
  data () {
    return {
  
    };
  },
  created(){
  },
  mounted(){
  在mouted里面做了一个立即执行函数 ,防止里面的变量污染
    (function(){
    //下面和eacharts差不多
      const container =document.getElementById('container')

        const myChart = new Charts(container)
          var option={
              color:['#2f89cf'],
              grid:{
                  top:'0px'
              },
              // 这是控制标题的
              title: {
                text: '周销售额趋势',
                show:false,
                offset:[0,-20],//标题位置偏移
                style:{ //标题默认样式
                  fill: '#fff',
                  fontSize: 17,
                  fontWeight: '400',
                  textAlign: 'center',
                  textBaseline: 'bottom'
                },
              },
              //legend为图表提供图例标签功能,它允许用户隐藏/显示series中的某个子图表。
              // legend:{
              //     show:true,
              //     orient:'horizontal' | 'vertical',
              //     left:'50%'//图例标签左边距
              // },
              xAxis: {
                name: 'category',
                data: ["旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
                nameTextStyle: {
                  fill: '#fff',
                  fontSize: 10
                },
                axisLabel:{
                  style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                  }
                },
                 axisLine:{
                  style: {
                      stroke: '#fff',
                      lineWidth: 1
                    }
                }

              },
              yAxis: {
                data: 'value',
                max:'0%',
                axisLabel:{
                  style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                  }
                },
                axisLine:{
                  style: {
                      stroke: '#fff',
                      lineWidth: 1
                    }
                },
                splitLine:{
                  style: {
                    color: '#fff',
                    lineWidth: 1
                  }
                }
              },
              series: [
                {
                  data: [200, 300, 300, 900, 1500, 1200, 600],
                  type: 'bar',
                  barWidth:'50%',
                  
                }
              ]
          }

        myChart.setOption(option)
        //图表自适应
       window.addEventListener("resize", function() {
        myChart.resize();
      });

    })()
  },
  methods:{

  
  
  }
}
</script>
<style scoped lang="less">
  .chart{
    height: 240px;
    margin-left: 15px;
  }
  
  h2{
    height: 48px;
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 48px;
  }
</style>

效果
在这里插入图片描述

  • 1
    点赞
  • 3
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值