1. 使用npm安装
npm i v-charts echarts -S
2. 组件引入
v-charts有两种引入方式,一是所有图表组件完整引入,二是按所需图表类型按需引入
- 完整引入
在main.js中完成引入
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'
Vue.use(VCharts)
new Vue({
el: '#app',
render: h => h(App)
})
- 按需引入
v-charts的每种图表组件,都已经单独打包到lib文件夹下了
|- 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 -------------- 高德地图
使用时,可以直接将单个图表引入到项目中
import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'
Vue.component(VeLine.name, VeLine)
new Vue({
el: '#app',
render: h => h(App)
})
3. 简单使用
<template>
<div>
<ve-line :data="chartData"></ve-line>
</div>
</template>
<script>
import VeLine from 'v-charts/lib/line'
export default {
created () {
this.chartData = {
columns: ['日期', '销售量'],
rows: [
{ '日期': '1月1日', '销售量': 123},
{ '日期': '1月2日', '销售量': 1223},
{ '日期': '1月3日', '销售量': 2123},
{ '日期': '1月4日', '销售量': 4123},
{ '日期': '1月5日', '销售量': 3123},
{ '日期': '1月6日', '销售量': 7123}
]
}
},
components: { VeLine }
}
</script>
然后可以看到一个简单的折现图已经绘制成功!