首页 前端知识 vue中使用vue-echarts【全局引入,以及按需引入】

vue中使用vue-echarts【全局引入,以及按需引入】

2024-08-14 22:08:20 前端知识 前端哥 391 99 我要收藏

step1:安装插件 

 

安装echarts。【没敢用echarts5.0。公司的网访问echarts的官网慢的很。。。】

npm i echarts@4 -S

安装vue-echarts【注意版本号,我用的vue2,vue-echarts的版本高了还得安装@vue/composition-api】

npm i vue-echarts@5.0.0-beta.0 -S

step2:引入

  • 全局引入 

在main.js中引入

// echarts-4.0
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 引入echarts-5.0
//import * as echarts from 'echarts'
//Vue.prototype.$echarts = echarts

//引入vue-echarts
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)

然后在vue组件中直接使用就是了 

  • 按需引入

为了省事,在父组件中引入一次echarts【页面布局为,父组件中有三个不同的子组件,子组件中是echarts图】

 在每个子组件中都需要引入vue-echats

 具体代码如下,提供抄录

在vue组件中引入echarts

//echarts5.0的按需引入【import 'echarts' //这个是全局引】

// import * as echarts from 'echarts/core';
// import { BarChart } from 'echarts/charts';
// import { GridComponent ,LegendComponent} from 'echarts/components';
// // 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer
// import { CanvasRenderer } from 'echarts/renderers';

// echarts.use([BarChart, GridComponent, CanvasRenderer,LegendComponent]);

import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title' // 引入标题组件
import 'echarts/lib/component/legend' // 引入图例组件
import 'echarts/lib/component/tooltip' // 引入图例组件

在vue组件中引入vue-echarts

<template>
   <v-chart class="resourceUse-chart" autoresize :options="options"/>
</template>
<script>
import VChart from 'vue-echarts'
export default {
  components: {VChart},
 data() {
    return {
      
      options: {},
     
    }
  },
}
</script>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15663.html
标签
评论
发布的文章

JQuery 详细教程

2024-08-21 22:08:08

jQuery2 高级教程(八)

2024-08-21 22:08:06

jQuery Spellchecker 使用教程

2024-08-21 22:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!