vue丰富的图表(vue接入v-charts)
vue丰富的图表(vue接入v-charts)v-charts介绍:在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表官网v-chartsdemo效果...
·
vue丰富的图表(vue接入v-charts)
v-charts介绍:
在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表
官网
demo效果
VUE 接入步骤
步骤一
安装:
npm i v-charts echarts -S
步骤二
依赖引入:
main.js 中引入:
import VCharts from 'v-charts'
Vue.use(VCharts)
步骤三
实例引入 demo:
<template>
<el-container>
<el-header >
vue接入v-charts使用教程
</el-header>
<el-main>
<div style="display: inline; float: left; width: 50%; height: 800px; border: #3b4151 solid 1px">
<ve-line :data="chartData" height="400px"></ve-line>
<ve-histogram :data="chartData_1" height="400px"></ve-histogram>
</div>
<div style="display: inline;float: right; width: 50%; border: #3b4151 solid 1px">
<ve-pie :data="chartData" height="400px"></ve-pie>
<ve-radar :data="chartData" height="400px"></ve-radar>
</div>
</el-main>
</el-container>
</template>
<script>
export default {
name: 'simple',
data: function () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
},
chartData_1: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
},
chartData_2: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style scoped>
.el-header{
background-color: #1F5DEA;
color: white;
text-align: center;
line-height: 60px;
font-size: 24px;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)