快乐的小猪哥哥 2021-01-08 09:29 采纳率: 63.6%
浏览 20
已结题

echarts搞个图表哈

用echarts搞个类似于https://www.lookintobitcoin.com/charts/bitcoin-investor-tool/ 这样的图表；

Json地址：http://api.btc126.cn/lookintobitcoin.php?from=2YearMA  

json已经加header("Access-Control-Allow-Origin: *");可以直接调用。

 

  • 写回答

8条回答 默认 最新

  • qq_1872583947 2021-01-08 16:19
    关注

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>    
      </head>
      <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById("main"));
          $.getJSON('https://api.btc126.cn/lookintobitcoin.php?from=2YearMA', function(data) {

            const a = data.props.children[0].props.figure.data;
            // console.log('a', a)

            var option = {
              title: {
                text: '大标题',
                subtext: '副标题',
                left: 'center'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'line',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                },
                formatter: function(params) {
                  // console.log(params)
                  // 这里自己调整
                  return params[0].name
                }
              },
              legend: {
                left: '2%',
                bottom: '0%',
                data: [a[4].name, a[2].name, a[0].name]
              },
              toolbox: {
                show: true,
                feature: {
                  dataZoom: {
                    yAxisIndex: 'none'
                  },
                  dataView: {
                    readOnly: false
                  },              
                  restore: {},
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                splitLine: {
                  show: true
                },
                data: a[0].x,
                axisLabel: {
                  formatter: function(e) {
                    var year = e.split('-')[0]
                    return year
                  }
                }
              },
              yAxis: {
                type: 'log',
                position: 'right',
                name: 'BTC Price (USD)',
                nameLocation: 'middle',
                nameGap: 48,
                splitLine: {
                  show: false
                },
                axisLabel: {
                  formatter: '${value}'
                },
                max: 100000
              },

              series: [{
                  name: a[0].name,
                  type: 'line',
                  data: a[0].y,
                  stack: 'a',
                },
                {
                  type: 'line',
                  data: a[1].y.map((o, i) => o - a[0].y[i]),
                  stack: 'a',
                  areaStyle: {
                    color: '#cccccc'
                  },
                  lineStyle: {
                    opacity: 0
                  }
                },
                {
                  type: 'line',
                  data: a[3].y,
                  stack: 'b',
                  lineStyle: {
                    opacity: 0
                  }
                },
                {
                  name: a[2].name,
                  type: 'line',
                  data: a[2].y.map((o, i) => o - a[3].y[i]),
                  stack: 'b',
                  areaStyle: {
                    color: '#cccccc'
                  }
                },
                {
                  name: a[4].name,
                  type: 'line',
                  data: a[4].y,
                }
              ]
            };
            myChart.setOption(option);

          });
        </script>
      </body>
    </html>

     

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)

报告相同问题？

悬赏问题

  • ¥15 用三极管设计—个共射极放大电路
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示