<!-- 为 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. stdu1309(不老的传说)

    题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index/problemdetail/pid/1309.html 不老的传说问题 Ti ...

  2. 简单理解Spring之IOC和AOP及代码示例

    Spring是一个开源框架,主要实现两件事,IOC(控制反转)和AOP(面向切面编程). IOC 控制反转,也可以称为依赖倒置. 所谓依赖,从程序的角度看,就是比如A要调用B的方法,那么A就依赖于B, ...

  3. 激活函数,Batch Normalization和Dropout

    神经网络中还有一些激活函数,池化函数,正则化和归一化函数等.需要详细看看,啃一啃吧.. 1. 激活函数 1.1 激活函数作用 在生物的神经传导中,神经元接受多个神经的输入电位,当电位超过一定值时,该神 ...

  4. PowerDesigner 使用小结

    这里总结一篇关于数据建模工具 PowerDesigner 的使用小技巧,下面列出的两个应用场景要在网上现找解决方案的话还真不一定好找,所以选择将这两个棘手的问题先记下来. 1. PDM 中表间关系出现 ...

  5. MIPS 指令集(共31条)

    MIPS 指令集(共31条) MIPS 指令集(共31条) 助记符 指令格式 示例 示例含义 操作及其解释 Bit # 31..26 25..21 20..16 15..11 10..6 5..0 R ...

  6. OpenSL ES: OpenSL ES 简介

    1. OpenSL ES 是什么 OpenSL ES (Open Sound Library for Embedded Systems)是无授权费.跨平台.针对嵌入式系统精心优化的硬件音频加速API. ...

  7. opencv常见示例

    1.批量转换灰度图并保存 #include <iostream> #include <opencv2/opencv.hpp> #include <string> u ...

  8. android 上下滑动标题栏和状态栏改变颜色实现

    import android.content.Context; import android.util.AttributeSet; import android.widget.ScrollView; ...

  9. python 对xls写入信息

    只能新创建xls # coding=utf-8import xlwt writebook = xlwt.Workbook()                #打开excel test= writebo ...

  10. 反查BOM, 找出它的上阶

    转自:https://blog.csdn.net/zhongguomao/article/details/80172441 查询物料的上阶方法有三: 1. CS15  可直接查出物料的上阶直至顶阶物料 ...