脚本宝典收集整理的这篇文章主要介绍了手把手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：384754419，请注明来意。