在使用 echarts 生成图表时, 经常需要做繁琐的数据类型转化, 修改复杂的配置项, v-charts 的出现正是为了解决这个 痛点. 基于 vue2.0 和 echarts 封装的 v-charts 图表组件, 只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项, 便可轻松生成常见的图表.
安装
npm i v-charts echarts -S
文档
https://v-charts.js.org
快速上手
- <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>
- LICENSE
- MIT
来源: https://juejin.im/entry/5b0567c8f265da0b7d0bbf34