微信小程序使用Echarts繪製K線圖與雙曲線圖以及實現tab切換

在微信小程序中使用Echarts需要下載相應的文件，可在這下載ec-canvas，該github裏也有很多很好的例子，可自行調試學習。

本例子的目錄結構：

微信小程序使用Echarts的步驟

在需要引入Echarts的頁面的json文件中設置組件

按照以上目錄結構來理解，就是在index.json文件中設置echarts組件

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

設置Echarts圖的寬高（如果不設置，可能導致無法顯示圖表，或者顯示的位置超出屏幕外）

index.wxss

ec-canvas {
  width: 100%;
  height: 650rpx;
  border-width: 4rpx 4rpx 4rpx 4rpx;
  border-color: rgb(71, 137, 235);
  border-style: solid;
}
.container1 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

在需要展示圖表的位置引入ec-canvas標籤

index.wxml

<!-- k線圖 -->
 <view class="container1">
  <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
 </view>

 <!-- 數據曲線 -->
 <view class="container1">
 <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec3 }}"></ec-canvas>
 </view>

ec-canvas標籤中的id和canvas-id需要匹配相應圖形（似乎不對應也可以顯示，但爲避免意外，還是儘量匹配，這裏使用的是k線圖和曲線圖）

具體的繪製細節在js文件中實現（代碼中具體參數如有不懂，可參考echarts官網說明）
index.js

const app = getApp()
import * as echarts from '../../ec-canvas/echarts';
// K線圖所用顏色
var upColor = '#fdbc07';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';

// 雙曲線所用顏色
var colors = ['#5793f3', '#d14a61', '#675bba'];



// 繪製雙曲線所用數據
var timeArray = ["1903","1904","1905","1906","1907","1908","1909","1910"]
var resArray = [1.728,1.728,1.324,0.428,4.1480,13.496,14.048,11.258]
var udpArray = [3.37302, 23.2845, - 11.094, 11.5066, -19.9232- 10.1191,- 4.4812,5.88576]

// 繪製k線圖所用數據，數據意義：開盤(open)，收盤(close)，最低(lowest)，最高(highest)
var data0 = splitData([
  ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
  ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
  ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
  ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
  ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
  ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
  ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
  ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
  ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
  ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
  ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
  ['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
  ['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
  ['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
  ['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
  ['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
  ['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
  ['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
  ['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
  ['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
  ['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
  ['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
  ['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
  ['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
  ['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
  ['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
  ['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
  ['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
  ['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
  ['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
  ['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
  ['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
  ['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
  ['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
  ['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
  ['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
  ['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
  ['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
  ['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
  ['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
  ['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
  ['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
  ['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
  ['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
  ['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
  ['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
  ['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
  ['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
  ['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
  ['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
  ['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
  ['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
  ['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
  ['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
  ['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
  ['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
  ['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
  ['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
  ['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
  ['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
  ['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
  ['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
  ['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
  ['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
  ['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
  ['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
  ['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
  ['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
  ['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
  ['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
  ['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
  ['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
  ['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
  ['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
  ['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
  ['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
  ['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
  ['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
  ['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
  ['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
  ['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
  ['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
  ['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
  ['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
  ['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
  ['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
  ['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
  ['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1]
]);

// 用於形成data0
function splitData(rawData) {
  var categoryData = [];
  var values = []
  for (var i = 0; i < rawData.length; i++) {
    categoryData.push(rawData[i].splice(0, 1)[0]);
    values.push(rawData[i])
  }
  return {
    categoryData: categoryData,
    values: values
  };
}

// 用於生成K線圖中附加的曲線
function calculateMA(dayCount) {
  var result = [];
  for (var i = 0, len = data0.values.length; i < len; i++) {
    if (i < dayCount) {
      result.push('-');
      continue;
    }
    var sum = 0;
    for (var j = 0; j < dayCount; j++) {
      sum += data0.values[i - j][1];
    }
    result.push(sum / dayCount);
  }
  return result;
}

// 橢圓形標識參數
var val = [
  {
    name: 'XX標點',
    coord: ['2013/5/31', 2300],
    value: 2300,
    itemStyle: {
      normal: { color: '#4a8aff' }
    }
  },
  {
    name: 'highest value',
    type: 'max',
    valueDim: 'highest'
  },
  {
    name: 'lowest value',
    type: 'min',
    valueDim: 'lowest'
  },
  {
    name: 'average value on close',
    type: 'average',
    valueDim: 'close'
  }
]

Page({
  data: {
    //k線圖繪製初始化
    ec: '',
    //雙曲線繪製初始化
    ec3: '',
  },
  
  onLoad: function () {
    this.setData({
      // k線圖
      ec: {
        onInit: this.initChart
      },
      // 雙曲線
      ec3: {
        onInit: this.initChart3
      }
    })
  },
  
  // 繪製k線
  initChart: function (canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);
    var option = {
      backgroundColor: '#0F2127',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        // 鼠標點擊時觸發
        triggerOn: 'click',
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
          color: '#000',
          // fontSize: 13,
        },
        // 避免提示框超出方塊圈的情況
        position: function (pos, params, el, elRect, size) {
          var obj = { top: 10 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        },
      },
      legend: {
        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
      },
      grid: {
        left: '13%',
      },
      xAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            // fontSize: 13,
          }
        },
        type: 'category',
        data: data0.categoryData,
        scale: true,
        axisTick: { show: false },
        axisLine: { onZero: false },
        splitLine: { show: false },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
      },
      yAxis: {
        splitLine: { show: false },//去除網格線
        axisLabel: {
          textStyle: {
            color: '#fff',
            // fontSize: 13
          }
        },
        scale: true,
      },
      dataZoom: [
        {
          type: 'slider',
          height: 10,
          show: true,
          start: 80,
          end: 100,
          handleSize: 8
        },
        {
          type: 'inside',
          start: 80,
          end: 100
        },
      ],
      series: [
        {
          name: '日K',
          type: 'candlestick',
          data: data0.values,
          itemStyle: {
            normal: {
              color: upColor,
              color0: downColor,
              borderColor: upBorderColor,
              borderColor0: downBorderColor
            }
          },
          markPoint: {
            label: {
              normal: {
                formatter: function (param) {
                  return param != null ? Math.round(param.value) : '';
                }
              }
            },
            data: val,
            tooltip: {
              formatter: function (param) {
                return param.name + '<br>' + (param.data.coord || '');
              }
            }
          },
          markLine: {
            symbol: ['none', 'none'],
            data: [
              [
                {
                  name: 'from lowest to highest',
                  type: 'min',
                  valueDim: 'lowest',
                  symbol: 'circle',
                  symbolSize: 10,
                  label: {
                    normal: { show: false },
                    emphasis: { show: false }
                  }
                },
                {
                  type: 'max',
                  valueDim: 'highest',
                  symbol: 'circle',
                  symbolSize: 10,
                  label: {
                    normal: { show: false },
                    emphasis: { show: false }
                  }
                }
              ],
              {
                name: 'min line on close',
                type: 'min',
                valueDim: 'close'
              },
              {
                name: 'max line on close',
                type: 'max',
                valueDim: 'close'
              }
            ]
          }
        },
        {
          name: 'MA5',
          type: 'line',
          data: calculateMA(5),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA10',
          type: 'line',
          data: calculateMA(10),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA20',
          type: 'line',
          data: calculateMA(20),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA30',
          type: 'line',
          data: calculateMA(30),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },

      ]
    };
    chart.setOption(option);
    return chart;
  },
  
  // 繪製雙曲線圖
  initChart3: function (canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);
    var option = {
      backgroundColor: '#0F2127',
      color: colors,
      tooltip: {
        trigger: 'axis',
        triggerOn: 'click', // 鼠標點擊時觸發
        axisPointer: {
          type: 'cross'
        },
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 1,
        textStyle: {
          color: '#000',
          fontSize: 8,
        },
        // 避免提示框超出方塊圈的情況
        position: function (pos, params, el, elRect, size) {
          var obj = { top: 5 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        },
      },
      legend: {
        textStyle: {
          color: '#fff',
          fontSize: 8
        },
        data: ['數值1', '數值2']
      },
      xAxis: {
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 8
          }
        },
        axisLine: {
          lineStyle: {
            color: colors[1]
          }
        },
        type: 'category',
        boundaryGap: false,
        data: timeArray
      },
      yAxis: {
        splitLine: { show: false },
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 8
          }
        },
        axisLine: {
          lineStyle: {
            color: colors[0]
          }
        },
        type: 'value'
      },
      grid: {
        left: '10%',
        bottom: '13%',
        top: '10%',

      },
      series: [
        {
          name: '數值1',
          type: 'line',
          smooth: true,
          data: resArray
        },
        {
          name: '數值2',
          type: 'line',
          smooth: true,
          data: udpArray
        }]
    };
    chart.setOption(option);
    return chart;
  }
})

效果圖

微信小程序實現tab切換（k線圖與表單切換）

不做過多廢話，直接上代碼

index.wxml

<!--index.wxml-->
<!-- k線圖與數據表格 -->
<view class="body">
   <view class="nav">
    <view class="{{selected?'red':'default'}}" bindtap="selected">K線圖</view>
    <view class="{{selected1?'red':'default'}}" bindtap="selected1">數據表格</view>
  </view>
<!-- k線圖 -->
 <view class="{{selected?'show':'hidden'}}">
 <view class="container1">
  <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
 </view>
</view>
<!-- 數據表格 -->
  <view class="{{selected1?'show':'hidden'}}">
 <scroll-view scroll-x="true" scroll-y="true" class='scrollClass'>
  <view class='table'>
    <view class='table_header'>
      <view class="th1">
        <view class='cell_label'>序號</view>
      </view>
      <block wx:for="{{indexArray}}" wx:key="">
        <view wx:if="{{index==0}}">
          <view class='th0'>
            <view class="cell_label">{{item}}</view>
          </view>
        </view>
        <view  wx:else="{{index>0}}">
          <view class='th1'>
            <view class="cell_label">{{item}}</view>
          </view>
        </view>
      </block>
    </view>
    <block wx:for="{{sch_listData}}" wx:key="">
      <view class='table_main'>
        <view class='td1'>
          <view class="cell_label">{{index}}</view>
        </view>
        <view class='td0'>
          <view style="color:#4a8aff">{{item.time}}</view>
        </view>

         <view class='td1'>
          <view style="color:#4a8aff">{{item.number}}</view>
        </view>
        <view class='td1'>
            <view style="color:#4a8aff">{{item.price}}</view>
        </view>
        <view class='td1'>
            <view style="color:#4a8aff">{{item.sum}}</view>
        </view>
        <view class='td1'>
            <view style="color:#4a8aff">{{item.one}}</view>
        </view>
        <view class='td1'>
            <view style="color:#4a8aff">{{item.test}}</view>
        </view>
      </view>
    </block>
  </view>
</scroll-view>
</view>
</view>

index.css

/**index.wxss**/
page{
  background: black
}
.body{
  padding: 20rpx;
  /* height: 100%; */
  /* background: #000000 */
}

.nav{
  width:100%;
  height:50rpx;
  display:flex;
  flex-direction:row;
  }

  .red{
  line-height:50rpx;
  text-align:center;
  flex:1;
  /* border-right:1px solid gainsboro; */
  font-weight:bold;
  font-size:35rpx;
  color: transparent;
  background-clip: text;
background: linear-gradient(to right, #1ae8c8, #4a8aff);
-webkit-background-clip: text;

  }

  .default{
  line-height:50rpx;
  text-align:center;
  flex:1;
  color:#ffffff;
  /* border-right:1px solid gainsboro; */
  font-weight:bold;
  font-size: 35rpx;
  }

  .show{
  display:block;
  text-align:center;
  }
.hidden{
  display:none;
  text-align:center;
  line-height:200px;
  }


  .container1 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin-left: 10rpx;
  margin-right: 10rpx;

} 

ec-canvas {
  width: 100%;
  height: 650rpx;
  border-width: 4rpx 4rpx 4rpx 4rpx;
  border-color: rgb(71, 137, 235);
  border-style: solid;
}

.scrollClass {
  display: flex;
  width: 100%;
  white-space: nowrap;
  height: 650rpx;
  border-width: 4rpx 4rpx 4rpx 4rpx;
  border-color: rgb(71, 137, 235);
  border-style: solid;
  margin-bottom: 50rpx;

}
.table{
  display: inline-flex;
  flex-direction: column;
  border: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 0;  

}
.table_header {
  display: inline-flex;
}

.th0 {
  display: flex;
  flex-direction: column;
  width: 300rpx;
  height: 60rpx;
  background: #181818;
  border-right: 1rpx solid rgba(218, 217, 217, 1); 
  border-bottom: 1rpx solid rgba(218, 217, 217, 1); 
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}
.th1 {
  display: flex;
  flex-direction: column;
  width: 145rpx;
  height: 60rpx;
  background: #181818;
  border-right: 1rpx solid rgba(218, 217, 217, 1); 
  border-bottom: 1rpx solid rgba(218, 217, 217, 1); 
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}
.cell_label{
  font-size: 26rpx;
  color: #1ae8c8;
}
.table_main {
  display: inline-flex;
  flex-direction: row;
}

.td0 {
  display: flex;
  flex-direction: column;
  width:300rpx;
  /* height: 90rpx; */
  background: #282828;
  justify-content: center;
  align-items: center;
  border: 1rpx solid rgba(218, 217, 217, 1);
  border-top: 0;
  border-left:0; 
}
.td1{
  display: flex;
  flex-direction: column;
  width: 145rpx;
  /* height: 90rpx; */
  background: #282828;
  justify-content: center;
  align-items: center;
  border: 1rpx solid rgba(218, 217, 217, 1);
  border-top: 0;
  border-left:0; 
  color: #FFFF00;
}

.borderline{
  border-top:2px solid rgb(81, 99, 105);
  margin-left: 20rpx;
  margin-right: 20rpx

}

index.js

//index.js
//獲取應用實例
const app = getApp()
import * as echarts from '../../ec-canvas/echarts';

// K線圖所用顏色
var upColor = '#fdbc07';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';

// 表格數據
var sch_listData = [
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'},
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'},
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}, 
  { time: "20190328", number: 100, price:234,sum: 4.59, one: 108, test: 'buy'}
]

// 數據意義：開盤(open)，收盤(close)，最低(lowest)，最高(highest)
var data0 = splitData([
  ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
  ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
  ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
  ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
  ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
  ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
  ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
  ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
  ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
  ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
  ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
  ['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
  ['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
  ['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
  ['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
  ['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
  ['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
  ['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
  ['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
  ['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
  ['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
  ['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
  ['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
  ['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
  ['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
  ['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
  ['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
  ['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
  ['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
  ['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
  ['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
  ['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
  ['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
  ['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
  ['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
  ['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
  ['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
  ['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
  ['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
  ['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
  ['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
  ['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
  ['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
  ['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
  ['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
  ['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
  ['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
  ['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
  ['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
  ['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
  ['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
  ['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
  ['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
  ['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
  ['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
  ['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
  ['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
  ['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
  ['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
  ['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
  ['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
  ['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
  ['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
  ['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
  ['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
  ['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
  ['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
  ['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
  ['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
  ['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
  ['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
  ['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
  ['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
  ['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
  ['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
  ['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
  ['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
  ['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
  ['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
  ['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
  ['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
  ['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
  ['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
  ['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
  ['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
  ['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
  ['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
  ['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1]
]);

// 用於形成data0
function splitData(rawData) {
  var categoryData = [];
  var values = []
  for (var i = 0; i < rawData.length; i++) {
    categoryData.push(rawData[i].splice(0, 1)[0]);
    values.push(rawData[i])
  }
  return {
    categoryData: categoryData,
    values: values
  };
}

// 用於生成K線圖中附加的曲線
function calculateMA(dayCount) {
  var result = [];
  for (var i = 0, len = data0.values.length; i < len; i++) {
    if (i < dayCount) {
      result.push('-');
      continue;
    }
    var sum = 0;
    for (var j = 0; j < dayCount; j++) {
      sum += data0.values[i - j][1];
    }
    result.push(sum / dayCount);
  }
  return result;
}

// 橢圓形標識參數
var val = [
  {
    name: 'XX標點',
    coord: ['2013/5/31', 2300],
    value: 2300,
    itemStyle: {
      normal: { color: '#4a8aff' }
    }
  },
  {
    name: 'highest value',
    type: 'max',
    valueDim: 'highest'
  },
  {
    name: 'lowest value',
    type: 'min',
    valueDim: 'lowest'
  },
  {
    name: 'average value on close',
    type: 'average',
    valueDim: 'close'
  }
]


Page({
  data: {
    // 用於表格
    sch_listData:sch_listData,
    indexArray: ['time', 'number', 'price', 'sum', 'one', 'test'],
    //tab切換
    selected: true,
    selected1: false,
    hidden: true,
    //k線圖繪製初始化
    ec: '',
  },
  
  onLoad: function () {
    this.setData({
      // k線圖
      ec: {
        onInit: this.initChart
      }
    })
  },
//k線圖與數據表格切換
  selected: function (e) {
    this.setData({
      selected1: false,
      selected: true
    })
  },
  selected1: function (e) {
    this.setData({
      selected: false,
      selected1: true
    })
  },

  // 繪製k線
  initChart: function (canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);

    var option = {
      backgroundColor: '#0F2127',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        // 鼠標點擊時觸發
        triggerOn: 'click',
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
          color: '#000',
          // fontSize: 13,
        },
        // 避免提示框超出方塊圈的情況
        position: function (pos, params, el, elRect, size) {
          var obj = { top: 10 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        },
      },
      legend: {
        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
      },
      grid: {
        left: '13%',

      },
      xAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            // fontSize: 13,
          }
        },
        type: 'category',
        data: data0.categoryData,
        scale: true,
        axisTick: { show: false },
        axisLine: { onZero: false },
        splitLine: { show: false },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
      },
      yAxis: {
        splitLine: { show: false },//去除網格線
        axisLabel: {
          textStyle: {
            color: '#fff',
            // fontSize: 13
          }
        },
        // axisTick: { show: false },
        scale: true,
      },
      dataZoom: [
        {
          type: 'slider',
          height: 10,
          show: true,
          start: 80,
          end: 100,
          handleSize: 8
        },
        {
          type: 'inside',
          start: 80,
          end: 100
        },
      ],
      series: [
        {
          name: '日K',
          type: 'candlestick',
          data: data0.values,
          itemStyle: {
            normal: {
              color: upColor,
              color0: downColor,
              borderColor: upBorderColor,
              borderColor0: downBorderColor
            }
          },
          markPoint: {
            label: {
              normal: {
                formatter: function (param) {
                  return param != null ? Math.round(param.value) : '';
                }
              }
            },
            data: val,
            tooltip: {
              formatter: function (param) {
                return param.name + '<br>' + (param.data.coord || '');
              }
            }
          },
          markLine: {
            symbol: ['none', 'none'],
            data: [
              [
                {
                  name: 'from lowest to highest',
                  type: 'min',
                  valueDim: 'lowest',
                  symbol: 'circle',
                  symbolSize: 10,
                  label: {
                    normal: { show: false },
                    emphasis: { show: false }
                  }
                },
                {
                  type: 'max',
                  valueDim: 'highest',
                  symbol: 'circle',
                  symbolSize: 10,
                  label: {
                    normal: { show: false },
                    emphasis: { show: false }
                  }
                }
              ],
              {
                name: 'min line on close',
                type: 'min',
                valueDim: 'close'
              },
              {
                name: 'max line on close',
                type: 'max',
                valueDim: 'close'
              }
            ]
          }
        },
        {
          name: 'MA5',
          type: 'line',
          data: calculateMA(5),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA10',
          type: 'line',
          data: calculateMA(10),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA20',
          type: 'line',
          data: calculateMA(20),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA30',
          type: 'line',
          data: calculateMA(30),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },

      ]
    };
    chart.setOption(option);
    return chart;
  },
})

效果圖

將以上代碼整合最終效果圖

源碼地址

微信小程序使用Echarts繪製K線圖與雙曲線圖以及實現tab切換

微信小程序使用Echarts的步驟

微信小程序實現tab切換（k線圖與表單切換）

將以上代碼整合最終效果圖

python gdal 安裝使用（Windows， python 3.6.8）

微信小程序使用Echarts繪製K線圖與雙曲線圖以及實現tab切換

Leetcode---兩數之和(Python3實現)

Leetcode---羅馬數轉整數（Python3實現）

Leetcode --- 刪除排序數組中的重複項和移除元素（python3實現）

Leetcode—整數反轉(Python3實現)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結