105Echarts - K 线图(Basic Candlestick)

简介: 105Echarts - K 线图(Basic Candlestick)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/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'));
      var option;
      option = {
        xAxis: {
          data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
        },
        yAxis: {},
        series: [{
          type: 'k',
          data: [
            [20, 30, 10, 35],
            [40, 35, 30, 55],
            [33, 38, 33, 40],
            [40, 40, 32, 42]
          ]
        }]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
152Echarts - 旭日图(Basic Sunburst)
152Echarts - 旭日图(Basic Sunburst)
67 0
146Echarts - 矩形树图(Basic Treemap)
146Echarts - 矩形树图(Basic Treemap)
212 0
163Echarts - 桑基图(Basic Sankey)
163Echarts - 桑基图(Basic Sankey)
76 0
157Echarts - 平行坐标系(Basic Parallel)
157Echarts - 平行坐标系(Basic Parallel)
38 0
108Echarts - 雷达图(Basic Radar Chart)
108Echarts - 雷达图(Basic Radar Chart)
45 0
67Echarts - 散点图(Basic Scatter Chart)
67Echarts - 散点图(Basic Scatter Chart)
45 0
04Echarts - 折线图(Basic area chart)
04Echarts - 折线图(Basic area chart)
40 0
03Echarts - 折线图(Basic Line Chart)
03Echarts - 折线图(Basic Line Chart)
46 0
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
60 1
|
1月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
236 0
下一篇
无影云桌面