EChart使用心得（二）K线图事例

最新推荐文章于 2024-07-17 17:18:03 发布

qq_37320586

最新推荐文章于 2024-07-17 17:18:03 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/qq_37320586/article/details/56014817

版权

本文介绍了如何使用ECharts库创建并详细配置K线图，包括设置图表标题、提示框、图例、工具箱、数据缩放等功能，并展示了具体的代码示例，特别是对上证指数K线数据的展示和格式化。

摘要由CSDN通过智能技术生成

代码解释如下：数据减去了十分之九

var myChart = echarts.init(document.querySelector("#main"));

var option = {
  

   title:{               //表格名称在左上角显示
      text:"firstK",

   },

   tooltip:{               //提示框，鼠标悬浮交互时的信息提示。
              trigger:"axis",     

               //触发类型，默认值为item 可选值为 item，axis  为item只会显示改点的数据，为axis时会显示该列下所有坐标轴对应的数据

              formatter: function (params) { //内容格式器：{string}（Template） | {Function}，支持异步回调见表格下方
               var res = params[0].seriesName + '' + params[0].name;

               res += '

 开盘:' + params[0].value[0] + "最高:" +params[0].value[3];

               res += '

 收盘:' + params[0].value[1] + "最低:" +params[0].value[2];

               return  res;