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.创建 ...
随机推荐
- Go Modules使用教程（3分钟学会）
前言 随着Go 1.13发布,GOPROXY默认值proxy.golang.org在中国大陆不能被访问. 七牛云顺势推出goproxy.cn,以利于中国开发者更好使用Go Modules,它是非盈利性 ...
- ABP AOP 用例
介绍 在本文中,我将向您展示如何创建拦截器来实现AOP技术.我将使用ASP.NET Boilerplate(ABP)作为基础应用程序框架和Castle Windsor作为拦截库.这里描述的大多数技术对 ...
- ASP.NET Core 之 Identity 入门（转载）
原文地址:https://www.cnblogs.com/gongap/p/9504562.html 前言 在 ASP.NET Core 中,仍然沿用了 ASP.NET里面的 Identity 组件库 ...
- 使用Docker搭建HttpRunnerManager环境
建立一个HttpRunnerManager的环境需要Mysql,RabbitMQ服务,为简单部署,全部使用Docker 1. 在服务器建立Docker环境 2.建立Mysql容器 docker run ...
- Azure Automation (7) 执行Azure SQL Job
<Windows Azure Platform 系列文章目录> 之前Automation介绍的内容,是在ASM模式下自动化开关机. 本章将介绍如何在Automation中,设置开关机脚本, ...
- MySQL 合并字段及列转行
数据表: 列转行:利用max(case when then) max---聚合函数 取最大值 (case course when '语文' then score else 0 end) ---判断 ...
- vue v-html 富文本解析 空格，换行，图片大小问题
1.保留空格,换行属性 //保留换行空格问题 white-space: pre-wrap; 2.超出部分,强制换行,一般用于数字 //富文本换行 word-wrap: break-word; tabl ...
- LiveBOS Webservice传参类型为list数组
昨天有使用soap传输数据到Webservice,其中字符串类型的都已经传输成功,但是有几个参数传输失败,java服务器端收到的空值. 因为我是php的,然后接收端是java制作的,其中有几个参数是l ...
- 深入浅出《设计模式》之外观模式（C++）
前言 模式介绍 外观模式相比较之下比较简单,模式设计中定义是为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口是的这一子系统更加容易使用. 如果不理解呢,简单些说就是外观模式提 ...
- 解决 bash: vue command not found
背景 : win10 使用 yarn 全局 安装 vue/cli 后 yarn global add @vue/cli 提示安装成功 使用vue create 提示 bash: ...