在main中

//import ElementUI from 'element-ui'
//import 'element-ui/lib/theme-chalk/index.css'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //将echarts存入Vue原型中
//Vue.use(ElementUI)
//components: { App ,ElementUI},

使用方式
<template>
<div class="hello">
<div id="chartmainline" style="width:800px;height:400px;"></div>
<div id="chartmainbar" style="width=800ox;height:400px;"></div>
</div>
</template>
<script>
export default({
data(){
return{
optionline:{
title:{
text:'ECharts 数据统计'
},
tooltip:{},
legend:{
data:['地区']
},
xAxis:{
data:["广东","深圳","上海","北京",'天津']
},
yAxis:{
 
},
series:[{
name:'工资k/月',
type:'line',
data:[15,20,13,10,8]
}]
},
optionbar:{
title:{
text:'ECharts 数据统计'
},
tooltip:{},
legend:{
data:['人口']
},
xAxis:{
data:["广东","深圳","上海","北京"]
},
yAxis:{
 
},
series:[{
name:'数量/千万',
type:'bar',
data:[15,20,13,10]
}]
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine: function(){
//基于准本好的DOM,初始化echarts实例
let chartmainline = this.$echarts.init(document.getElementById("chartmainline"));
let chartmainbar = this.$echarts.init(document.getElementById("chartmainbar"));
//绘制图表
chartmainline.setOption(this.optionline);
chartmainbar.setOption(this.optionbar);
}
}
})
//步骤解析
//先创建容器,存放图标数据
//接着获取ID,即vue中的dom树挂载
//所以,将其挂载到mounted中
//----
//方法中的drawLine是将后面一大串赋予给他,函数内是对象,
//this指向当前使用的对象,
//$echarts,加$的原因是main有写,
//其他的optionbar、optionline直接去echarts.baidu.com,复制自己喜欢的
</script>
<style scoped>
</style>

vue之使用echarts的更多相关文章

  1. 在vue中使用echarts图表

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

  2. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  3. vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined

    vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...

  4. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  5. vue 下实现 echarts 全国到省份的地图下钻

    vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo

  6. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  7. vue组件之echarts报表

    vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表. 1.饼状图 父组件: <MPie :datas="piedata"></ ...

  8. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

  9. vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)

    一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...

  10. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

随机推荐

  1. wp_list_categories()函数使用方法|wordpress函数

    wp_list_categories()函数是将分类以链接的形式罗列出来,点击分类的链接,就可以访问该分类页面.我们有时候会在一些页面调用分类链接,这时这个函数就可以用上了.注意: wp_list_c ...

  2. Kubernetes Pod的数据卷Volume

    概述 由于容器本身是非持久化的,因此需要解决在容器中运行应用程序遇到的一些问题.首先,当容器崩溃时,kubelet将重新启动容器,但是写入容器的文件将会丢失,容器将会以镜像的初始状态重新开始:第二,在 ...

  3. 洛谷 CF997A Convert to Ones

    洛谷 CF997A Convert to Ones 洛谷传送门 题意翻译 给你一个长度为 nn 的01串( n \leq 310^5n*≤3∗105 ),你有两种操作: 1.将一个子串翻转,花费 XX ...

  4. adb--环境安装

    前戏 我们在做Android自动化的时候,adb命令是必不可少的,比如我们要获取一个包名,使用adb往手机上安装软件,获取activity等等,都要用到adb命令.而模拟器在我们没有手机测试的时候,可 ...

  5. scp 文件 : /目录: Permission denied

    Q: A: 进入目录,用root登录,修改权限为777 再进行上传即可:

  6. 使用vue搭建应用六实现登录页

    1.js_cookie js-cookie插件是一个JS操作cookie的插件 安装 yarn add js-cookie 使用 写入 Cookies.set('name', 'value'); 读取 ...

  7. 屏蔽打开文件时提示“您尝试打开的文件xxx.xls的格式与文件扩展名指定的格式不一致。打开文件前请验证文件没有损坏且来源可信。是否立即打开该文 件?”

    修改注册表解决 1.打开注册表编辑器 方法:开始 -> 运行 -> 输入regedit -> 确定 2.找到注册表子项 HKEY_CURRENT_USER\Software\Micr ...

  8. Maven安装及配置(Linux系统)

    环境说明:Linux环境,CentOS 7版本. 第一步:下载Maven,地址:http://maven.apache.org/download.cgi 我这里下载的是[apache-maven-3. ...

  9. 【题解】Luogu P5470 [NOI2019]序列

    原题传送门 同步赛上我一开始想了个看似正确却漏洞百出的贪心:按\(a_i+b_i\)的和从大向小贪心 随便想想发现是假的,然后就写了个28pts的暴力dp 杜神后半程说这题就是个贪心,但我没时间写了 ...

  10. NOI2019游记

    本来打算写退役记的,结果退役失败了,所以 非常抱歉,这篇文章鸽了.