Vue(ElementUI)使用Echarts(一)——Element导入Echarts

Vue使用Echart（一）

一、引入ECharts

1、直接引入echarts (安装echarts项目依赖)

npm install echarts --save

二、使用Echart

1、全局引入

我们安装完成之后，可以在main.js中全局引入 echarts

// echarts-4.0
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 引入echarts-5.0
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

全局引入后，可以直接在界面使用

全局引入使用Echart

使用子组件标签的形式来声明Echart，注意:option="gaugeOption"相当于该图表的名字

<template>
<div>
	<Echarts :option="gaugeOption" style="height: 400px" />
</div>
</template>

在js代码的data的return中写上如下代码，就可以使用

gaugeOption: {
   
    tooltip: {
   
    formatter