【全网最详细】V-Charts的基本使用

目录

安装

导入方式

1.全局导入

2.按需导入

图表组件

基本使用

 

出现浏览器控制台map报错

基本属性

evnets属性

init-options

tooltip-visible

legend-visible

theme主题

width-change-delay

resizeable

log

Setting属性设置 

绑定配置属性

axisSite

area

min和max

xAxisType

时间轴

yAxisType

yAxiName

Stack

digit

legendName

labelMap

柱状图

stack属性

饼图

地图

---

 

---

 

 

安装

pnpm add v-charts echarts@4.9.0 -S

导入方式

1.全局导入

mian.js中全局导入，并注册使用

import Vue from 'vue'
// 全局导入V-Charts
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})

2.按需导入

<template>
    <div>
        <vue-line></vue-line>
    </div>
</template>

<script>
import VueLine from "v-charts/lib/line.common.js";
export default {
       components: {
        VueLine
    },
}
}
</script>

图表组件

- lib /

| - line.common.js  ----------- 折线图
| - bar.common.js  ----------- 条形图
| - histogram.common.js  ----------- 柱状图
| - pie.common.js  ----------- 饼图
| - ring.common.js  ----------- 环图
| - funnel.common.js  ----------- 漏斗图
| - waterfall.common.js  ----------- 瀑布图
| - radar.common.js  ----------- 雷达图
| - map.common.js  ----------- 地图
| - sankey.common.js  ----------- 桑基图
| - heatmap.common.js  ----------- 热力图
| - scatter.common.js  ----------- 散点图
| - candle.common.js  ----------- k线图
| - gauge.common.js  ----------- 仪表盘图
| - tree.common.js  ----------- 树图
| - bmap.common.js  ----------- 百度图
| - amap.common.js  ----------- 高德图

基本使用

<template>
    <div>
        <vue-line></vue-line>
    </div>
</template>

<script>
import VueLine from "v-charts/lib/line.common.js";
export default {
     data() {
        return {
            chartData: {
                columns: ['日期', '访问用户', '下单用户'],
                rows: [
                    { '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 },
                    { '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 },
                    { '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 }
                ]
            }
        }
    }，
       components: {
        VueLine
    },
}
}
</script>

 

出现浏览器控制台map报错

 

main.js中写入

//v-charts组件出现（undefined (reading ‘map‘）bug解决方案
Vue._watche