脚本宝典收集整理的这篇文章主要介绍了

手把手Vue实现移动端精简K线

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

废话不多说,先看看已完成的界面。

图片描述

前期工作 :1.npm install echarts

      2.Vue新建文件按需引入
      

图片描述

一.新建个js存放echarts主体内容。

图片描述

在刚刚的vue文件中引入

图片描述

在mounted中初始化Echarts实例
图片描述

二.到stockImg.js中设置涨跌颜色,看清数据结构

图片描述

三.看明白调用数据方法,将上面的数据结构进行处理返回个对象日期与value值

图片描述

四.计算Ma平均数据

图片描述

五,新建变量存放图表设置及其样式,图表主要画的有五大数据分别是:日K,MA5,MA10,MA20,MA30。

图片描述

 喝杯茶慢慢谈,好呢。 先说日k呐 type为candlestick也就是蜡烛形状的图,data为undefined我们后边请求的数据直接强行赋值
 ,barMaxWidth/minWidt默认设置蜡烛图的宽度。 itemStyle 设置该图颜色 lineStyle设置该图线形颜色。好还You一个marlink
 线条也就是图形中实时涨跌的线条 Look——Img=> 这个主要是data{yAxis:0}控制的它的Y轴高度,后面我们根据数据,给予高度

图片描述

六,MA类没有什么改变,data直接后面赋值
图片描述

七,看下图表设置
var option = {

title: {
    text: '上证指数',
    top: 'center',
    show:"true",
},

legend: {
    data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
   
},
grid: {
    left: '10%',
    right: '4%',
    top:'5%',
    bottom:'8%'
},
xAxis: {
    type: 'category',
    data: lineData.categoryData,
    scale: true,
    boundaryGap : false,
    axisLine: {
        lineStyle: {
          type : "dashed",
          color: '#1a2e44',
        },
     },
    splitLine: {
        show: true,
        lineStyle: {
        // 使用深浅的间隔色
        color: ['#21334b', '#21334b'],
        type : "dashed"
       }
    },
   axisLabel: {
    color: '#2d4e62',
    fontSize: 10,
    inside: false,
    interval:'auto',
    },
    splitNumber: 10,
    min: 'dataMin',
    max: 'dataMax'
},
dataZoom: [
    { 
        type: 'inside',
        start: 95,
        end: 100,
        splitNumber:10,
    },
],
yAxis: {   //#2d4e62
    scale: true,
     color: '#0165b1',
     axisLine: {
      
     },
    splitArea: {
        show: false
    },
    splitLine: {
        show: true,
        lineStyle: {
        // 使用深浅的间隔色
        color: ['#0d2637','#0d2637'],
        type : "dashed"
       }
    },
   axisLabel: {
    color: '#2d4e62',
    fontSize: 10,
    inside: false,
    },
axisLine: {
    lineStyle: {
        type : "dashed",
        color: '#1a2e44',
      },
 },
   series: undefined};
   
   

grid定义图表的间距,xAxis定义x轴数据展示方式x轴data后续也一样重新赋值,axisLine定义x轴线的样式,splitLine定义x轴的格子线
axisLabel定义x轴字体样式,dataZoom定义显示方位(%) yAxis定义y轴的样式与x类似,series我们后面初始化就赋刚刚定义好的candleSeries

好! 基本布局完成辣再写个根据数据长度判断数据显示范围,及修改数据方法与重绘方法。(要返回option)

图片描述

图片描述

回到Vue文件中创建获取数据方法,渲染echarts
图片描述

每个人获取数据不一样,要处理的方法也不一样。setOption是更改数据入口,将在ecahrts的js中导出修改的东西然后在合适的地方调用。

点个赞?

总结

以上是脚本宝典为你收集整理的

手把手Vue实现移动端精简K线

全部内容,希望文章能够帮你解决

手把手Vue实现移动端精简K线

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过