一、安装 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)
八、最终效果
更多推荐
vue3使用datav
发布评论