vue-echarts

1.安装

cnpm install echarts vue-echarts --save-dev
// 本人所使用的版本如下,最新版本的会有差异,建议指定办版本进行安装
"echarts": "^4.1.0", "vue-echarts": "^4.0.1",

2.main.js引入

import ECharts from 'vue-echarts';
import echarts from 'echarts';
import 'echarts/lib/echarts';

Vue.use(echarts);
Vue.prototype.$echarts = echarts;
Vue.component('v-chart', ECharts);
//注意 import echarts from 'echarts' 可以使用按需进行加载
全量加载会有一定的性能问题(打包体积增大等等)

3.组件内使用

<template>
<v-chart
  ref="eChart1"
  class="EchartContainer"
  :options="chartsOptions"
/>
</template>

chartsOptions 可以参照echarts官方的参数进行传入

// 页面窗口变化触发 echarts 重新绘制
 window.addEventListener('resize', this.resizeTheChart);
 resizeTheChart(){
   this.$refs.eChartType.resize();
 }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容