手把手Vue實現移動端精簡K線

chanjarster 發(fā)布于2019-08-23 14:01 / 1619人閱讀

摘要：廢話不多說，先看看已完成的界面。前期工作新建文件按需引入一新建個存放主體內容。先說日吶為也就是蠟燭形狀的圖，為我們后邊請求的數據直接強行賦值，默認設置蠟燭圖的寬度。設置該圖顏色設置該圖線形顏色。

廢話不多說，先看看已完成的界面。

前期工作：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后續(xù)也一樣重新賦值，axisLine定義x軸線的樣式，splitLine定義x軸的格子線
axisLabel定義x軸字體樣式，dataZoom定義顯示方位（%） yAxis定義y軸的樣式與x類似，series我們后面初始化就賦剛剛定義好的candleSeries

好！基本布局完成辣再寫個根據數據長度判斷數據顯示范圍，及修改數據方法與重繪方法。（要返回option）

回到Vue文件中創(chuàng)建獲取數據方法，渲染echarts

每個人獲取數據不一樣，要處理的方法也不一樣。setOption是更改數據入口，將在ecahrts的js中導出修改的東西然后在合適的地方調用。

點個贊？

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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知識點

摘要：模塊化是隨著前端技術的發(fā)展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優(yōu)化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

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

摘要：目前，常用的模塊規(guī)范主要有兩種和。攔截全局請求一直接引入腳本攔截需要的回調或函數。深刻知道一個良好的命名規(guī)范的重要性，同時在項目中也會遇到一些命名的瓶頸。基于 Three.js 的超快的 3D 開發(fā)框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 應用 3D 開發(fā)框架。它為普通的 Three.js 任務提供封裝、使搭建環(huán)境、...

IntMain 2019-08-21 17:57 評論0 收藏0