echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式
Echars vue封装 ，曲线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echars vue</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>
<!-- aph echars-bar begin -->
<template id="echars-bar">
<div :id="domId" style="height: 100%;width:100%;overflow: hidden;"></div>
</template>
<script>
const getBarOpation = (arrX = [], arrY = [], markLine = {}) => {
var max;
try {
let targLineY = markLine.data[].yAxis
let arrYMax = Math.max.apply(null, arrY) ||
let tempMax = targLineY > arrYMax ? targLineY : arrYMax
max = isNaN(tempMax) ? undefined : tempMax
} catch (e) {}
return {
grid: {
left: ,
top: ,
bottom: ,
right:
},
xAxis: {
type: 'category',
axisTick: { // 坐标轴 刻度线
show: false,
},
axisLine: { // 坐标轴 主干线
lineStyle: {
color: '#CCCECD'
}
},
axisLabel: { // 坐标轴 文字
color: "#1B2526",
fontSize:
},
data: arrX,
},
yAxis: {
splitNumber:,
type: 'value',
max,
axisTick: { // 坐标轴 刻度线
show: false,
},
axisLine:{ // 坐标轴 主干线
show:false
},
axisLabel: { // 坐标轴 文字
color: "#1B2526",
fontSize:
},
splitLine: { // 背景网格线
show: true,
lineStyle: {
color: '#F6F7F8',
}
},
},
tooltip: { // 鼠标hover 浮框
trigger: 'axis',
formatter: function (params) {
param = params[];
return `${param.axisValue} ${param.value}`
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
lineStyle:{
color: '#7FDFB5'
},
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
series: [{// 数据内容主体
data: arrY,
type:'bar',
markLine,
itemStyle: {// 曲线上的拐点
color: '#00BF6C',
normal: {
color: new echarts.graphic.LinearGradient(, , , , [{
offset: ,
color: '#ABEEDC'
}, {
offset: ,
color: '#00BF6C'
}])
}
},
barWidth: '24px' // 柱形 宽度
}]
}
}
Vue.component('echarsBar', {
template: '#echars-bar',
props: {
x: {
default: []
},
y: {
default: []
},
markLine: {
default() {
return {}
}
}
},
watch: {
y: function (newVal) {
this.initDome()
}
},
data() {
return {
domId: 'echars' + Math.random()
}
},
created(){
this.initDome()
},
methods: {
initDome() {
var time = setInterval(() => {
let dom = document.getElementById(this.domId)
if (dom) {
clearInterval(time)
} else {
return
}
let myChart = echarts.init(dom);
myChart.setOption(getBarOpation(this.x, this.y, this.markLine), true);
}, );
}
}
})
</script>
<!-- aph echars-bar end -->
<!-- aph echars begin -->
<template id="mc-echars">
<div :id="domId" style="height: 100%;width:100%;overflow: hidden;">
</div>
</template>
<script>
const getOpation = (arrX = [], arrY = [], markLine = {}) => {
var max;
try{
let targLineY = markLine.data[].yAxis
let arrYMax = Math.max.apply(null, arrY)||
let tempMax = targLineY > arrYMax ? targLineY: arrYMax
max = isNaN(tempMax) ? undefined : tempMax
}catch(e){}
return {
grid: {
left: ,
top: ,
bottom: ,
right:
},
xAxis: {
type: 'category',
axisTick: { // 坐标轴 刻度线
show: false,
},
axisLine: { // 坐标轴 主干线
lineStyle: {
color: '#CCCECD'
}
},
axisLabel: { // 坐标轴 文字
color: "#1B2526",
fontSize:
},
data: arrX,
},
yAxis: {
type: 'value',
max,
splitNumber: ,
axisTick: { // 坐标轴 刻度线
show: false,
},
axisLine: { // 坐标轴 主干线
show: false
},
axisLabel: { // 坐标轴 文字
color: "#1B2526",
fontSize:
},
splitLine: { // 背景网格线
show: true,
lineStyle: {
color: '#F6F7F8',
}
},
},
tooltip: { // 鼠标hover 浮框
trigger: 'axis',
formatter: function (params) {
param = params[];
return `${param.axisValue} ${param.value}`
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
lineStyle: {
color: '#7FDFB5'
},
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
series: [{// 数据内容主体
data: arrY,
type:'line',
markLine,
lineStyle: { // 曲线
color: '#00BF6C'
},
itemStyle: {// 曲线上的拐点
color: '#00BF6C'
},
areaStyle: {// 曲线下区域
normal: {
color: new echarts.graphic.LinearGradient(, , , , [{
offset: ,
color: '#00BF6C'
}, {
offset: ,
color: '#effcf6'
}])
}
}
}]
}
}
Vue.component('mcEchars', {
template: '#mc-echars',
props: {
x: {
default: []
},
y: {
default: []
},
markLine: {
default() {
return {}
}
}
},
watch: {
y: function (newVal) {
this.initDome()
}
},
created(){
this.initDome()
},
data() {
return {
domId: 'echars' + Math.random()
}
},
methods: {
initDome() {
var time = setInterval(() => {
let dom = document.getElementById(this.domId)
if (dom) {
clearInterval(time)
} else {
return
}
let myChart = echarts.init(dom);
let opt = getOpation(this.x, this.y, this.markLine)
myChart.setOption(opt, true);
}, );
}
}
})
</script>
<!-- aph echars end -->
<!-- 主件部分 main 主体 -->
<div id="app">
<div style="width: 800px;height:300px;overflow: hidden;">
<mc-echars :x="arrX" :y="arrY" :mark-line="lastPriceMarkLine" />
</div>
<div style="width: 800px;height:300px;overflow: hidden;">
<echars-bar :x="arrX" :y="arrY" :mark-line="lastPriceMarkLine" />
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data () {
return {
lastPriceMarkLine:{
data: [{
name: '',
lineStyle: {
color: '#00BF6C'
},
yAxis:
}]
},
arrX: this.initArr(),
arrY: this.initArr()
}
},
methods:{
initArr(){
return Array().fill().map(v => (Math.random() * ).toFixed())
}
}
})
</script>
</body>
</html>
echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式的更多相关文章
- vue 封装分页组件
分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- vue 的全局组件和 局部组件
vue组件局部与全局注册的区别 //局部注册 var mycomponent = new extend({ <!--Vue.extend()是Vue构造器的扩展,调用Vue.e ...
- vue中全局组件与局部组件的注册，以及动态绑定props值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue创建全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE注册全局组件和局部组件
全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg} ...
- vue自定义全局组件(自定义插件)
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...
- vue 注册全局组件
注册全局组件有啥好处呢? 提高代码的复用性:哪里需要写哪里,贼方便,就写一个标签:减少代码量:可以再配合slot一起使用,咦~~,舒服 为了让整个项目的可读性,我创建一个文件统一存放全局组件 1.创建 ...
随机推荐
- 【BZOJ4518】[SDOI2016] 征途（重拾斜率优化DP）
点此看题面 大致题意: 让你把一个长度为\(n\)的序列划分成\(m\)块,求每块数总和的最小方差乘\(m^2\)的值. 转化方差 首先方差显然是一个比较复杂的东西,需要进行一定转化. 设\(p_i\ ...
- Luogu P5416 [CTSC2016]时空旅行
第一次写线段树分治的题目,没想到是道这么毒的题233 首先发现题目里的\((x,y,z,c)\)就是在放屁,只有\((x,c)\)是有用的 因此我们可以把题意转化为,在某一个时间节点上,求出所有元素的 ...
- 【shell命令】$#、$*、$n分别表示的含义
$#.$*.$n分别表示的含义 1.[$0] 表示当前脚本的文件名: 2.[$n] 表示传递给脚本的第n个参数值(n为1~9): 3.[$*] 表示传递给脚本的所有参数(不包括脚本名称的参数): 4. ...
- postgresql in 优化
原sql: SELECT res_id_ori FROM wk_sheet A, wk_page b WHERE A .wk_sheet_id = b.wk_sheet_id ') ; 原sql执行计 ...
- 基于MicroPython:TPYBoard心率监测器
转载请注明文章来源,更多教程可自助参考docs.tpyboard.com,QQ技术交流群:157816561,公众号:MicroPython玩家汇 一.前言 这几年智能穿戴设备大火,尤其是手环类,从A ...
- 基于opencv 识别、定位二维码 （c++版）
前言 因工作需要,需要定位图片中的二维码:我遂查阅了相关资料,也学习了opencv开源库.通过一番努力,终于很好的实现了二维码定位.本文将讲解如何使用opencv定位二维码. 定位二维码不仅仅是为了识 ...
- Wine添加路径PATH办法
使用wine运行某些程序时,可能会提示某些DLL找不到,需要手动把这些DLL的路径添加进去.添加方法是:wine regedit打开注册表工具:添加一个键HKEY_CURRENT_USER/Envir ...
- Python破解js加密实例（有道在线翻译）
在爬虫爬取网站的时候,经常遇到一些反爬虫技术,比如: 加cookie,身份验证UserAgent 图形验证,还有很难破解的滑动验证 js签名验证,对传输数据进行加密处理 对于js加密经过加密传输的就是 ...
- Redis操作篇(二)
redis的发布与订阅,主从架构,哨兵架构,cluster集群 下载编译安装redis # 1. 下载redis wget http://download.redis.io/releases/redi ...
- docker 制作一个容器,并上传到仓库
创建镜像的三种方法 1.基于已有的镜像的容器创建 启动一个容器并修改容器: docker run -it ubuntu:latest /bin/bash touch test 提交创建新镜像并查看制作 ...