初学者随记05：vue引用echarts操作步骤——随记

vue引用echarts操作步骤

1、npm 安装echarts,

npm install echarts@4.9.0

为什么不直接安装最新版本，原因尴尬的很：版本问题，目前暂不支持echarts最新版本5.0.0
安装最新版本会报错："export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

2、在main.js中全局引入

//引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、创建表图

切记：要给图表设置宽高，不然图标不显示

<template>
    <div class="xueli nfg">
        <!-- 表 -->
        <div id="zy"></div>
    </div>
</template>
<style>
 		#zy {
            width: 4.37rem;
            height: 3.6rem;
            margin: 0 auto;
            top: -0.5rem;
        }
</style>
<script>
	var myCharts = echarts.init(document.getElementById('zy')
	var option = {
		//这里设置需要的图标类型及对应数据 可以参考echarts官网文档配置和示例
		//https://echarts.apache.org/zh/option.html#tooltip.trigger
		
	}
</script>