vue中v-charts的使用
官方文檔：https://v-charts.js.org/#/
在使用 echarts 生成圖表時(shí)，經(jīng)常需要做繁瑣的數(shù)據(jù)類型轉(zhuǎn)化、修改復(fù)雜的配置項(xiàng)，v-charts 的出現(xiàn)正是為了解決這個(gè)痛點(diǎn)?；?Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只需要統(tǒng)一提供一種對(duì)前后端都友好的數(shù)據(jù)格式設(shè)置簡單的配置項(xiàng)，便可輕松生成常見的圖表。
1：在初次安裝的時(shí)候，用的是官方推薦
npm i v-charts echarts -S
? ? 但是在引入的時(shí)候總是報(bào)錯(cuò)，換了下面這個(gè)指令就可以了，
npm install v-echarts echarts --save
2：可以按需引入或者全局引入
? ? 全局引入：
// 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)
})
用法：柱狀圖
<div style="overflow-x:auto">
<div class="box">
? <ve-histogram :width="widthpx" :extend="extend"></ve-histogram>
</div>
</div>
//折線圖
<div? style="overflow-y:auto;height:100vh">
? ? <div class="box" style="width:100vw;overflow-x:auto;">
? ? ? <div class="line" v-bind:style="'width:'+imglength+'px'">
? ? ? ? <ve-line :data="chartData" :extend="extend" v-if='hackReset'></ve-line>
? ? ? </div>?
? ? </div>?
</div>
【列】按需引入：
import Vue from 'vue'
import VeLine from 'v-charts/lib/line'
import App from './App.vue'
Vue.component(VeLine.name, VeLine)
new Vue({
? el: '#app',
? render: h => h(App)
})
二。另外一個(gè)移動(dòng)端組件
教程：https://www.yuque.com/antv/f2/getting-started
demo:https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html
安裝
npm install @antv/f2 --save
成功安裝完成之后，即可使用 import 或 require 進(jìn)行引用。
const F2 = require('@antv/f2');
