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.创建 ...
随机推荐
- bcftools
beftools非常复杂,大概有20个命令,每个命令下面还有N多个参数 annotate .. edit VCF files, add or remove annotations call .. SN ...
- 教你用好 Javascript 数组
原文链接:https://juejin.im/post/5d9769b26fb9a04df26c1b89 作为 Javascript 的标准对象之一,数组是非常底层而且实用的数据结构.虽然结构很简单, ...
- 【BZOJ3171】[TJOI2013] 循环格（网络流）
点此看题面 大致题意: 给你一个循环格,每个格子有一个方向.问你至少修改多少格子,才能使从每个格子出发都能回到原格子. 建图 这是道网络流题目,主要就是考虑如何建图. 我们可以把每个点拆成两个点,一个 ...
- 重构与模式 (Joshua Kerievsky 著)
第1章 本书的写作缘由 第2章 重构 第3章 模式 第4章 代码坏味 第5章 模式导向的重构目录 第6章 创建 第7章 简化 第8章 泛化 第9章 保护 第10章 聚集操作 第11章 实用重构 参考文 ...
- 【目录】洛谷|CODEVS题解汇总
[动规]爱与愁的心痛 [动规]编辑距离 [动规]采药 [动规]创意吃鱼法 [动规]过河卒 [动规]开心的金明 [动规]旅行 [动规]骑士游历 [动规]数字三角形 [动规]最长连号 [动规]装箱问题 [ ...
- 纯CSS打造BiliBili样式博客主题
前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...
- mysql事务隔离级别与设置
mysql数据库,当且仅当引擎是InnoDB,才支持事务: 1.隔离级别 事务的隔离级别分为:未提交读(read uncommitted).已提交读(read committed).可重复读(repe ...
- Apache Maven 3.6.3配置安装
1.maven 3.5 下载地址:http://maven.apache.org/download.cgi 2.下载了解压到 3.配置环境变量 4.测试看是否安装成功 5.maven配置(全局配置,用 ...
- 【转】EF架构~为EF DbContext生成的实体添加注释（T5模板应用）
嗨,没法说,EF4的TT模版加上注释后,升级到EF5的TT模版后,注释就不通用了,所以,还得再研究一下,然后把操作方法再分享出来,没辙的微软! T4模版可能有些凌乱,这在T5模版里有了不错的改进,但我 ...
- JVM的监控工具之jps
jps的功能和ps命令相似:可列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在的类)名称以及这些进程的本地虚拟机唯一ID(Local Virtual Mach ...