vue echarts vue-echarts组件使用
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.
(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 echarts vue-echarts组件使用的更多相关文章
- Vue使用Echarts以及Echarts配置分享
一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- vue中使用echarts来绘制世界地图和中国地图
第一步,下载echarts cnpm install echarts --save-dev 第二步,在main.js中全局引入 //引入echarts import echarts from 'ech ...
- Vue怎么使用Echarts创建图表
摘要:在后台管理系统中,我们经常会遇到图表,比如说:柱形图,饼状图,折线图,雷达图等等,而用来写图表插件有很多,我这里主要介绍Echarts在项目里怎么使用,官网地址如下:https://echart ...
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- vue中添加echarts
方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖. cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...
- vue内使用echarts
18年下班年用的vue + echarts,现在才想起来总结,着实不敬业 线上的项目叫股往(http://rich.xchol.com/#/) 好了,进入正题: 首先,需要新建一个vue的项目,在vu ...
- vue学习【一】vue引用封装echarts并展示多个echarts图表
大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...
- vue.js使用echarts一分钟简单入门
图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vue.js框架下使用echa ...
- 在VUE中使用Echarts
第一步:下载echarts npm install echarts --save 第二步:在项目中main.js引入 import echarts from 'echarts' Vue.prototy ...
随机推荐
- 【lct】bzoj2002 [Hnoi2010]Bounce 弹飞绵羊
lct板子,此题主要有cut操作和link操作. #include<cstdio> #include<iostream> #include<cstring> #in ...
- 【最小割】BZOJ2039- [2009国家集训队]employ人员雇佣
[题目大意] 给定n个人,每个人有一个佣金,i和j如果同时被雇佣会产生2*E(i,j)的效益,i和j如果一个被雇佣一个不被雇佣会产生E(i,j)的亏损,求最大收益. [思路] 如果没有亏损,其实非常类 ...
- Spring Boot中Request method 'PUT' not supported
在项目中使用restful风格put提交时报错,是由于form表单中的th:href引起的(支持post提交),改为th:action即可
- Codeforces Round #301 (Div. 2) B. School Marks 构造/贪心
B. School Marks Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/540/probl ...
- 感觉比较好一些的vultr中文网
搜索一波vultr的中文网,发现很多,基本上都是靠活动以及一些SS的教程维持,全都是大同小异,感觉比较有可比性估计一下这个: https://www.thevultr.org/ 可以对比一些美国常用V ...
- IOS常用的第三方开发库
开发几个常用的开源类库及下载地址: 1.json json编码解码2.GTMBase64 base64编码解码3.TouchXML xml解析4.SFHFKeychainUtils 安全保存用户密码到 ...
- Maven编译代码的相关命令
第一.main目录下的主代码编写完毕后,使用Maven进行编译,在项目根目录下运行命令mvn clean compile进 行项目编译. 第二.test目录下的测试用例编写完毕之后就可以调 ...
- JAVA EE 博客实例
http://www.cnblogs.com/hoojo/category/276244.html
- 实施CMMI3的体会
公司从去年年底开始实施CMMI3,记得当初上培训课的时候,听着老师介绍过程管理,项目管理,工程过程,支持过程这四大类过程域的时候,全部门上下听得稀里糊涂,从未想到这个鬼东西还这么复杂,这么麻烦. 公司 ...
- eclipse安装Run-Jetty-Run插件,修改实时生效
http://marketplace.eclipse.org/content/run-jetty-run 1.直接拖拽到eclipse安装(7/8/9版本都安装) 2.以调试的方式启动jetty( ...