微信小程序使用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; }, }) 效果图

将以上代码整合最终效果图

源码地址