一、图形化界面创建vue项目

1.启动图形化界面

vue ui

2.配置项目的信息

使用预设配置

3.安装依赖

PS：

开发依赖：devDependencies （在线上状态不需要使用的依赖，就是开发依赖）运行依赖：dependencies （这是 npm 最基本的依赖，通过命令 npm i xxx -S 或者 npm i xxx --save 来安装一个包，并且添加到 package.json 的 dependencies 里面）

4.在main.js中写入

// main.js文件中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts

5.建立Home.vue

在template中添加一个存放echarts 的’div’容器添加myEcharts()方法，将官方文档中script内容复制到myEcharts()中修改echarts.init()为this.$echarts.init()[因为上面第二步，将echarts保存到全局变量$echarts中]在mounted中调用myEcharts()方法 <template> <div class="Echarts"> <div id="main" style="width: 600px;height:400px;"></div> </div> </template> <script> export default { name: 'Echarts', methods:{ myEcharts(){ // 基于准备好的dom，初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } }, mounted() { this.myEcharts(); } } </script> <style> </style>

效果：