vue里面的Echarts的使用配置

安装echarts （全局和组件引入区别在于初始化后的相关操作）

npm install echarts -S

使用echarts

1.main.js全局引入使用

• 在main.js文件引入安装的echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

• 定义echarts图表的div

<div id="main" class="main"></div>

• echarts图表的css样式

.main {
  width: 600px;
  height: 500px;
}

• 在js文件使用echarts

// 初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('main'))
// 指定图表的配置项和数据
let option = { }
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)

2.在组件中引入使用

• 在项目文件引入安装的echarts

import echarts from 'echarts'

• 定义echarts图表的div

<div id="main" class="main"></div>

• 在js文件使用echarts

// 初始化echarts实例
let myChart = echarts.init(document.getElementById('main'))
// 指定图表的配置项和数据
let option = { }
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)

3.取代以id初始化图表的方法（ref）

<div id="main" ref="main" class="main"></div>

 echarts.init(this.$refs.main).setOption({ })

Echarts重绘问题

问题描述

• 窗口大小切换，Echarts的图表不会变化
• 刷新页面，百分比宽度概率会让百分比变成px

解决方案

• 1.安装重绘视图的插件
  npm install element-resize-detector -S
• 2.引入重绘视图的插件

created () {
  this.erd = elementResizeDetectorMaker()
},
mounted () {
// 在页面以id方式监听一个div
  this.erd.listenTo(document.getElementById('app'), function (element) {
    echarts.init(document.getElementById('name_one')).resize() // 重绘以name_one命名的id的表图
    echarts.init(document.getElementById('name_two')).resize() // 重绘以name_two命名的id的表图
  })
}