<template>
<div :style="{height:height,width:width}"></div>
</template> <script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts 主题 export default {
props: {
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '220px'
},
series: {
type: Array,
default: []
},
title: {
type: String,
default: ''
},
xAxisData: {
type: Array,
default: function () {
return []
}
}
},
data() {
return {
chart: null
};
},
mounted() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
watch: {
series: {
handler() {
this.initChart()
},
deep: true
},
xAxisData: {
handler() {
this.initChart()
},
deep: true
}
},
methods: {
initChart() {
if (this.chart !== null && this.chart !== '' && this.chart !== undefined) {
this.chart.dispose();
}
this.chart = echarts.init(this.$el, 'macarons'); this.chart.setOption({
title: {
text: "接口日分析",
textStyle: {
color: '#333',
fontSize: 16
}
},
legend: {
data:['接入数据量','下发数据量']
},
xAxis: {
data: this.xAxisData,
boundaryGap: false
},
grid: {
top: '15%',
left: 10,
right: 40,
bottom: 20,
containLabel: true
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']} // 柱状图和折线图切换
}
},
calculable : true,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
yAxis: {},
series:
[{
name: '接入数据量',
itemStyle: {
normal: {
areaStyle: {}
}
},
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165],
animationDuration: 2600,
animationEasing: 'cubicInOut'
},
{
name: '下发数据量',
smooth: true,
type: 'line',
itemStyle: {
normal: {
color: 'rgba(2, 197, 233, 0.2)',
lineStyle: {
color: 'rgba(2, 197, 233, 0.2)'
},
areaStyle: {
color: 'rgba(99,194,255, 0.6)'
}
}
},
data: [120, 82, 91, 154, 162, 140, 130],
animationDuration: 2000,
animationEasing: 'quadraticOut'
}]
})
}
}
}
</script>

效果图

关于Echarts表格插件的使用的更多相关文章

  1. JQuery表格插件DataTables 当前页合计功能

    公司项目表格插件使用的是DataTables,最近添加表合计功能,发现百度统一都是如图类型的代码,不知道是配置问题还是怎么了,在我的页面下根本不能用 var addd=0; $(document).r ...

  2. [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  3. Dynatable – 基于 HTML5 & jQuery 的交互表格插件

    Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现.Dynatable 的目的是提供一种简单的.可扩展的 API,能够轻松的浏览和操作大规模的 ...

  4. datatables 前端表格插件 增删改查功能

    官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet ...

  5. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  6. 自己写的表格插件autotable

    自己写的表格插件autotable 作者:田想兵,个人网址:http://www.lovewebgames.com 这个表格插件所完成的功能是:ajax请求数据,然后动态绑定到指定表格下,格式化,分页 ...

  7. 推荐几款jQuery表格插件

    平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...

  8. 好用的自适应表格插件-bootstrap table (支持固定表头)

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  9. jQuery 表格插件25

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

随机推荐

  1. weblogic 生产模式和开发模式的互相转换

    weblogic 生产模式和开发模式的互相转换 学习了:http://blog.csdn.net/qew110123/article/details/45845935 weblogic10.3生产模式 ...

  2. Ubuntu: Firefox is already running, but is not responding

    关于Ubuntu: Firefox is already running, but is not responding问题的解决办法 最近firefox总是开不开,出现“Firefox is alre ...

  3. POJ 2528 线段树

    坑: 这道题的坐标轴跟普通的坐标轴是不一样的-- 此题的坐标轴 标号是在中间的-- 线段树建树的时候就不用[l,mid][mid,r]了(这样是错的) 直接[l,mid][mid+1,r]就OK了 D ...

  4. POJ 3665 模拟

    按照题意模拟就OK了 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...

  5. 启动hadoop遇到的datanode启动不了

    从截图上看是datanode的clusterID 和 namenode的clusterID 不匹配. 解决办法: 根据日志中的路径,cd /hadoop/data/dfs/ 能看到 data和name ...

  6. 继承—Car

    编写一个Car类,具有final类型的属性品牌,具有功能drive: 定义其子类Aodi和Benchi,具有属性:价格.型号:具有功能:变速: 定义主类E,在其main方法中分别创建Aodi和Benc ...

  7. PostgreSQL Replication之第三章 理解即时恢复(1)

    到现在为止,您已经掌握了一定的理论.因为生活不仅由理论组成(它可能同样重要),是时候深入实际的工作了. 本章的目标是让您明白如何恢复数据到一个给定的时间点.当您的系统崩溃或者有人意外地删除了一个表,不 ...

  8. SQL--CLR概述

    Visual Studio 2005  支持在 SQL Server 2005 中开发.部署和调试托管代码.有一种新的项目类型(称为 SQL Server 项目),它允许开发人员在 SQL Serve ...

  9. python 自动广播机制 (broadcasting)

    一定要注意,执行 broadcast 的前提在于,两个 ndarray 执行的是 element-wise(按位加,按位减) 的运算,而不是矩阵乘法的运算,矩阵乘法运算时需要维度之间严格匹配.(且矩阵 ...

  10. 【Git 五】TortoiseGit中SSH密钥的配置方法

    注意:我用的 TortoiseGit 版本是 2.6 的. 一.找到安装目录下的 bin 目录 二.点击 puttygen.exe 三.点击 Generate 生成完毕之后,将 public key ...