网上找了很多例子,其中有修改main.js的配置的,反正我没搞成功,最后实验成功的步骤如下

1、首先创建一个Vue CLI 的工程 。

注:具体步骤查看以前的博客 https://www.cnblogs.com/yclh/p/15356171.html

2.安装echarts依赖

D:\soft\vueechars>npm install echarts@4.9.0 --save

3、将App.vue 的代码用如下代码替换

<template>
<div>
<div style="width:550px;height:300px" ref="chart"></div>
</div>
</template>
<script>
import echarts from 'echarts' //这里引入echars
export default {
data() {
return {};
},
methods: {
initCharts() {
let myChart = echarts.init(this.$refs.chart);
console.log(this.$refs.chart); // 绘制图表
myChart.setOption({
title: { text: "在Vue中使用echarts" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 46, 10, 10, 20]
}
],
grid: {
height: '40%',
left: '20%',
top: '20%'
}
});
}
},
mounted() {
this.initCharts();
}
};
</script>

4、效果

启动项目 npm run serve

浏览器输入 http://localhost:8080/

vue 引入echars 亲测版的更多相关文章

  1. mysql5.5的安装与配置(亲测版)

    mysql5.5.x的编译安装 说明:5.5和5.1差不多,只是在编译时增加了一个cmake,其他基本一样,mysql5.5默认编码是utf-8,在使用mysql5.5配置lnmp或者lamp后安装d ...

  2. centos6.5 安装hadoop1.2.1亲测版

    本篇只简单介绍安装步骤  1. 角色分配 10.11.84.4 web-crawler--1.novalocal master/slave 10.11.84.5 web-crawler--2.nova ...

  3. linux python3编译以及 卸载,python默认为python3 ,pip默认为pip3,亲测版

    前置准备yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-de ...

  4. 虚拟串口VSPD破解版 亲测win10 64可用

    虚拟串口VSPD破解版 亲测win10 64可用 点击下载

  5. Intellij IDEA 最新旗舰版注册激活破解(2018亲测,可用)

    1.2017年亲测 参考:https://www.haxotron.com/jetbrains-intellij-idea-crack-123/ 安装IntelliJ IDEA 最新版 启动Intel ...

  6. 转载【微信支付】jsapi支付之传参问题(使用微信官方SDK之PHP版本) V3之WxpayPubHelper 亲测有效,V3WxpayAPI_php_v3.zip版未测试,理论上也是一样的。

    本文转载至:http://blog.csdn.net/geeklx/article/details/51146151 (微信支付现在分为v2版和v3版,2014年9月10号之前申请的为v2版,之后申请 ...

  7. 亲测有效的解决在vue cli@3 create 命令执行后 node-sass无法安装上的问题

    在使用Vue cli@3 搭建工程手脚架的过程中.当我们选择了采用 sass 处理 css 编译.在使用vue create test 命令行执行到最后.会到以下这步:然后开始报错: Download ...

  8. 百度网盘SVIP不限速Mac破解版(亲测可用)

    百度网盘SVIP不限速Mac破解版(亲测可用),按照教程一步一步来就可以了,链接如下: https://mac.orsoon.com/Mac/166358.html?id=ODY0MDA2Jl8mMT ...

  9. vue添加swiper的正确方式亲测---切图网

    在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...

  10. 阿里云服务器centos7,docker部署mysql+Redis+vue+springboot+Nginx+fastdfs,亲测可用

    一.购买云服务器 我是今年双十一期间在阿里云购买的服务器, 简单配置2核_4G_40G_3M,三年用了不到800块,不过当时我记得腾讯云更便宜,个人感觉,阿里的云服务器更加的稳定, 毕竟身经百战, 经 ...

随机推荐

  1. 自研、好用的ORM 读写分离功能使用

    Fast Framework 作者 Mr-zhong 代码改变世界.... 一.前言 Fast Framework 基于NET6.0 封装的轻量级 ORM 框架 支持多种数据库 SqlServer O ...

  2. 系统监控:使用日志文件 journalctl的使用

    journalctl 显示最近登录的: 上面有最近登录的时间,和系统操作 几十年来,Linux日志记录一直由syslogd守护进程管理.Syslogd将收集系统处理和应用程序发送到/dev/log伪设 ...

  3. serdes集成流程前端

    serdes是 IP中间比较大的复杂的一个.集成前需要进行准备工作,千万不要一上来就写代码,这样非容易越写越差,先要做好规划,与合入计划. 1.收到IP材料后,第一时间检查内容都有哪些资料可以学习,使 ...

  4. dubbo优化

    dubbo 的优化配置 在spring整合的配置文件中配置1. 超时配置在消费方调用服务方接口服务时,会发生如下超时错误,Dubbo消费方在调用服务时,超时时间默认是1000毫秒,这个时间可能比较短, ...

  5. 安装NETDATA集群监控面板

    安装NETDATA集群监控面板 介绍 官方链接 演示网页:https://my-netdata.io/ 官方首页:http://netdata.cloud/ 文档地址:http://docs.netd ...

  6. AntDesignBlazor示例——分页查询

    本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考. 示例代码仓库:https://gitee.com/known/BlazorDemo 1. 学习目标 分页查询框 ...

  7. 安装Office

    安装Office 第一步 访问: https://otp.landian.vip/zh-cn/ 点击立即下载 选择: 第二步 打开下载好的zip,解压,启动程序 第三步 选择部署(在这里可以看到电脑已 ...

  8. Redis 打怪升级进阶成神之路(2023 最新版)!

    前面我们学习:MySQL 打怪升级进阶成神之路(2023 最新版)!,然后我们就开始了 NoSQL 卷王之路.从第一篇文章开始,我们逐步详细介绍了 Redis 基础理论与安装配置.9 种数据类型和应用 ...

  9. mysql的CRUD操作实现

      插入语句(INSERT):一旦我们选择了要插入的字段,   我们就必须保证要插入的数值和选择的字段的个数,顺序,类型一致. 1:怎么插入一条数据: INSERT INTO 插入的表名称(列名1,列 ...

  10. GaussDB for DWS:内存自适应控制技术总结

    1.技术背景 在SQL语句复杂.处理数据量大的AP场景下,单个查询对内存的需求越来越大,多个语句的并发很容易将系统的内存吃满,造成内存不足的问题.为了应对这种问题,GaussDB for DWS引入了 ...