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[0].yAxis let arrYMax = Math.max.apply(null, arrY) || 0 let tempMax = targLineY > arrYMax ? targLineY : arrYMax max = isNaN(tempMax) ? undefined : tempMax } catch (e) {} return { grid: { left: 47, top: 30, bottom: 20, right: 42 }, xAxis: { type: 'category', axisTick: { // 坐标轴 刻度线 show: false, }, axisLine: { // 坐标轴 主干线 lineStyle: { color: '#CCCECD' } }, axisLabel: { // 坐标轴 文字 color: "#1B2526", fontSize: 12 }, data: arrX, }, yAxis: { splitNumber:4, type: 'value', max, axisTick: { // 坐标轴 刻度线 show: false, }, axisLine:{ // 坐标轴 主干线 show:false }, axisLabel: { // 坐标轴 文字 color: "#1B2526", fontSize: 12 }, splitLine: { // 背景网格线 show: true, lineStyle: { color: '#F6F7F8', } }, }, tooltip: { // 鼠标hover 浮框 trigger: 'axis', formatter: function (params) { param = params[0]; 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(0, 0, 0, 1, [{ offset: 0, color: '#ABEEDC' }, { offset: 1, 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); }, 100); } } }) </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[0].yAxis let arrYMax = Math.max.apply(null, arrY)||0 let tempMax = targLineY > arrYMax ? targLineY: arrYMax max = isNaN(tempMax) ? undefined : tempMax }catch(e){} return { grid: { left: 47, top: 30, bottom: 20, right: 42 }, xAxis: { type: 'category', axisTick: { // 坐标轴 刻度线 show: false, }, axisLine: { // 坐标轴 主干线 lineStyle: { color: '#CCCECD' } }, axisLabel: { // 坐标轴 文字 color: "#1B2526", fontSize: 12 }, data: arrX, }, yAxis: { type: 'value', max, splitNumber: 4, axisTick: { // 坐标轴 刻度线 show: false, }, axisLine: { // 坐标轴 主干线 show: false }, axisLabel: { // 坐标轴 文字 color: "#1B2526", fontSize: 12 }, splitLine: { // 背景网格线 show: true, lineStyle: { color: '#F6F7F8', } }, }, tooltip: { // 鼠标hover 浮框 trigger: 'axis', formatter: function (params) { param = params[0]; 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(0, 0, 0, 1, [{ offset: 0, color: '#00BF6C' }, { offset: 1, 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); }, 100); } } }) </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: '11', lineStyle: { color: '#00BF6C' }, yAxis: 33 }] }, arrX: this.initArr(), arrY: this.initArr() } }, methods:{ initArr(){ return Array(10).fill().map(v => (Math.random() * 100).toFixed()) } } }) </script> </body> </html>
