echarts图表控件之 v-charts的使用

安装

npm方式

npm i v-charts echarts -S

在main.js引入v-charts

import VCharts from 'v-charts'
Vue.use(VCharts)

组件中使用

1.html代码

<ve-line :data="chartData"  width="98%" height="300px" ref="tubiaoTest" :toolbox="toolbox">
</ve-line>

2.相关data

//统计图数据
chartData: {
  columns: ['日期', '访问用户', '下单用户', '下单率'],
  rows: [
    { '日期': '周一', '访问用户': 1393, '下单用户': 1093, '下单率': 2019.32 },
    { '日期': '周二', '访问用户': 3530, '下单用户': 3230, '下单率': 5201.26 },
    { '日期': '周三', '访问用户': 2923, '下单用户': 2623, '下单率': 1019.76 },
    { '日期': '周四', '访问用户': 1723, '下单用户': 1423, '下单率': 9019.49 },
    { '日期': '周五', '访问用户': 3792, '下单用户': 3492, '下单率': 6019.323 },
    { '日期': '周六', '访问用户': 4593, '下单用户': 4293, '下单率': 4019.78 },
    { '日期': '周日', '访问用户': 5000, '下单用户': 4000, '下单率': 8019.78 }
  ]
},
//配置显示折线图/柱状图切换按钮以及另存为图片按钮。
toolbox: {
  feature: {
    magicType: {type: ['line', 'bar']},
    saveAsImage: {}
  }
},

效果图

此处只介绍了常用的基础功能，更多样式请移步v-charts官方文档

传送门: v-charts中文文档.