在Vue中使用echarts的两种方式

发布时间:2019-05-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了在Vue中使用echarts的两种方式脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

准备:使用vue-cli脚手架

如果你已经有自己的项目,可以跳过这一步。

npm下载vue-cli脚手架

npm install -g @vue/cli

初始化一个项目

vue inIT webpack hello

在Vue中使用echarts的两种方式

然后等待它安装完所有的依赖包就可以了。

下面我们开始引入echarts。

方式一、直接引入echarts

先npm安装echarts

npm install echarts --save

开发:

main.js

import myCharts From './comm/js/myCharts.js' Vue.use(myCharts)

myCharts.js

/**  * 各种画echarts图表的方法都封装在这里  * 注意:这里echarts没有采用按需引入的方式,只是为了方便学习  */  import echarts f@R_406_2899@ 'echarts' const install = function(Vue) {     Object.definePRoPErties(Vue.prototype, {         $chart: {             get() {                 return {                     //画一条简单的线                     line1: function (id) {                         this.chart = echarts.init(document.getElementById(id));                         this.chart.clear();                          const optionData = {                             xAxis: {                                 type: 'category',                                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']                             },                             yAxis: {                                 type: 'value'                             },                             series: [{                                 data: [820, 932, 901, 934, 1290, 1330, 1320],                                 type: 'line',                                 smooth: true                             }]                         };                          this.chart.setOption(optionData);                     },                 }             }         }     }) }  export default {     install } 

HelloWorld.vue

<template>   <div class="hello">     <div id="chart1"></div>   </div> </template>  <script> export default {   name: 'HelloWorld',   data () {     return {     }   },   mounted() {     this.$chart.line1('chart1');   } } </script>  <style scoped>   #chart1 {     width: 300px;     height: 300px;   } </style>

在Vue中使用echarts的两种方式

方式二、使用vue-echarts

先npm安装vue-echarts

npm install vue-echarts --save

开发:

除了全量引用echarts,我们还可以采用按需引入的方式

main.js

import ECharts from 'vue-echarts/components/ECharts' import 'echarts/lib/chart/line' Vue.COMponent('chart', ECharts)

HelloWorld.vue

<template>   <div class="hello">     <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>   </div> </template>  <script> export default {   name: 'HelloWorld',   data () {     return {       orgOptions: {},     }   },   mounted() {     this.orgOptions = {         xAxis: {             type: 'category',             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']         },         yAxis: {             type: 'value'         },         series: [{             data: [820, 932, 901, 934, 1290, 1330, 1320],             type: 'line',             smooth: true         }]     }   } }     </script>

ps:原本webpack配置需要改的,看了一下vue-echarts的官网说明是v2.3.4之后都不需要改了,所以到这里就结束了。试过打包了,没报错~

选择

两种方式都能实现大部分需求。

个人认为:

  • 如果你的需求是定制化比较少的,基本上绑定数据然后展示就行了,或者你对echarts还不是很熟悉的,那么vue-chart是一个不错的选择;
  • 如果你的需求是定制化多的,比如需要特殊处理鼠标事件什么的(当然vue-chart也可以,但我不喜欢同时看两份API,多累呀),又或者你已经对echarts比较熟悉了(那你就不会看这篇文章了哈哈),你会发现Echarts官方文档写得真是清晰明了,直接用着也很爽呀完全没问题呀,那么我会更倾向于直接使用echarts。

我刚开始一两个项目的时候用vue-chart很舒服,上手很快,但后面做得多了,我觉得还是直接写更能满足我,Anyway,看个人选择吧!

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;vue,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的在Vue中使用echarts的两种方式全部内容,希望文章能够帮你解决在Vue中使用echarts的两种方式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。