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

chanjarster 发布于2019-08-23 14:01 / 1710人阅读

摘要：废话不多说，先看看已完成的界面。前期工作新建文件按需引入一新建个存放主体内容。先说日呐为也就是蜡烛形状的图，为我们后边请求的数据直接强行赋值，默认设置蜡烛图的宽度。设置该图颜色设置该图线形颜色。

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

前期工作：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中导出修改的东西然后在合适的地方调用。

点个赞？

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99963.html

前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
你不知道的h5

摘要：目前，常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。基于 Three.js 的超快的 3D 开发框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

IntMain 2019-08-21 17:57 评论0 收藏0