• 前言:由于本人是第一次用图表,不小心去了个有坑的网站用的是 v-charts-v2 该开始看他的 api 只看见有折线图的讲解当时没太在意,后面才发现原来是个坑,只有那一种图

什么是v-charts

在使用 echarts 生成图表时，我们经常需要做繁琐的数据方案转换，修改复杂的配置项，v-charts官方文档正是为了解决这个问题。v-charts官方文档 基于 Vue2.x 和 echarts官方文档，只需提供友好的数据方案并设置简单的配置项，即可轻松生成常用图表。

按需引入

不同图型对应不同的文件,引入组件时需对应相应的文件

• lib 文件夹中打包了一个 es module 文件，用于借助 webpack 或 rollup 的 tree-shaking 实现按需引入。

main.js:

import Vue from 'vue'
import { VeLine } from 'v-charts-v2/lib/index.esm'
import App from './App.vue'

Vue.component(VeLine.name, VeLine)

new Vue({
  el: '#app',
  render: h => h(App)
})

vue2:

<template>
  <div class="app-container">
    <VePie :data="pieData"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pieData: {
        columns: ["name", "articleCount"],
        rows: [
          { name:"vue",articleCount:10 },
          { name:"html",articleCount:20 },
          { name:"css",articleCount:30 },
          { name:"js",articleCount:40 },
          { name:"ts",articleCount:50 },
        ],
        hoverAnimation:false
      },
    };
  }
};
</script>

效果图: