看个效果图先

首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div>

接着引入echarts.js  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

最后在加入图例生成JS -------- 请在文章最底部查看

原版的图例生成JS可以去echarts官网找,上面这段JS是我改动后的。原版图例生成的JS中K线数据是固定写死的,这肯定是不行,而且只有一种K线(5分钟K)。

实际项目中有5分钟K,15分钟K,30分钟K,60分钟K以及日K。所以改动第一步肯定是要去后端控制器提取数据,当然返回的数据格式肯定要和官网中给出的数据格式一样的。在控制器

中我返回的JSON格式的数据,这在JS中肯定是不能直接拿来用的,需要转换成二维数组。function json_array(data){}就是把对应的JSON对象转换为二维数组,这样

就可以用来替换原来的固定数据啦。

接下来第二个问题就是一下子显示5种K线,图例肯定会非常乱。所以我默认就只显示5分钟K,在此设置

  1. legend: { //图例控件,点击图例控制哪些系列不现实
  2. selected: {
  3. 'k_5':true,
  4. 'k_15':false,
  5. 'k_30':false,
  6. 'k_60':false,
  7. 'k_day':false,
  8. },
  9. data: ['k_5','k_15','k_30','k_60','k_day', 'MA5', 'MA10', 'MA20', 'MA30']
  10. },

点击对应的K线小图标肯定要显示对应的K线啦,这里需要用到echarts的图例交互事件,本人在项目中用到的是  legendselectchanged 事件

对应JS在此

  1. myChart.on('legendselectchanged', function(obj) {
  2. var selected_1 = {};
  3. var selected = obj.selected;
  4. var legend = obj.name;
  5. if(selected[legend]){
  6. for(var key in selected){
  7. if(key == legend){
  8. selected_1[key] = true;
  9. }else{
  10. selected_1[key] = false;
  11. selected_1['MA5'] = true;
  12. selected_1['MA10'] = true;
  13. selected_1['MA20'] = true;
  14. selected_1['MA30'] = true;
  15. }
  16. }
  17. option.legend.selected = selected_1;
  18. if(legend == 'k_5'){
  19. data_common = data0;
  20. }
  21. if(legend == 'k_15'){
  22. data_common = data_1;
  23. }
  24. if(legend == 'k_30'){
  25. data_common = data_2;
  26. }
  27. if(legend == 'k_60'){
  28. data_common = data_3;
  29. }
  30. if(legend == 'k_day'){
  31. data_common = data_4;
  32. }
  33. myChart.setOption(option);
  34. }
  35.  
  36. });

这段JS的目的是将点击对应K线小图标高亮显示或灰暗显示,同时其他未被点击小图标灰暗显示。同时填充对应K线数据。

echarts中的图例交互事件有很多,例如:

1) legendselectchanged : 切换图例选中状态后的事件 (注:图例组件用户切换图例开关会触发该事件,不管你有没有选择,点击了就触发)

2)legendselected:例组件用legendSelect 图例选中后的事件,即点击显示该图例时,触发就生效。

3)legendunselected: legendUnSelect 图例取消选中后的事件。

4)datazoom:数据区域缩放后的事件。缩放视觉映射组件。

5)datarangeselected:selectDataRange 视觉映射组件中,range 值改变后触发的事件。

6)timelinechanged:timelineChange 时间轴中的时间点改变后的事件。

7)timelineplaychanged:timelinePlayChange 时间轴中播放状态的切换事件。

8)restore: restore 重置 option 事件。

9)dataviewchanged:工具栏中数据视图的修改事件。

10)magictypechanged:工具栏中动态类型切换的切换事件。

11)geoselectchanged:geo 中地图区域切换选中状态的事件(用户点击选中会触发该事件。)。

12)geoselected:geo 中地图区域选中后的事件(使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 geoselectchanged))。

13)geounselected:geo 中地图区域取消选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 geoselectchanged)。

14)pieselectchanged:series-pie 中饼图扇形切换选中状态的事件,用户点击选中会触发该事件。

15)pieselected:series-pie 中饼图扇形选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 pieselectchanged)。

16)pieunselected:series-pie 中饼图扇形取消选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 pieselectchanged)。

17)mapselectchanged: series-map 中地图区域切换选中状态的事件,用户点击选中会触发该事件。

18)mapselected:series-map 中地图区域选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 mapselectchanged)。

19)mapunselected:series-map 中地图区域取消选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 mapselectchanged)。

20)axisareaselected:平行坐标轴 (Parallel) 范围选取事件,

感兴趣的老铁们可以去研究研究。

文末插入改动之后的图例生成JS

  1. <script type="text/javascript">
  2. $(function(){
  3.   var product_id = $("#product_id").val();
  4. $.ajax({
  5. type: 'post',
  6. url: '/index/product/ajax_product_info',
  7. data : {'product_id':product_id},
  8. success:function(msg) {
  9. var data5 = msg.minute_5;
  10. var data15 = msg.minute_15;
  11. var data30 = msg.minute_30;
  12. var data60 = msg.minute_60;
  13. var dataday = msg.minute_day;
  14. var data = json_array(data5);
  15. var data1 = json_array(data15);
  16. var data2 = json_array(data30);
  17. var data3 = json_array(data60);
  18. var data4 = json_array(dataday);
  19. /*基于准备好的dom,初始化echarts实例*/
  20. var myChart = echarts.init(document.getElementById('main'));
  21.  
  22. // 数据意义:开盘(open),收盘(close),最低(lowest),最高(highest)
  23. var data0 = splitData(data);
  24. var data_1 = splitData(data1);
  25. var data_2 = splitData(data2);
  26. var data_3 = splitData(data3);
  27. var data_4 = splitData(data4);
  28. var data_common = data0;
  29. //json对象转二维数组
  30. function json_array(data){
  31. var len=eval(data).length;
  32. var arr=[];
  33. for(var i=0;i<len;i++){
  34. arr[i] = new Array();
  35. arr[i]['0']=data[i].date;
  36. arr[i]['1']=data[i].open;
  37. arr[i]['2']=data[i].close;
  38. arr[i]['3']=data[i].low;
  39. arr[i]['4']=data[i].high;
  40. }
  41. return arr;
  42. }
  43.  
  44. //切割数组,把数组中的日期和数据分离,返回数组中的日期和数据
  45. function splitData(rawData) {
  46. var categoryData = [];
  47. var values = [];
  48.  
  49. for (var i = 0; i < rawData.length; i++) {
  50. //splice 返回每组数组中被删除的第一项,即返回数组中被删除的日期
  51. //alert(rawData[i].splice(0, 1)[0]);
  52. //categoryData 日期 把返回的日期放到categoryData[]数组中
  53. categoryData.push(rawData[i].splice(0, 1)[0]);
  54. //alert(categoryData);
  55.  
  56. //数据数组,即数组中除日期外的数据
  57. // alert(rawData[i]);
  58. values.push(rawData[i])
  59. }
  60. return {
  61. categoryData: categoryData, //数组中的日期 x轴对应的日期
  62. values: values //数组中的数据 y轴对应的数据
  63. };
  64. }
  65.  
  66. //计算MA平均线,N日移动平均线=N日收盘价之和/N dayCount要计算的天数(5,10,20,30)
  67. function calculateMA(dayCount) {
  68. var result = [];
  69. for (var i = 0, len = data_common.values.length; i < len; i++) {
  70. if (i < dayCount) {
  71. result.push('-');
  72. //alert(result);
  73. continue; //结束单次循环,即不输出本次结果
  74. }
  75. var sum = 0;
  76. for (var j = 0; j < dayCount; j++) {
  77. //收盘价总和
  78. sum += data_common.values[i - j][1];
  79. //alert(sum);
  80. }
  81. result.push(sum / dayCount);
  82. // alert(result);
  83. }
  84. return result;
  85. }
  86.  
  87. option = {
  88. title: { //标题
  89. text: '价格',
  90. left: 0
  91. },
  92. tooltip: { //提示框
  93. trigger: 'axis', //触发类型:坐标轴触发
  94. axisPointer: { //坐标轴指示器配置项
  95. type: 'cross' //指示器类型,十字准星
  96. }
  97. },
  98. legend: { //图例控件,点击图例控制哪些系列不现实
  99. selected: {
  100. 'k_5':true,
  101. 'k_15':false,
  102. 'k_30':false,
  103. 'k_60':false,
  104. 'k_day':false,
  105. },
  106. data: ['k_5','k_15','k_30','k_60','k_day', 'MA5', 'MA10', 'MA20', 'MA30']
  107. },
  108. grid: { //直角坐标系
  109. show:true,
  110. left: '10%', //grid组件离容器左侧的距离
  111. right: '10%',
  112. bottom: '15%',
  113. //backgroundColor:'#ccc'
  114. },
  115. xAxis: {
  116. type: 'category', //坐标轴类型,类目轴
  117. data: data0.categoryData,
  118. //scale: true, //只在数字轴中有效
  119. boundaryGap : false, //刻度作为分割线,标签和数据点会在两个刻度上
  120. axisLine: {onZero: false},
  121. splitLine: {show: false}, //是否显示坐标轴轴线
  122. //splitNumber: 20, //坐标轴的分割段数,预估值,在类目轴中无效
  123. min: 'dataMin', //特殊值,数轴上的最小值作为最小刻度
  124. max: 'dataMax' //特殊值,数轴上的最大值作为最大刻度
  125. },
  126. yAxis: {
  127. scale: true, //坐标刻度不强制包含零刻度
  128. splitArea: {
  129. show: true //显示分割区域
  130. }
  131. },
  132. dataZoom: [ //用于区域缩放
  133. {
  134. filterMode:'filter', //当前数据窗口外的数据被过滤掉来达到数据窗口缩放的效果 默认值filter
  135. type: 'inside', //内置型数据区域缩放组件
  136. start: 50, //数据窗口范围的起始百分比
  137. end: 100 //数据窗口范围的结束百分比
  138. },
  139. {
  140. show: true,
  141. type: 'slider', //滑动条型数据区域缩放组件
  142. y: '90%',
  143. start: 50,
  144. end: 100
  145. }
  146. ],
  147. series: [
  148. //图表类型
  149. {
  150. name: 'k_5',
  151. type: 'candlestick', //K线图
  152. data: data0.values, //y轴对应的数据
  153.  
  154. ////////////////////////图标标注/////////////////////////////
  155.  
  156. markPoint: { //图表标注
  157. label: { //标注的文本
  158. normal: { //默认不显示标注
  159. show:true,
  160. //position:['20%','30%'],
  161. formatter: function (param) { //标签内容控制器
  162. return param != null ? Math.round(param.value) : '';
  163. }
  164. }
  165. },
  166. data: [ //标注的数据数组
  167. {
  168. name: 'XX标点',
  169. coord: ['2013/5/31', 2300], //指定数据的坐标位置
  170. value: 2300,
  171. itemStyle: { //图形样式
  172. normal: {color: 'rgb(41,60,85)'}
  173. }
  174. },
  175. {
  176. name: 'highest value',
  177. type: 'max', //最大值
  178. valueDim: 'highest' //在highest维度上的最大值 最高价
  179. },
  180. {
  181. name: 'lowest value',
  182. type: 'min',
  183. valueDim: 'lowest' //最低价
  184. },
  185. {
  186. name: 'average value on close',
  187. type: 'average',
  188. valueDim: 'close' //收盘价
  189. }
  190. ],
  191. tooltip: { //提示框
  192. formatter: function (param) {
  193. return param.name + '<br>' + (param.data.coord || '');
  194. }
  195. }
  196. },
  197.  
  198. /////////////////////////////////图标标线///////////////////////////
  199.  
  200. markLine: {
  201. symbol: ['none', 'none'], //标线两端的标记类型
  202. data: [
  203. [
  204. {
  205. name: 'from lowest to highest',
  206. type: 'min', //设置该标线为最小值的线
  207. valueDim: 'lowest', //指定在哪个维度上的最小值
  208. symbol: 'circle',
  209. symbolSize: 10, //起点标记的大小
  210. label: { //normal默认,emphasis高亮
  211. normal: {show: false}, //不显示标签
  212. emphasis: {show: false} //不显示标签
  213. }
  214. },
  215. {
  216. type: 'max',
  217. valueDim: 'highest',
  218. symbol: 'circle',
  219. symbolSize: 10,
  220. label: {
  221. normal: {show: false},
  222. emphasis: {show: false}
  223. }
  224. }
  225. ],
  226.  
  227. {
  228. name: 'min line on close',
  229. type: 'min',
  230. valueDim: 'close'
  231. },
  232. {
  233. name: 'max line on close',
  234. type: 'max',
  235. valueDim: 'close'
  236. }
  237. ]
  238.  
  239. }
  240.  
  241. },
  242. {
  243. name: 'k_15',
  244. type: 'candlestick', //K线图
  245. data: data_1.values, //y轴对应的数据
  246.  
  247. ////////////////////////图标标注/////////////////////////////
  248.  
  249. markPoint: { //图表标注
  250. label: { //标注的文本
  251. normal: { //默认不显示标注
  252. show:true,
  253. //position:['20%','30%'],
  254. formatter: function (param) { //标签内容控制器
  255. return param != null ? Math.round(param.value) : '';
  256. }
  257. }
  258. },
  259. data: [ //标注的数据数组
  260. {
  261. name: 'XX标点',
  262. coord: ['2013/5/31', 2300], //指定数据的坐标位置
  263. value: 2300,
  264. itemStyle: { //图形样式
  265. normal: {color: 'rgb(41,60,85)'}
  266. }
  267. },
  268. {
  269. name: 'highest value',
  270. type: 'max', //最大值
  271. valueDim: 'highest' //在highest维度上的最大值 最高价
  272. },
  273. {
  274. name: 'lowest value',
  275. type: 'min',
  276. valueDim: 'lowest' //最低价
  277. },
  278. {
  279. name: 'average value on close',
  280. type: 'average',
  281. valueDim: 'close' //收盘价
  282. }
  283. ],
  284. tooltip: { //提示框
  285. formatter: function (param) {
  286. return param.name + '<br>' + (param.data.coord || '');
  287. }
  288. }
  289. },
  290.  
  291. /////////////////////////////////图标标线///////////////////////////
  292.  
  293. markLine: {
  294. symbol: ['none', 'none'], //标线两端的标记类型
  295. data: [
  296. [
  297. {
  298. name: 'from lowest to highest',
  299. type: 'min', //设置该标线为最小值的线
  300. valueDim: 'lowest', //指定在哪个维度上的最小值
  301. symbol: 'circle',
  302. symbolSize: 10, //起点标记的大小
  303. label: { //normal默认,emphasis高亮
  304. normal: {show: false}, //不显示标签
  305. emphasis: {show: false} //不显示标签
  306. }
  307. },
  308. {
  309. type: 'max',
  310. valueDim: 'highest',
  311. symbol: 'circle',
  312. symbolSize: 10,
  313. label: {
  314. normal: {show: false},
  315. emphasis: {show: false}
  316. }
  317. }
  318. ],
  319.  
  320. {
  321. name: 'min line on close',
  322. type: 'min',
  323. valueDim: 'close'
  324. },
  325. {
  326. name: 'max line on close',
  327. type: 'max',
  328. valueDim: 'close'
  329. }
  330. ]
  331.  
  332. }
  333.  
  334. },
  335. {
  336. name: 'k_30',
  337. type: 'candlestick', //K线图
  338. data: data_2.values, //y轴对应的数据
  339.  
  340. ////////////////////////图标标注/////////////////////////////
  341.  
  342. markPoint: { //图表标注
  343. label: { //标注的文本
  344. normal: { //默认不显示标注
  345. show:true,
  346. //position:['20%','30%'],
  347. formatter: function (param) { //标签内容控制器
  348. return param != null ? Math.round(param.value) : '';
  349. }
  350. }
  351. },
  352. data: [ //标注的数据数组
  353. {
  354. name: 'XX标点',
  355. coord: ['2013/5/31', 2300], //指定数据的坐标位置
  356. value: 2300,
  357. itemStyle: { //图形样式
  358. normal: {color: 'rgb(41,60,85)'}
  359. }
  360. },
  361. {
  362. name: 'highest value',
  363. type: 'max', //最大值
  364. valueDim: 'highest' //在highest维度上的最大值 最高价
  365. },
  366. {
  367. name: 'lowest value',
  368. type: 'min',
  369. valueDim: 'lowest' //最低价
  370. },
  371. {
  372. name: 'average value on close',
  373. type: 'average',
  374. valueDim: 'close' //收盘价
  375. }
  376. ],
  377. tooltip: { //提示框
  378. formatter: function (param) {
  379. return param.name + '<br>' + (param.data.coord || '');
  380. }
  381. }
  382. },
  383.  
  384. /////////////////////////////////图标标线///////////////////////////
  385.  
  386. markLine: {
  387. symbol: ['none', 'none'], //标线两端的标记类型
  388. data: [
  389. [
  390. {
  391. name: 'from lowest to highest',
  392. type: 'min', //设置该标线为最小值的线
  393. valueDim: 'lowest', //指定在哪个维度上的最小值
  394. symbol: 'circle',
  395. symbolSize: 10, //起点标记的大小
  396. label: { //normal默认,emphasis高亮
  397. normal: {show: false}, //不显示标签
  398. emphasis: {show: false} //不显示标签
  399. }
  400. },
  401. {
  402. type: 'max',
  403. valueDim: 'highest',
  404. symbol: 'circle',
  405. symbolSize: 10,
  406. label: {
  407. normal: {show: false},
  408. emphasis: {show: false}
  409. }
  410. }
  411. ],
  412.  
  413. {
  414. name: 'min line on close',
  415. type: 'min',
  416. valueDim: 'close'
  417. },
  418. {
  419. name: 'max line on close',
  420. type: 'max',
  421. valueDim: 'close'
  422. }
  423. ]
  424.  
  425. }
  426.  
  427. },
  428. {
  429. name: 'k_60',
  430. type: 'candlestick', //K线图
  431. data: data_3.values, //y轴对应的数据
  432.  
  433. ////////////////////////图标标注/////////////////////////////
  434.  
  435. markPoint: { //图表标注
  436. label: { //标注的文本
  437. normal: { //默认不显示标注
  438. show:true,
  439. //position:['20%','30%'],
  440. formatter: function (param) { //标签内容控制器
  441. return param != null ? Math.round(param.value) : '';
  442. }
  443. }
  444. },
  445. data: [ //标注的数据数组
  446. {
  447. name: 'XX标点',
  448. coord: ['2013/5/31', 2300], //指定数据的坐标位置
  449. value: 2300,
  450. itemStyle: { //图形样式
  451. normal: {color: 'rgb(41,60,85)'}
  452. }
  453. },
  454. {
  455. name: 'highest value',
  456. type: 'max', //最大值
  457. valueDim: 'highest' //在highest维度上的最大值 最高价
  458. },
  459. {
  460. name: 'lowest value',
  461. type: 'min',
  462. valueDim: 'lowest' //最低价
  463. },
  464. {
  465. name: 'average value on close',
  466. type: 'average',
  467. valueDim: 'close' //收盘价
  468. }
  469. ],
  470. tooltip: { //提示框
  471. formatter: function (param) {
  472. return param.name + '<br>' + (param.data.coord || '');
  473. }
  474. }
  475. },
  476.  
  477. /////////////////////////////////图标标线///////////////////////////
  478.  
  479. markLine: {
  480. symbol: ['none', 'none'], //标线两端的标记类型
  481. data: [
  482. [
  483. {
  484. name: 'from lowest to highest',
  485. type: 'min', //设置该标线为最小值的线
  486. valueDim: 'lowest', //指定在哪个维度上的最小值
  487. symbol: 'circle',
  488. symbolSize: 10, //起点标记的大小
  489. label: { //normal默认,emphasis高亮
  490. normal: {show: false}, //不显示标签
  491. emphasis: {show: false} //不显示标签
  492. }
  493. },
  494. {
  495. type: 'max',
  496. valueDim: 'highest',
  497. symbol: 'circle',
  498. symbolSize: 10,
  499. label: {
  500. normal: {show: false},
  501. emphasis: {show: false}
  502. }
  503. }
  504. ],
  505.  
  506. {
  507. name: 'min line on close',
  508. type: 'min',
  509. valueDim: 'close'
  510. },
  511. {
  512. name: 'max line on close',
  513. type: 'max',
  514. valueDim: 'close'
  515. }
  516. ]
  517.  
  518. }
  519.  
  520. },
  521. {
  522. name: 'k_day',
  523. type: 'candlestick', //K线图
  524. data: data_4.values, //y轴对应的数据
  525.  
  526. ////////////////////////图标标注/////////////////////////////
  527.  
  528. markPoint: { //图表标注
  529. label: { //标注的文本
  530. normal: { //默认不显示标注
  531. show:true,
  532. //position:['20%','30%'],
  533. formatter: function (param) { //标签内容控制器
  534. return param != null ? Math.round(param.value) : '';
  535. }
  536. }
  537. },
  538. data: [ //标注的数据数组
  539. {
  540. name: 'XX标点',
  541. coord: ['2013/5/31', 2300], //指定数据的坐标位置
  542. value: 2300,
  543. itemStyle: { //图形样式
  544. normal: {color: 'rgb(41,60,85)'}
  545. }
  546. },
  547. {
  548. name: 'highest value',
  549. type: 'max', //最大值
  550. valueDim: 'highest' //在highest维度上的最大值 最高价
  551. },
  552. {
  553. name: 'lowest value',
  554. type: 'min',
  555. valueDim: 'lowest' //最低价
  556. },
  557. {
  558. name: 'average value on close',
  559. type: 'average',
  560. valueDim: 'close' //收盘价
  561. }
  562. ],
  563. tooltip: { //提示框
  564. formatter: function (param) {
  565. return param.name + '<br>' + (param.data.coord || '');
  566. }
  567. }
  568. },
  569.  
  570. /////////////////////////////////图标标线///////////////////////////
  571.  
  572. markLine: {
  573. symbol: ['none', 'none'], //标线两端的标记类型
  574. data: [
  575. [
  576. {
  577. name: 'from lowest to highest',
  578. type: 'min', //设置该标线为最小值的线
  579. valueDim: 'lowest', //指定在哪个维度上的最小值
  580. symbol: 'circle',
  581. symbolSize: 10, //起点标记的大小
  582. label: { //normal默认,emphasis高亮
  583. normal: {show: false}, //不显示标签
  584. emphasis: {show: false} //不显示标签
  585. }
  586. },
  587. {
  588. type: 'max',
  589. valueDim: 'highest',
  590. symbol: 'circle',
  591. symbolSize: 10,
  592. label: {
  593. normal: {show: false},
  594. emphasis: {show: false}
  595. }
  596. }
  597. ],
  598.  
  599. {
  600. name: 'min line on close',
  601. type: 'min',
  602. valueDim: 'close'
  603. },
  604. {
  605. name: 'max line on close',
  606. type: 'max',
  607. valueDim: 'close'
  608. }
  609. ]
  610.  
  611. }
  612.  
  613. },
  614.  
  615. { //MA5 5天内的收盘价之和/5
  616. name: 'MA5',
  617. type: 'line',
  618. data: calculateMA(5),
  619. smooth: true,
  620. lineStyle: {
  621. normal: {opacity: 0.5}
  622. }
  623. },
  624. {
  625. name: 'MA10',
  626. type: 'line',
  627. data: calculateMA(10),
  628. smooth: true,
  629. lineStyle: { //标线的样式
  630. normal: {opacity: 0.5}
  631. }
  632. },
  633. {
  634. name: 'MA20',
  635. type: 'line',
  636. data: calculateMA(20),
  637. smooth: true,
  638. lineStyle: {
  639. normal: {opacity: 0.5}
  640. }
  641. },
  642. {
  643. name: 'MA30',
  644. type: 'line',
  645. data: calculateMA(30),
  646. smooth: true,
  647. lineStyle: {
  648. normal: {opacity: 0.5}
  649. }
  650. },
  651.  
  652. ]
  653. };
  654. // 使用刚指定的配置项和数据显示图表
  655. myChart.setOption(option);
  656. myChart.on('legendselectchanged', function(obj) {
  657. var selected_1 = {};
  658. var selected = obj.selected;
  659. var legend = obj.name;
  660. if(selected[legend]){
  661. for(var key in selected){
  662. if(key == legend){
  663. selected_1[key] = true;
  664. }else{
  665. selected_1[key] = false;
  666. selected_1['MA5'] = true;
  667. selected_1['MA10'] = true;
  668. selected_1['MA20'] = true;
  669. selected_1['MA30'] = true;
  670. }
  671. }
  672. option.legend.selected = selected_1;
  673. if(legend == 'k_5'){
  674. data_common = data0;
  675. }
  676. if(legend == 'k_15'){
  677. data_common = data_1;
  678. }
  679. if(legend == 'k_30'){
  680. data_common = data_2;
  681. }
  682. if(legend == 'k_60'){
  683. data_common = data_3;
  684. }
  685. if(legend == 'k_day'){
  686. data_common = data_4;
  687. }
  688. myChart.setOption(option);
  689. }
  690.  
  691. });
  692.  
  693. }
  694. });
  695. });
  696.  
  697. </script>

百度 echarts K线图使用的更多相关文章

  1. 动态更新echarts k线图数据 通过websocket取数据

    1.加载插件,实例化chart.2.链接websocket3.接收数据,处理数据,调用chart的实例,不断更新数据<!DOCTYPE html><html><head ...

  2. 使用ECharts画K线图

    需引入echarts.js插件,开发环境建议选择源代码版本,该版本包含了常见的警告和错误提示.下载地址 http://echarts.baidu.com/download.html 下面是代码,注释很 ...

  3. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  4. echarts画k线图

    var charset = echarts.init(document.getElementById("k_line")) $.get(k_line.url_A).done(fun ...

  5. 【带着canvas去流浪(5)】绘制K线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  6. 带着canvas去流浪系列之五 绘制K线图

    [摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  7. android 股票K线图

    现在在手上的是一个证券资讯类型的app,其中有涉及到股票行情界面,行情中有K线图等,看到网上很多人在求这方面的资料,所以我特地写了一个demo在此处给大家分享一下. 下面是做出来的效果图: 这个 界面 ...

  8. canvas绘图,html5 k线图,股票行情图

    canvas绘图,html5 k线图,股票行情图 canvas跟其他标签一样,也可以通过css来定义样式.但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canva ...

  9. 做股票软件用的各种k线图

    这是各种k线图地址: http://echarts.baidu.com/echarts2/doc/example.html 个人公众号谢谢各位老铁支持 本人qq群也有许多的技术文档,希望可以为你提供一 ...

随机推荐

  1. Myeclipse中java项目转成Web项目

    在eclipse导入一个myeclipse建的web项目后,在Eclipse中显示的还是java项目,按下面的步骤可以将其转换成web项目. 1.找到项目目录下的.project文件 2.编辑.pro ...

  2. 1. Python中如何使用其他语言?(python的胶水作用,python又叫胶水语言)

    1. python中如何插入C语言运行? (1)编写C语言代码: #include<stdio.h> void CFun() { printf("---------我是c语言:- ...

  3. java中常见的异常

    空指针异常类:NullPointerException 类型强制转换异常:ClassCastException 数组负下标异常:NegativeArrayException 数组下标越界异常:Arra ...

  4. js获取url地址的参数的方法

    js获取url参数值 今天说一下如何获取url参数值. 思路 通过location的search就可以获取到url中问号后面的值. 字符串过滤到问号 通过split方法分割参数集合 循环赋值 匹配对应 ...

  5. java命令行编译和运行引用jar包的文件

    经常遇到需要添加第三方jar文件的情况.在命令行状态下要加载外部的jar文件非常麻烦,很不好搞,在网上折腾了很久终于搞定了,在这里做个笔记: 2.运行:java -Djava.ext.dirs=./l ...

  6. (转)python学习笔记5--decimal

    原文:https://blog.csdn.net/lemonwyc/article/details/37583125 上一节提到了除了基本类型之外的decimal,这节就学习下.查看python3.4 ...

  7. mapreduce基本原理

    场景: 一个大小为100T的文件,统计单词"ERROR"和"INFO"的个数 普通做法 是不是效率太低了? 换个方式 说明: 把100T文件分成100份,一台机 ...

  8. Springboot+ajax传输json数组以及单条数据的方法

    Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...

  9. css !important的作用

    css !important的作用是提高指定CSS样式规则的应用优先权. 注意:这个不是万能的,在神奇的IE6下仍然有问题,请参见:http://www.w3chtml.com/css3/rules/ ...

  10. nuxt踩过的坑

    nuxt.js 简单介绍 nuxt官网:https://zh.nuxtjs.org/ 1.nuxt.js的原理图: 具体的原理介绍官网有详细的解释,欢迎移步官网,这里不再复述. 2.nuxt.js的优 ...