<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="box" style="width: 600px;height:400px;"></div>   //如果需要改背景色直接在这里修改便可以
 
export default {
data() {
return {
//调用了eacharts官方实例的 ,这里写option的属性
// 指定图表的配置项和数据
option: {
backgroundColor: "#2c343c",
title: {
text: "Customized Pie",
left: "center",
top: 20,
textStyle: {
color: "#ccc"
}
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "50%"],
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 274, name: "联盟广告" },
{ value: 235, name: "视频广告" },
{ value: 400, name: "搜索引擎" }
].sort(function(a, b) {
return a.value - b.value;
}),
roseType: "radius",
label: {
normal: {
textStyle: {
color: "rgba(255, 255, 255, 0.3)"
}
}
},
labelLine: {
normal: {
lineStyle: {
color: "rgba(255, 255, 255, 0.3)"
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: "#c23531",
shadowBlur: 200,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
animationType: "scale",
animationEasing: "elasticOut",
animationDelay: function(idx) {
return Math.random() * 200;
}
}
]
},
};
},
methods: {
customized() {
//方法里面第一步// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('box'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(this.option);
}
},
mounted() {
// 注意:一定需要在mounted中调用才行
this.customized();
}
};
 
 
最后在main.js入口文件中 全局引入挂载
// 引入echarts
// import echarts from 'echarts'
//挂载到实例对象上
// Vue.prototype.$echarts =echarts
 
 
 
==================================

需要加下面两句  这个是main全局引入的
import echarts from 'echarts'
Vue.use(echarts)//全局使用echarts
 
<div class="echartr">
<!-- //右边环形图 -->
<div class="bargraph" id="barg2"></div>
</div>
 
let bargraph = echarts.init(document.getElementById('barg2'));
bargraph.setOption(this.option3);
 
=======================================
有时候需要加上这些代码 在页面尺寸发生改变时 随着页面改变而变大或小
mounted() {
let _this = this;
_this.$nextTick(() => {
let bargraph0 = echarts.init(_this.$refs.barg0);
bargraph0.setOption(_this.option0);
window.addEventListener("resize", bargraph0.resize);
let bargraph = echarts.init(_this.$refs.barg);
bargraph.setOption(_this.option2);
window.addEventListener("resize", bargraph.resize);
let bargraph2 = echarts.init(_this.$refs.barg2);
bargraph2.setOption(_this.option3);
window.addEventListener("resize", bargraph2.resize);
});
}

echarts的基本使用以及如何使用官方实例的方法的更多相关文章

  1. 实战Django:官方实例Part6

    我们终于迎来了官方实例的最后一个Part.在这一节中,舍得要向大家介绍Django的静态文件管理. 现在,我们要往这个投票应用里面添加一个CSS样式表和一张图片. 一个完整的网页文件,除了html文档 ...

  2. 对《[Unity官方实例教程 秘密行动] Unity官方教程《秘密行动》(十二) 角色移动》的一些笔记和个人补充,解决角色在地形上移动时穿透问题。

    这里素材全是网上找的. 教程看这里: [Unity官方实例教程 秘密行动] Unity官方教程<秘密行动>(九) 角色初始设定 一.模型设置: 1.首先设置模型的动作无限循环. 不设置的话 ...

  3. Android实例-Delphi开发蓝牙官方实例解析(XE10+小米2+小米5)

    相关资料:1.http://blog.csdn.net/laorenshen/article/details/411498032.http://www.cnblogs.com/findumars/p/ ...

  4. [置顶] IOS7状态栏StatusBar官方标准适配方法

    IOS7状态栏StatusBar官方标准适配方法 hello,大家好,ios7正式版已经发布,相信大家都在以各种方式来适配ios7. 如果你已经下载了xcode5,正准备使用,你会发现各种布局的改变. ...

  5. 微信应用号开发知识贮备之altjs官方实例初探

    天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生.从获得微信应用号邀请的业内人士发出来的一张开发工具源码截图可以看到,reacjs及其相应的FLUX框架altjs很有可能会成 ...

  6. 源于《Unity官方实例教程 “Space Shooter”》思路分析及相应扩展

    教程来源于:Unity官方实例教程 Space Shooter(一)-(五)       http://www.jianshu.com/p/8cc3a2109d3b 一.经验总结 教程中步骤清晰,并且 ...

  7. Echarts中太阳图(Sunburst)的实例

    Echarts中太阳图(Sunburst)的实例 目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下: var mapData = [ ...

  8. 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  9. 微软官方实例 RazorPagesMovie 在 asp.net core 2.1 版本下的实战

    微软官方实例 RazorPagesMovie 在 asp.net core 2.1 版本下的实战 友情提示: 操作系统: MacOS 10.13.5 dotnet core: version 2.1. ...

随机推荐

  1. linux服务器执行cd和ls等等命令都有卡顿现象问题记录

    一 执行命令free -gh 1. free 命令显示系统内存的使用情况,包括物理内存.交换内存(swap)和内核缓冲区内存. 2. -g 表示以G单位显示, -m以兆单位显示,    h会在数字后面 ...

  2. beyond compare秘钥被禁

    错误提示:This license key has been revoked xxxxx 即: Windows 系统: 解决方法: 删除以下目录中的所有文件即可. C:\Users\Administr ...

  3. IOS开发环境

    当我们需要帮一些人学习IOS的时候,可以翻阅下这篇文章,我有个同学对IOS开发不太了解,用语言描述该怎么做的时候显得不够具体,或者全部需要我帮忙操作,又会占用我们的时间,如果每个人都这么要求的话,那么 ...

  4. 火狐调试工具-DevTools

    狐调试工具 - DevTools 咱们做写js 代码的时候,遇到的一个最大的问题就是调试问题,很多开发者在写 js 代码的时候,经常都非常痛苦.但是我们如果掌握好相应的调试工具,那么就可以比较游刃有余 ...

  5. JavaWeb基础知识

    一.WEB基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web ...

  6. THINKPHP扩展PHPEXCEL,PHP7.2以上版本无法导出Excel

     THINKPHP扩展PHPEXCEL与PHP7.3高版本兼容问题 框架:THINKPHP5,PHPEXCEL版本:1.81 无法导出EXCEL原因为Shared/OLE.php第290行使用cont ...

  7. Nginx配置信息损毁又无备份时如何恢复

    worker_processes *; 本文介绍在Nginx配置信息出现问题后,在没有备份的情况下,如何利用Nginx进程的虚拟内存恢复配置信息. 问题背景 假设 /etc/nginx/site-av ...

  8. libcurl在mac上编译

    wget http://ftp.gnu.org/gnu/m4/m4-1.4.17.tar.gz wget http://ftp.gnu.org/gnu/autoconf/autoconf-2.69.t ...

  9. OneDrive

    OneDrive https://onedrive.live.com

  10. 小数组的读写和带Buffer的读写哪个快

    定义小数组如果是8192个字节大小和Buffered比较的话 定义小数组会略胜一筹,因为读和写操作的是同一个数组 而Buffered操作的是两个数组