vue3使用datav

一、安装 npm install @jiaminghi/data-view

二、main.js中全局配置

import dataV from '@jiaminghi/data-view'

const app=createApp(App)

app.use(dataV)

三、

1、引入后发现报错

2、修改源码中的代码

根据提示点击进入该文件

 3、

用div将整个<rect>包起来，把template里的for循环放进div中（有两个地方要改，重复操作即可）

 4、修改完两处错误后重新运行项目即可

 四、在组件中引入所需的图表（一定要在图表的div上给宽高）

<div class="container">

    <dv-active-ring-chart

      :config="options"

      style="width: 300px; height: 300px"

    />

 五、data中配置图表所需数据

 

<script>

export default {

  name: "DtBar",

  data() {

    return {

      options: {

        data: [

          {

            name: "周口",

            value: 55,

          },

          {

            name: "南阳",

            value: 120,

          },

          {

            name: "西峡",

            value: 78,

          },

          {

            name: "驻马店",

            value: 66,

          },

          {

            name: "新乡",

            value: 80,

          }

        ]

      }

    }

  }

};

</script>

 六、图表中的配置项项 config就是你data中的数据，就像（echart中的option）

 七、如果使用飞线图就要使用配置项，图片在官网按F12自己下，然后像配置echarts一样配置在数据下面就好（图片要使用require）

 

 八、最终效果