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的步骤的更多相关文章

  1. vue中如何使用echarts

    在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新 主要是以下几步: echarts的option配置项放在在data(){}或者computed(){}中 在 ...

  2. 关于vue中如何配置echarts以及使用方法

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  3. vue中如何使用echarts,使用axios获取数据

    1==>首先准备一个容器 <div id="echartContainer" style="width:400px; height:400px"&g ...

  4. vue中动态设置echarts画布大小

    document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...

  5. vue中,基于echarts 地图实现一个人才回流的大数据展示效果

    0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...

  6. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

  7. Vue中echarts的基本用法

    前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...

  8. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  9. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

随机推荐

  1. VS运行程序发生栈溢出的分析

    这两天时间都浪费在解决各种栈溢出了,没想到最后各个部件合在一起的时候会出现这么多的问题,这其实是我第一次解决栈溢出问题,很认真的查了查资料,找了几种解决方法,但是作用都不大,拆了东墙补西墙,虽然知道及 ...

  2. Debian下签名无法验证

    又收集到的新方法 gpg --keyserver  subkeys.pgp.net --recv-keys AED4B06F473041FA  && apt-key add /root ...

  3. 前端精选文摘:css之BFC 神奇背后的原理(转载)

    一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  4. BZOJ 3262 陌上花开 (三维偏序CDQ+树状数组)

    题目大意: 题面传送门 三维偏序裸题 首先,把三元组关于$a_{i}$排序 然后开始$CDQ$分治,回溯后按$b_{i}$排序 现在要处理左侧对右侧的影响了,显然现在左侧三元组的$a_{i}$都小于等 ...

  5. linux rar 解压忽略带密码压缩包

    #解压忽略密码 rar x -p- file.rar #解压忽略子目录 rar x -ep file.rar

  6. 监控SQLserver计数器

  7. C#-常用对象-思维导图

    C#-常用对象-思维导图 链接:http://pan.baidu.com/s/1jHNgS78 密码:3i74 如有错误,请告知我!

  8. 一个软件实现的Linux看门狗—soft_wdt

    soft_wdt(下面简称本软件)是一个软件实现的Linux看门狗. 本软件是一款开源.免费软件. 下载地址: https://github.com/sunmingbao/soft-wdt/archi ...

  9. JAVA设计模式之【适配器模式】

    适配器模式 当不需要实现一个接口所提供的所有方法时,可先设计一个抽象类该接口,并为接口每个方法提供一个默认实现 该抽象类的子类可以选择性地覆盖父类的某些方法来实现需求 角色 适配者接口 通常在接口中声 ...

  10. 高斯滤波及高斯卷积核C++实现

    高斯滤波是一种线性平滑滤波,适用于消除高斯噪声,在图像处理的降噪.平滑中应用较多,特别是对抑制或消除服从正态分布的噪声非常有效. 高斯滤波的过程其实就是对整幅图像进行加权平均操作的过程.滤波后图像上每 ...