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.创建 ...
随机推荐
- luoguP4069 [SDOI2016]游戏
题意 显然书剖套李超树. 考虑怎么算函数值: 设\((x,y)\)的\(lca\)为\(z\),我们插一条斜率为\(k\),截距为\(b\)的线段. \((x,z)\)上的点\(u\): \(f(u) ...
- 安装oracle 11g及初次链接使用, 解锁及常用命令
1. 安装方法参考原创: https://blog.csdn.net/projectNo/article/details/76533921 2.初次链接数据库时,注意以下: 1. window + r ...
- 海边拾贝-C-面试篇
优秀的面试资料,不定期会更新: Leetcode上面别人整理的若干面试资料: https://github.com/huihut/interview 剑指offer:https://blog.csdn ...
- SpringDataRedis简单入门介绍
1:问题引入 在实际开发中,开发的每一个项目,每天都有大量的人访问,对数据库造成很大的访问压力,甚至是瘫痪.那如何解决呢?我们通常的做法有两种:一种是数据缓存.一种是网页静态化.我们今天讨论第一种解决 ...
- SpringBoot 整合RabbitMQ错误记录
1. 控制台报错:Exception in thread "main" java.io.IOException…… Caused by: com.rabbitmq.client.S ...
- vue的双向绑定原理浅析与简单实现
很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...
- C# 中如何深度复制某一个类型（备注：可能有 N 个类型需要复制）的对象？
如题,针对某一个特定的类型,深度复制,没有那么难,最起码可以手动赋值,但如果要针对 N 多类型深度复制,最简单的方法,是把这个对象序列化成 XML.JSON 或其它可以序列化的载体,然后再将这个载体反 ...
- Entity Framework 6 中如何获取 EntityTypeConfiguration 的 Edm 信息？（三）
接着上一篇,我们继续来优化. 直接贴代码了: LambdaHelper.cs using System; using System.Collections.Generic; using System. ...
- FusionInsight大数据开发--HBase应用开发
HBase应用开发 HBase的定义 HBase是一个高可靠.高性能.面向列.可伸缩的分布式存储系统. 适合于存储大表数据,可以达到实时级别. 利用Hadoop HDFS 作为其文件存储系统,提供实时 ...
- virtualbox 配置记录
virtualbox 网络模式 Host-only Internal Bridged NAT 之间的区别 host-only模式,host与vm一起在内部网络 Internal模式,仅vm在内部网络 ...