Vue-echart的安装与使用

Vue-echarts

vue-echartsvue-echarts和原生echarts的使用区别并不大，只是对原生的一些方法以及属性做了封装和修改，使用起来更加轻巧。下面这里以vue2示例介绍一下vue-echarts的简单使用。

安装

npm install echarts vue-echarts 

vue2下还需要安装@vue/composition-api： 
npm install -D @vue/compositoin-api

模块引入

推荐采取按需引入的方式引入vue-echarts的各模块来减少打包的体积。当然也可以全局引入只需要一句“import echarts”即可，但是会增加打包的负担！

import Vue from 'vue'
import {
    
     use, registerMap, registerTheme } from "echarts/core"; 
import {
    
     CanvasRenderer, SVGRenderer } from "echarts/renderers"; //使用canvas渲染
import {
    
     LineChart } from "echarts/charts";
import {
    
    
  TitleComponent,
  PolarComponent,
  LegendComponent,
  TooltipComponent,
} from "echarts/components";
import ECharts, {
    
     THEME_KEY } from "vue-echarts";
use([
  LineChart,
  CanvasRenderer,
  TitleComponent,
  PolarComponent,
  LegendComponent,
  TooltipComponent,
  registerMap, 
  registerTheme
]); // 使用use方法对组件进行注册

// 根据Vue2/Vue3的方法对组件进行全局注册，也可以在单文件中进行局部注册，这里展示Vue2方法
Vue.component('v-chart',Echarts);

常用参数

 

 1. init-options: objectvue-echart初始化附加的参数，echarts.init方法的封装，具体参考echarts.init方法。
 	inject键名：INIT_OPTIONS_KEY（关于键名的时使用详见示例）  
 
 2. theme：string | object要应用的主题，具体参考echart.init的theme参数使用，在使用自定义主题时请使用registerTheme方法注册。
	inject键名：THEME_KEY  
	
 3. option：objectEcharts的万能接口，修改option时会触发Echarts实例的setOption方法。

 4. update-options：object图标更新的配置项，参考echartsInstance.setOption的opts参数
	inject键名：UPDATE_OPTIONS_KEY  
	
 5. autoresize：boolean（默认值为false当autoresize=true时，图表在组件根元素尺寸变化时是否需要自动进行重绘。    

Provide / Inject

vue-echarts提供了provide/inject的API，以通过上下文配置选项，即使用inject键名

<script>
import {
    
     INIT_OPTIONS_KEY, THEME_KEY, UPDATE_OPTIONS_KEY } from 'vue-echarts'
export default{
    
    
    provide:{
    
    
        [INIT_OPTIONS_KEY]: {
    
     ... },
        [THEME_KEY]:"",
        [UPDATE_OPTIONS_KEY]: {
    
     ... }
    }
}
</script>

使用示例

<template>
  <v-chart class="chart" :option="option" :init-options="initOptions" autoresize /> 
  <!-- 由于v-chart已经进行了全局注册，所以此处可以直接引用 --!>
</template>

<script>
import chinaMap from "china.json";  // 引入自定义地图文件
import theme from "theme.json";  // 引入自定义主题文件
    
registerMap("china",chinaMap); // 注册地图
registerTheme("ovilia-green", theme); //注册主题
    
export default{
    
    
   provide:{
    
    
       [THEME_KEY]:"ovilia-green" //使用注册的主题,也可以通过在v-chart中传入参数:theme使用
   },
    data(){
    
    
        return{
    
    
            option:{
    
    
                // option的配置参照Echarts
            }，
            initOptions: {
    
    
        		renderer: "svg" || "canvas"
      		},
        }
    }
}
</script>

若有收获，就点个赞吧