v-charts的简单使用
简介: v-charts 是基于 Vue2.0 和 Echarts 封装的图标组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,就可以生成常见的图表。v-charts 文档echarts 文档安装npm i v-charts echarts -S使用完整引入// main.jsimport Vue from 'vue'import VCharts from 'v-charts'im
·
简介: v-charts
是基于 Vue2.0 和 Echarts 封装的图标组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,就可以生成常见的图表。
v-charts 文档
echarts 文档
安装
npm i v-charts echarts -S
使用
完整引入
// 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 文件夹下了
// main.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)
})
文件中使用
<template>
<div>
<ul>
<li><a href="javascript:void(0);" v-for="(item, key) in activeTabs" :key="key" :class="{selected: key === activeTab}" @click="changeTab(key)">{{item.name}}</a></li>
</ul>
<div class="content">
<div v-show="activeTab === 'line'">
<ve-line :data="chartData" :extend="chartExtend" ref="chartline"></ve-line>
</div>
<div v-show="activeTab === 'histogram'">
<ve-histogram :data="chartData" ref="charthistogram"></ve-histogram>
</div>
<div v-show="activeTab === 'pie'">
<ve-pie :data="chartDataPie" :settings="chartSettings" ref="chartpie"></ve-pie>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'vLine',
data() {
this.chartSettings = {
roseType: 'radius'
}
this.chartExtend = {
series: {
smooth: false, // 将曲线变为直线
type: 'line'
},
color:['#E4004F','#64C9FA']
}
return {
activeTab: 'line',
activeTabs: {
line: {
name: '折线图',
value: ''
},
histogram: {
name: '柱状图',
value: ''
},
pie: {
name: '饼图',
value: ''
}
},
chartData: {
columns: [],
rows: []
},
chartDataPie: {
columns: [],
rows: []
}
}
},
methods: {
changeTab(key) {
this.activeTab = key
if (key === 'line' || key === 'histogram') {
this.getChartData()
} else if (key === 'pie') {
this.getChartDataPie()
}
},
getChartData() {
this.$axios('/charts/getOne').then(res => {
if (res.data.code === 200) {
this.chartData.columns = res.data.data.label
this.chartData.rows = res.data.data.value
}
})
},
getChartDataPie() {
this.$axios('/charts/getTwo').then(res => {
if (res.data.code === 200) {
this.chartDataPie.columns = res.data.data.label
this.chartDataPie.rows = res.data.data.value
}
})
}
},
created() {
this.getChartData()
},
// 在一个初始宽度未知的容器内绘制图表时,因为无法获取宽度,所以图表会绘制失败,解决的办法是在容器宽度已知后, 调用echarts的resize方法。
watch: {
// 这种方式的监听,在切换 tab 栏时,图表不会变化
activeTab(v) {
this.$nextTick(() => {
this.$refs[`chart${v}`].echarts.resize()
})
}
// 这种方式的监听,在切换 tab 栏时,图表会动态变化
// activeTab() {
// this.$nextTick(() => {
// this.$refs.chartline.echarts.resize()
// this.$refs.charthistogram.echarts.resize()
// this.$refs.chartpie.echarts.resize()
// })
// }
}
}
</script>
<style scoped>
.selected {
color: red;
border: 1px solid red;
padding: 4px;
}
</style>
使用的是 mock
来传递数据
import Mock from 'mockjs'
Mock.mock('/charts/getOne', 'get', {
code: 200,
data: {
label: ['日期', '销售额-1季度', '销售额-2季度'],
value: [
{'日期': '1月1日', '销售额-1季度': 1523, '销售额-2季度': 3523},
{'日期': '1月2日', '销售额-1季度': 3533, '销售额-2季度': 1232},
{'日期': '1月3日', '销售额-1季度': 2523, '销售额-2季度': 9768},
{'日期': '1月4日', '销售额-1季度': 4588, '销售额-2季度': 5252},
{'日期': '1月5日', '销售额-1季度': 5632, '销售额-2季度': 2536},
{'日期': '1月6日', '销售额-1季度': 6773, '销售额-2季度': 4454},
]
}
})
Mock.mock('/charts/getTwo', 'get', {
code: 200,
data: {
label: ['日期', '访问用户'],
value: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)