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.创建 ...
随机推荐
- 重构 改善既有代码的设计 (Martin Fowler 著)
第1章 重构, 第一个案例 1.1 起点 1.2 重构的第一步 1.3 分解并重组 statement() 1.4 运用多态取代与价格相关的条件逻辑 1.5 结语 第2章 重构原则 2.1 何谓重构 ...
- 基于Django的Rest Framework框架的版本控制
本文目录 一 作用 二 内置的版本控制类 三 局部使用 四 全局使用 五 示例 源码分析 回到目录 一 作用 用于版本的控制 回到目录 二 内置的版本控制类 from rest_framework.v ...
- FFmpeg 常用API
一.通用API 1.1 av_register_all() 初始化 libavformat 和注册所有的复用器.解复用器和协议处理器.如果不调用这个函数,可以调用下面的三个函数来选择支持的格式. 注册 ...
- 十、自定义ThreadPoolExecutor线程池
自定义ThreadPoolExecutor线程池 自定义线程池需要遵循的规则 [1]线程池大小的设置 1.计算密集型: 顾名思义就是应用需要非常多的CPU计算资源,在多核CPU时代,我们要让每一个CP ...
- conda基本知识
卸载anaconda: rm -rf anaconda3 (anaconda文件夹名称) conda删除虚拟环境 在终端执行:conda remove -n your_env_name(虚拟环境名称) ...
- Javascript 实现倒计时效果
代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- WPF 3D相机基本坐标简介
基本概念 WPF中3D空间基本坐标系是右手坐标系. WPF中3D空间的原点是(0,0,0) Position: 这个参数用来表示相机在空间内的坐标.参数是(X,Y,Z).当修改相机的这个参数时,这个坐 ...
- 使用AvalonEdit实现WPF的Lua编辑器
原文发布于:https://www.chenxublog.com/2019/07/14/use-avalonedit-make-wpf-lua-editor.html 由于LLCOM里面内置了Lua代 ...
- 用openresty（Lua）写一个获取YouTube直播状态的接口
文章原发布于:https://www.chenxublog.com/2019/08/29/openresty-get-youtube-live-api.html 之前在QQ机器人上面加了个虚拟主播开播 ...
- ASP.NET Core系列：依赖注入
1. 控制反转(IoC) 控制反转(Inversion of Control,IoC),是面向对象编程中的一种设计原则,用来降低代码之间的耦合度. 1.1 依赖倒置 依赖原则: (1)高层次的模块不应 ...