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>
若有收获,就点个赞吧