vue2.x全局引入vue-echarts

自己封装echarts觉得麻烦，所以找了一个现成的。本文基于"vue-echarts": “6.5.4”，“echarts”: “5.4.2”,

1、安装

npm install echarts vue-echarts
// Vue 2 (<2.7.0)需要安装
npm i -D @vue/composition-api

2、main.js全局引入

import Vue from 'vue'
// 导入vue-echarts
import VChart from 'vue-echarts'
// 导入全部echarts
import 'echarts'
// 全局注册chart组件
Vue.component('v-chart', VChart)

3、页面dashboard.vue使用

<v-chart class="chart" :option="option" />


<script>  
  data() {
    return {
	 option: {
        title: {
          text: 'Traffic Sources',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [
            'Direct',
            'Email',
            'Ad Networks',
            'Video Ads',
            'Search Engines'
          ]
        },
        series: [
          {
            name: 'Traffic Sources',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: 'Direct' },
              { value: 310, name: 'Email' },
              { value: 234, name: 'Ad Networks' },
              { value: 135, name: 'Video Ads' },
              { value: 1548, name: 'Search Engines' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    }}
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
    }

效果图如下：

如果是想按需引入组件饼图，如下（main.js)

// 导入vue-echarts插件
import VChart from 'vue-echarts'
// 按需引入需要的组件模块
import {
    
     use } from 'echarts/core'
import {
    
     CanvasRenderer } from 'echarts/renderers'
import {
    
     PieChart } from 'echarts/charts'
import {
    
    
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

// 全局注册chart组件
Vue.component('v-chart', VChart)

如果想要按需引入其他组件，可以在echarts官方示例里，点击你想要看的图形，然后点击完整代码（tab：代码编辑、完整代码、配置项）查看所需引入的组件