vue echarts vue

Easter79 等级 326 0 0
标签: vuedata

1、git地址

https://github.com/ecomfe/vue-echarts

2、使用

(1)安装

npm install vue-echarts --save-dev

(2)引入

import ECharts from 'vue-echarts'
import 'echarts'

components: { 'v-chart': ECharts }//引入组件

注意:

官方说明中引入是这样的:

import ECharts from 'vue-echarts/components/ECharts.vue'

但是会报错:options": "Error: Component series.pie not exists. Load it first.

vue echarts vue

(3)代码

<template>
<v-chart :options="polar"/>
</template>

<style>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

//data:
data: function () {
    let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
      polar: {
        title: {
          text: '极坐标双数值轴'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
  }

(4)一个比较有用的属性

  • auto-resize (默认值:false

    这个 prop 用来指定 ECharts 实例在组件根元素尺寸变化时是否需要自动进行重绘。

收藏
评论区

相关推荐

史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
全面解析vue中的nextTick
为什么要用nextTick请看如下一段代码new Vue({ el: 'app', data: { list: }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/a
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d
02、Vue.js
1、插值 ====     在Vue.js指令学习之前,先简单学习一下Vue插值     语法:_**{{ }}**_,将vue 实例中的数据 写入到页面对应的位置。下面代码中hello、msg、num等均是在vue的data中定义的变量。 1.1 文本插值 -------- <div>{{hello}}<div> 1.2 HTML 标签插
Vite使Vue CLI过时了吗?
![](https://oscimg.oschina.net/oscnet/b9aed6aa-9d14-4fd3-82b8-e1724221ee71.jpg) **文末福利资源更新** Vue生态系统中有一个名为Vite的新构建工具,它的开发服务器比Vue CLI快10-100倍。 这是否意味着Vue CLI已经过时了?在本文中,我将比较这两种构
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; #设置中文 import moment from 'm
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue CLI 2.x搭建vue,目录最全分析
一、vue-cli介绍 =========== vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 ============== 安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用): cnpm install -g vue-cli 更新: cnpm update
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Vue+Spring Boot简单用户登录Demo
1 概述 ==== 前后端分离的一个简单用户登录`Demo`。 2 技术栈 ===== * `Vue` * `BootstrapVue` * `Kotlin` * `Spring Boot` * `MyBatis Plus` 3 前端 ==== 3.1 创建工程 -------- 使用`vue-cli`创建,没安装的可以先安装
vue echarts vue
1、git地址 [https://github.com/ecomfe/vue-echarts](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fecomfe%2Fvue-echarts) 2、使用 (1)安装 npm install vue-echa
vue常见面试题
1. 有使用过vue吗?说说你对vue的理解?2. 说说你对SPA单页面的理解,它的优缺点分别是什么?如何实现SPA应用呢?3. 什么是双向绑定?原理是什么?4. 请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?5. Vue组件之间的通信方式都有哪些?6. vshow和vif有什么区别?使用场景分别是什
常用知识整理
Javascript 判断对象是否为空jsObject.keys(this.modelCode).length 0 Vue 强制刷新Vue组件有时候数据更新的时候,例如搜索或者重置的场景,echarts图标不更新,主要是因为组件没更新,这个时候我需要强制刷新 vuedata() return PreKey: 0 methods: search()