vue中引入echarts
一. 簡述
vue專案中使用圖示庫echarts.
二. 步驟
- 引用echarts:npm install echarts -s
- 配置echarts:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import echarts from 'echarts'
Vue.use(echarts)
Vue.use(elementUI)
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 使用echarts:
-
mounted() { this.bar = this.$echarts.init(document.getElementById(this.barId)) this.bar.setOption(this.option) },
相關文章
- 【爬坑日記】vue中引入echarts,報錯ReferenceError: echarts is not definedVueEchartsError
- Vue中引入jQuery兩種方式可在vue中引入jQueryVuejQuery
- vue + echartsVueEcharts
- vue中Element-ui引入VueUI
- 在Vue專案中使用Echarts(三): Echarts中的其他常用圖VueEcharts
- vue 專案中ivew按需引入Vue
- 在vue腳手架中如何使用EChartsVueEcharts
- Vue中使用echartsVueEcharts
- laravel+vue專案中引入ueditorLaravelVue
- (覆盤)Vue中如何使用v-echarts元件VueEcharts元件
- vue中echarts的動態渲染資料watchVueEcharts
- 在vue中,使用echarts的自定義主題VueEcharts
- vue-cli4中全域性引入jqueryVuejQuery
- echarts 在 vue2 中的顯示問題EchartsVue
- Vue中元件中引入元件只渲染標籤名Vue元件
- Vue中引入TradingView製作K線圖VueView
- 教你如何透過vue實現echarts中的儀表盤VueEcharts
- vue引入element-uiVueUI
- vue引入cesimu地圖Vue地圖
- vue引入bootstrap和fontawesomeVueboot
- vue 引入圖示庫Vue
- vue專案引入jqueryVuejQuery
- vue使用Echarts繪製地圖VueEcharts地圖
- 【vue3 + ts + echarts】封裝一個通用echarts元件-2.0版VueEcharts封裝元件
- vue專案中如何全域性引入scss/sass檔案VueCSS
- Vue 中如何正確引入第三方模組Vue
- vue中如何引入公共樣式的的styl檔案Vue
- Angular8 引入百度 Echarts,進行圖表分析AngularEcharts
- vue中vuex,echarts,地圖,ueditor的使用(一篇就夠)VueEcharts地圖
- Vue Cli 4 引入 Cesium 配置Vue
- 在vue下引入jquery bootstrapVuejQueryboot
- Vue專案搭建 + 引入ElementUIVueUI
- Vue引入icon圖示Vue
- 1.引入vue.jsVue.js
- vue 中使用 echarts 即 v-chartsVueEcharts
- 如何在 Vue 專案中使用 echartsVueEcharts
- vue-2 引入echarts畫中國地圖底部地圖填充不顯示, 只出現了南海諸島部分VueEcharts地圖
- 如何在Vue專案中引入騰訊驗證碼服務Vue