在vue中使用的Echarts的步骤
1、首先在项目中安装Echarts
npm install echarts -g --save //安装
2、在项目中引入Echarts(在main.js中引入)
import echarts from 'echarts' //引入Echarts, Vue.prototype.$echarts = echarts //定义为全局变量
3、使用并绘制简单表格(承载画布的div必须要定义大小width、height)
<template>
<!--
ref="myechart"定义该div也就是画布的名字,在this.$echarts.init(this.$refs.myechart) 图表初始化的时候使用
this.$refs.myechart 也可以替换为 document.getElementById('main') 或者 document.getElementByClassName('echart-box')
-->
<div class="HelloWorld echart-box" ref="myechart" id="main"></div>
</template>
<script> export default {
name:'HelloWorld',
data(){
return{
// 定义图表,各种参数
option:{
backgroundColor:"lightblue",
title:{
backgroundColor:"lightyellow",
show:true,
text:"测试练习",
textStyle:{
fontSize:,
fontWeight:,
color:'red',
},
subtext:'测试小标题',
subtextStyle:{
color:'green',
fontSize:,
fontWeight:
}
},
xAxis:{
type:"category",
data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日",]
},
yAxis:{
type:"value",
},
series:[
{
data:[,,,,,,],
type:"line"
},
{
data:[,,,,,,],
type:"line"
}
]
}
}
},
mounted:function(){
console.log(this.$echarts)
let myechart = this.$echarts.init(this.$refs.myechart) //初始化一个echarts
myechart.setOption(this.option) //setOption 用this.option中的数据开始作图 } }
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: ;
}
li {
display: inline-block;
margin: 10px;
}
a {
color: #42b983;
}
.HelloWorld{ //注意画布必须定义大小
width: 1000px;
height:600px;
background: #cce6f0;
margin: auto;
}
</style>
在vue中使用的Echarts的步骤的更多相关文章
- vue中如何使用echarts
在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新 主要是以下几步: echarts的option配置项放在在data(){}或者computed(){}中 在 ...
- 关于vue中如何配置echarts以及使用方法
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- vue中如何使用echarts,使用axios获取数据
1==>首先准备一个容器 <div id="echartContainer" style="width:400px; height:400px"&g ...
- vue中动态设置echarts画布大小
document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...
- vue中,基于echarts 地图实现一个人才回流的大数据展示效果
0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...
- vue中添加echarts
方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖. cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...
- Vue中echarts的基本用法
前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...
- vue中引入babel步骤
vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
随机推荐
- iOS保持流畅有哪些秘诀? 除了黑科技GPU还有这些重要原因 期待安卓8.0流畅度逆袭
经常有人提起iPhone使用起来要比Android手机流畅,现在谈谈为什么iOS使用中会让人觉得更加流畅一些.一方面iPhone的顶级硬件为iOS的流畅打好了基础,另一方面,专一定制的系统是保证体验的 ...
- Prototype-based programming
Prototype-based programming is a style of object-oriented programming in which behaviour reuse (know ...
- Visual Studio icon 含义
图片摘自:https://msdn.microsoft.com/en-us/library/y47ychfe.aspx
- ZOJ 3203 Light Bulb( 三分求极值 )
链接:传送门 题意: 求影子长度 L 的最大值 思路:如果 x = 0 ,即影子到达右下角时,如果人继续向后走,那么影子一定是缩短的,所以不考虑这种情况.根据图中的辅助线外加相似三角形定理可以得到 L ...
- HDU-2844 Coins 多重背包 物品数量二进制优化
题目链接:https://cn.vjudge.net/problem/HDU-2844 题意 给你一些不同价值和一定数量n的硬币. 求用这些硬币可以组合成价值在[1 , m]之间的有多少. 思路 多重 ...
- java实现随机数的生成
一,课程中的动手动脑的问题 1,编写一个方法,使用以上算法生成指定数目的随机整数. public void suiJiShu(){ Scanner input=new Scanner(System.i ...
- 2、Koa2 路由+cookie
一.koa2 原生路由的实现 const Koa = require('koa'); const app = new Koa(); const fs = require('fs'); function ...
- ORA-01795: 列表中的最大表达式数为 1000
系统报出一SQL异常,内容如下: java.sql.SQLException: ORA-01795: maximum number of expressions in a list is 1000 找 ...
- HDU 2421
由算术基本定理N=p1^e1*p2^e2....ps^es,可知一个素的因子个数为(e1+1)*(e2+1)*...*(es+1). 而N的一人因子必定也有n=p1^k1*p2^k2....*ps^k ...
- Microsoft Updateclient更新
大家好, 微软Microsoft Update产品组官方博客于昨天宣布了有关最新的Windows Updateclient更新的消息.依据这则博客.微软从当日開始逐渐向全部Windows 7, ...