在Vue-cli项目中使用echarts

该示例使用 vue-cli 脚手架搭建

安装echarts依赖

npm install echarts -S
  • 1
  • 1

或者使用国内的淘宝镜像:

  • 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 1
  • 1
  • 使用
cnpm install echarts -S
  • 1
  • 1

创建图表

全局引入

  • main.js
// 引入echarts
import echarts from 'echarts'Vue.prototype.$echarts = echarts 
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4
  • Hello.vue
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
  • 1
  • 1
export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted(){this.drawLine();},methods: {drawLine(){// 基于准备好的dom,初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: { text: '在Vue中使用echarts' },tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});}}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

注意: 这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用

按需引入

上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入。

  • Hello.vue
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {name: 'hello',data() {return {msg: 'Welcome to Your Vue.js App'}},mounted() {this.drawLine();},methods: {drawLine() {// 基于准备好的dom,初始化echarts实例let myChart = echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: { text: 'ECharts 入门示例' },tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});}}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

这里之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全。

页面展示

这里写图片描述

参考文章

  • 使用 Echarts 创建图表
  • Vue 2.x 实战之后台管理系统开发
  • echarts图表自适应问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java的模板文件配置

Java的Mappers文件配置 <?xml version"1.0" encoding"UTF-8" ?><!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace"com.qfedu.…

Python爬虫学习二

1、selenium自动测试工具 2、主要使用selenium的目的是跳过登录验证3、下载驱动器下载请求库from selenium import webdriver import time#1、 直接在script文件夹中找驱动 driverwebdriver.Chrome() time.sleep(5) driver.close()#2、找到驱动路径 #webdriver.Chrome(rD:\Pyth…

通过GitHub Pages创建个人主页

登陆github,创建新仓库&#xff0c;写入名字, 这里要以github.io做后缀, 不然创建出来的不是GitHub Pages 打开终端, cd到自己想要的文件夹后clone到本地 git clone https://github.com/username/username.github.io 进入这个项目文件夹 cd username.github.io 把写好HTML项目拷…

Spring IOC 配置文件模板

基于XML的普通设置 <?xml version1.0 encodingUTF-8 ?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns:context"http://www.springframework.org/schema/contex…

validate+jquery+ajax表单验证

1.案例 1.1 Html form表单内容 <form class"cForm" id"cForm" method"post" action""> <p> <label for"user">用户名</label> <input id"user" name"user" required minlen…

Html5做webapp中界面适配的问题总结

做一款软件首先是要做出相应的界面&#xff0c;然而对于手机软件开发者来说&#xff0c;大小各异的手机屏幕却给我们带来了不少的麻烦。HTML5技术在大家的心中要比传统的Android/iOS/wp简单的多&#xff0c;因为它的适配性和平台跨越方面比较出色。在外看来却不是那样的&#x…

设置Maven下载镜像源(直接替换其中的 settings.xml 内容即可)

<?xml version"1.0" encoding"UTF-8"?> <settings xmlns"http://maven.apache.org/SETTINGS/1.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/SETTINGS/1.0.…

P1576 最小花费

----------------------------------- 这道题就是图论最短路&#xff0c;但是我们要改一下一些细节 比如说&#xff0c;因为这是算汇率&#xff0c;我们的初始化就要是0 我们还要改一改松弛操作 ----------------------------------- 还有&#xff0c;题目上给的是汇率&#xf…

css hack技术整理

做前端多年&#xff0c;虽然不是经常需要hack&#xff0c;但是我们经常会遇到各浏览器表现不一致的情况。基于此&#xff0c;某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的&#xff0c;要知道一名好的前端&#xff0c;…

Hanoi双塔问题

Hanoi双塔问题 题目描述 给定A,B,C三根足够长的细柱&#xff0c;在A柱上放有2n个中间有空的圆盘&#xff0c;共有n个不同的尺寸&#xff0c;每个尺寸都有两个相同的圆盘&#xff0c;注意这两个圆盘是不加区分的(下图为n3的情形&#xff09;。现要将 这些国盘移到C柱上&#xff…

vue中config/index.js:配置的详细理解

当我们需要和后台分离部署的时候&#xff0c;必须配置config/index.js: 用vue-cli 自动构建的目录里面 &#xff08;环境变量及其基本变量的配置&#xff09; 123456789101112131415var path require(path)module.exports {build: {index: path.resolve(__dirname, dist/ind…

uni-app吸顶固定样式

<template><view class"full"><view class"sticky-box"><!-- 搜索 --><uni-search-bar class"unisearchbar" radius"5" placeholder"请输入搜索关键词" clearButton"auto" bgColor&qu…

Django(模板语言-自定义filter和simple_tag)

filter过滤器的主要形式&#xff1a;变量|函数,意思是将变量交给函数处理&#xff0c;而自定义filter就是自己定义函数&#xff0c;因为用到已有的很少。 1.在当前app中创建templatetags模块(包&#xff1a;带__init__.py)&#xff08;必须的&#xff09; 2.在templatetags中创…

uni-app商品分类

<template><view class"classify"><!-- 分类部分 --><view class"cate-left"><view :class"[cate-item,activeIndexindex?active:]" v-for"(item,index) in cateList" :key"index"click"c…

10分钟看懂浏览器的渲染过程及优化

一、浏览器概述 目前的主流浏览器有5个&#xff1a;Internet Explorer、Firefox、Safari、Chrome和Opera浏览器。根据 StatCounter 浏览器统计数据&#xff0c;目前&#xff08;截止2019 年 5 月&#xff09;Firefox、Safari 和 Chrome 浏览器的总市场占有率将近 83.66%。由此可…

浅谈 Vue 项目优化

前几天看到大家说 vue 项目越大越难优化&#xff0c;带来很多痛苦&#xff0c;这是避免不了的&#xff0c;问题终究要解决&#xff0c;框架的性能是没有问题的&#xff0c;各大测试网站都有相关数据。下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的&#xff0c;…

uni-app微信小程序一键登录获取权限功能

<button class"bottom size_30" type"primary" lang"zh_CN" click"getUserInfo">一键登录</button>//第一授权获取用户信息》按钮触发getUserInfo() {// 展示加载框uni.showLoading({title: 加载中,});uni.getUserProfile…

第九章 结构体与共用体

姓名&#xff1a;吕家浩 实验地点&#xff1a;教学楼514教室 实验时间&#xff1a;4月30日 一、本章要点 1.通过实验理解结构体和共用体的数据结构2.结构体、共用体中数组的使用及变量的赋值3.结构体和共用体定义时的嵌套使用&#xff08;嵌套使用的结构体必须先定义&…

H5-localStorage数据存储总结

一、什么是localStorage、sessionStorage 在HTML5中&#xff0c;新加入了一个localStorage特性&#xff0c;这个特性主要是用来作为本地存储来使用的&#xff0c;解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)&#xff0c;localStorage中一般浏览器支持的…

正则校验与时间格式化

// 日期回显 export function formatTime(data&#xff0c;fametYYYY-MM-DD HH:MMM:SS) {if(famet YYYY-MM-DD HH:MMM:SS){const time new Date(data)const year time.getFullYear()const month time.getMonth() 1const day time.getDate()const hour time.getHours()co…