echarts K线图

最新推荐文章于 2024-02-01 15:51:22 发布
最新推荐文章于 2024-02-01 15:51:22 发布
阅读量7.4k 收藏 27
点赞数 3
分类专栏： 学习 工作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lgplrcode/article/details/118109407
版权

由于工作需要画K线图，那么使用echarts 来实现k线图，但是由于echarts的k线图不能满足需求，结合了echarts 的k线图实例和日力图实例，再加上自己摸索看官方文档，终于需求实现了，
实例：

在这里插入图片描述

drawLine(data,MA5Price,MA10Price,MA20Price,MA30Price,MA60Price,dn,mb,up,ids,volumes,rsi,rsiABSEma,rsiMaxEma,MA5Volume,MA10Volume,s,rsv,d,j,k,dif,dea,macd,ema12,ema26,r,tr,atr,tradeList){
        this.$nextTick(function () {
          var chartDom = document.getElementById('main');
          var myChart = echarts.init(chartDom);
          var option;

          var upColor = '#ec0000';
          var upBorderColor = '#8A0000';
          var downColor = '#00da3c';
          var downBorderColor = '#008F28';


          // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
          var data0 = splitData(data);
          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
            };
          }
          myChart.setOption(   option = {
            animation: false,
            legend: {
              data: ['K线图','MA5','MA10','MA20','MA30','MA60','dn','mb','up'],
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              },
              confine:true,
              borderWidth: 1,
              borderColor: '#ccc',
              padding: 10,
              textStyle: {
                fontSize: 5, //设置字体大小
                color: '#000'
              },
        
              //  extraCssText: 'width:250px;height:400px;',//提示框大小
            },
            axisPointer: { //十字线
              link: {xAxisIndex: 'all'},
              label: {
                backgroundColor: '#777'
              }
            },

            grid: [
              {
                left: '10%',
                right: '8%',
                height: '40%'
              },
              {
                left: '10%',
                right: '8%',
                top: '50%',
                height: '10%'
              },
              {
                left: '10%',
                right: '8%',
                top: '60%',
                height: '5%'
              },
              {
                left: '10%',
                right: '8%',
                top: '65%',
                height: '5%'
              },
              {
                left: '10%',
                right: '8%',
                top: '70%',
                height: '5%'
              },
              {
                left: '10%',
                right: '8%',
                top: '75%',
                height: '5%'
              },
              {
                left: '10%',
                right: '8%',
                top: '80%',
                height: '5%'
              },
              {
                left: '10%',
                right: '8%',
                top: '85%',
                height: '5%'
              },
              {
                left: '10%',
                right: '8%',
                top: '90%',
                height: '5%'
              },

              { //调
                left: '10%',
                right: '8%',
                top: '95%',
                height: '5%'
              },
            ],
            xAxis: [
              {
                type: 'category',
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                  z: 100
                }
              },
              {
                type: 'category',
                gridIndex: 1,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 2,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 3,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 4,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 5,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 6,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 7,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 8,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 9,
                data: data0.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
              }
            ],
            yAxis: [
              {
                scale: true,
                splitArea: {
                  show: true
                }
              },
              {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              },
              {
                name:'volume:',

                scale: true,
                gridIndex: 2,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              },
              {
                name:'RSI:',

                scale: true,
                gridIndex: 3,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              },
              {
                name:'VolumeMA:',

                scale: true,
                gridIndex: 4,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              },
              {
                name:'KDJ:',

                scale: true,
                gridIndex: 5,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              },
              {
                name:'MACD:',

                scale: true,
                gridIndex: 6,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              },
              {
                name:'ema:',

                scale: true,
                gridIndex: 7,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              },
              {
                name:'WR:',

                scale: true,
                gridIndex: 8,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              },
              {
                name:'ATR:',

                scale: true,
                gridIndex: 9,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              }
            ],
            dataZoom: [
              {
                type: 'inside',
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              },
              {
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                type: 'slider',
                top: '96%',
                start: 0,
                end: 100
              }
            ],
            series: [
              {
                name: 'K线图',
                type: 'candlestick',
                data: data0.values,
                itemStyle: {
                  color: upColor,
                  color0: downColor,
                  borderColor: upBorderColor,
                  borderColor0: downBorderColor
                },
                markPoint: {
                  label: {
                    normal: {
                      formatter: function (param) {
                        return param != null ? param.value: '';
                      }
                    }
                  },
                  data: tradeList,
                },
                markLine: {
                  symbol: ['none', 'none'],
                  data: [
                    [
                      {
                        name: 'from lowest to highest',
                        type: 'min',
                        valueDim: 'lowest',
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                          show: false
                        },
                        emphasis: {
                          label: {
                            show: false
                          }
                        }
                      },
                      {
                        type: 'max',
                        valueDim: 'highest',
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                          show: false
                        },
                        emphasis: {
                          label: {
                            show: false
                          }
                        }
                      }
                    ],
                    {
                      name: 'min line on close',
                      type: 'min',
                      valueDim: 'close'
                    },
                    {
                      name: 'max line on close',
                      type: 'max',
                      valueDim: 'close'
                    },
                    {
                      name: 'highest value',
                      type: 'max',
                      valueDim: 'highest'
                    },
                    {
                      name: 'lowest value',
                      type: 'min',
                      valueDim: 'lowest'
                    },
                  ]
                },

              },
              {
                name: 'MA5',
                type: 'line',
                data: MA5Price,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'MA10',
                type: 'line',
                data: MA10Price,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'MA20',
                type: 'line',
                data: MA20Price,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'MA30',
                type: 'line',
                data: MA30Price,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {//消除空，不然图有错误
                type: 'line',
                data: [],
              },
              {
                name: 'MA60',
                type: 'line',
                data: MA60Price,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'dn',
                type: 'line',
                data: dn ,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'mb',
                type: 'line',
                data: mb,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'up',
                type: 'line',
                data: up ,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'Volume',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: volumes,
                itemStyle: {
                  normal: {
                    color: function(params) {
                      var colorList;
                      if (params.data[2]==-1) {
                        colorList = upColor;
                      } else {
                        colorList =  downColor;
                      }
                      return colorList;
                    }
                  }
                }
              },
              //RSI
              {
                name: 'rsi',
                type: 'line',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: rsi ,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'rsiABSEma',
                type: 'line',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: rsiABSEma ,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'rsiMaxEma',
                type: 'line',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: rsiMaxEma ,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              //VolumeMA
              {
                name: 'MA5Volume',
                type: 'line',
                xAxisIndex: 3,
                yAxisIndex: 3,
                data: MA5Volume ,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'MA10Volume',
                type: 'line',
                xAxisIndex: 3,
                yAxisIndex: 3,
                data: MA10Volume,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              //KDJ
              {
                name: 's',
                type: 'line',
                xAxisIndex: 4,
                yAxisIndex: 4,
                data: s,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'rsv',
                type: 'line',
                xAxisIndex: 4,
                yAxisIndex: 4,
                data: rsv,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'd',
                type: 'line',
                xAxisIndex: 4,
                yAxisIndex: 4,
                data: d,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'j',
                type: 'line',
                xAxisIndex: 4,
                yAxisIndex: 4,
                data: j,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'k',
                type: 'line',
                xAxisIndex: 4,
                yAxisIndex: 4,
                data: k,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              //MACD
              {
                name: 'dif',
                type: 'line',
                xAxisIndex: 5,
                yAxisIndex: 5,
                data: dif,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'dea',
                type: 'line',
                xAxisIndex: 5,
                yAxisIndex: 5,
                data: dea,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'macd',
                type: 'line',
                xAxisIndex: 5,
                yAxisIndex: 5,
                data: macd,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'ema12',
                type: 'line',
                xAxisIndex: 6,
                yAxisIndex: 6,
                data: ema12,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'ema26',
                type: 'line',
                xAxisIndex: 6,
                yAxisIndex: 6,
                data: ema26,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'r',
                type: 'line',
                xAxisIndex: 7,
                yAxisIndex: 7,
                data: r,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'tr',
                type: 'line',
                xAxisIndex: 8,
                yAxisIndex: 8,
                data: tr,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'atr',
                type: 'line',
                xAxisIndex: 8,
                yAxisIndex: 8,
                data: atr,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
            ]
          },true)

        });
        option && myChart.setOption(option);
      },

接口数据太多了就不放在这了。这是我改的官方日力图的代码，效果一样的，

var upColor = '#00da3c';
var downColor = '#ec0000';


function splitData(rawData) {
    var categoryData = [];
    var values = [];
    var volumes = [];
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
        volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
    }

    return {
        categoryData: categoryData,
        values: values,
        volumes: volumes
    };
}

function calculateMA(dayCount, data) {
    var result = [];
    for (var i = 0, len = data.values.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += data.values[i - j][1];
        }
        result.push(+(sum / dayCount).toFixed(3));
    }
    return result;
}

$.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {

    var data = splitData(rawData);

    myChart.setOption(option = {
        animation: false,
        legend: {
            bottom: 10,
            left: 'center',
            data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
                color: '#000'
            },
            position: function (pos, params, el, elRect, size) {
                var obj = {top: 10};
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                return obj;
            }
            // extraCssText: 'width: 170px'
        },
        axisPointer: {
            link: {xAxisIndex: 'all'},
            label: {
                backgroundColor: '#777'
            }
        },
       
        visualMap: {
            show: false,
            seriesIndex: 5,
            dimension: 2,
            pieces: [{
                value: 1,
                color: downColor
            }, {
                value: -1,
                color: upColor
            }]
        },
        grid: [
            {
                left: '10%',
                right: '8%',
                height: '50%'
            },
            {
                left: '10%',
                right: '8%',
                top: '63%',
                height: '16%'
            },
              {
                left: '10%',
                right: '8%',
                top: '73%',
                height: '16%'
            }
        ],
        xAxis: [
            {
                type: 'category',
                data: data.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    z: 100
                }
            },
            {
                type: 'category',
                gridIndex: 1,
                data: data.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            },
             {
                type: 'category',
                gridIndex: 2,
                data: data.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            },
             {
                scale: true,
                gridIndex: 2,
                splitNumber: 3,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 98,
                end: 100
            },
            {
                show: true,
                xAxisIndex: [0, 1],
                type: 'slider',
                top: '85%',
                start: 98,
                end: 100
            },
              {
                show: true,
                xAxisIndex: [0, 1, 2],
                type: 'slider',
                top: '85%',
                start: 98,
                end: 100
            },
              
        ],
        series: [
            {
                name: 'Dow-Jones index',
                type: 'candlestick',
                data: data.values,
                itemStyle: {
                    color: upColor,
                    color0: downColor,
                    borderColor: null,
                    borderColor0: null
                },
             
            },
            {
                name: 'MA5',
                type: 'line',
                data: calculateMA(5, data),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'MA10',
                type: 'line',
                data: calculateMA(10, data),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'MA20',
                type: 'line',
                data: calculateMA(20, data),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'MA30',
                type: 'line',
                data: calculateMA(30, data),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'Volume',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data.volumes
            },
            {
                name: 'Volume',
                type: 'line',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: data.volumes
            }
        ]
    }, true);

});

可以在官方日力图实例看下

撸猫的咸鱼
关注
  • 3
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
极致呈现系列之：Echarts K线图的数据量化
九仞山的专栏
06-25 701
介绍了Echart中K线图的特性及、应用场景及其使用方法
使用ECharts画K线图
qq_25285531的博客
08-17 477
需引入echarts.js插件，开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。下载地址http://echarts.baidu.com/download.html 下面是代码，注释很清楚，主要是js代码，可根据项目进行增删！配置项说明：http://echarts.baidu.com/option.html#title <!DOCTYPE html> <h...
基于 Echarts 的 Python 图表库：Pyecahrts交互式的K线图（股票）
happy game
02-01 2230
K线图（K-Line Chart）是用于显示金融市场价格走势的一种图表形式，主要用于股票、期货、外汇等交易市场的技术分析。K线图是由一系列矩形图组成，每个矩形图被称为一个K线（Kandlestick）。每个K线代表一定时间内的价格走势，常见的时间周期包括分钟、小时、日等。每个K线通常包括四个价格点，分别是开盘价（Open）、收盘价（Close）、最高价（High）和最低价（Low）。这四个价格点构成了K线的矩形，通过不同的颜色和形状来表示价格走势。常见的K线颜色分为两种，通常是实心和空心，或者涂色和未涂色。
ECharts从零开始（六）—— Candlestick & Scatter
邱邱邱的博客
09-07 1837
这篇博文主要介绍k线图、散点图（scatter） 一、k线图 K线图，全名为Candlestick。一个K线图中包含四个数据，即开盘价、最高价、最低价、收盘价，所有的k线都是围绕这四个数据展开，反映大势的状况和价格信息。 当开盘价低于收盘价时，表明当天是盈利的，称作阳线；当开盘价高于收盘价时，表明当天是亏损的，称作阴线。 在涨和停的颜色分布上，默认为“红涨蓝停”或红涨绿停，可以在itemSty...
比TradingView 更轻量级 K线图 KLineChart vue dome
热门推荐
renlang7090的博客
04-16 1万+
klinechart 是一个轻量级的K线图插件（基于html5 canvas构建，图表支持20种技术指标，支持自定义指标参数，支持绘制标记图形，支持自定义样式）https://github.com/liihuu/KLineChart 相比tradingview 更适合小白 <template> <div class="chart" v-loading="char...
echarts绘制股票K线图 python+echarts+爬虫
marvinmao的博客
08-01 2332
本项目通过爬虫爬取上证和深证股市股票列表，然后批量获取每只股票2018年到2020年每天的交易情况，在通过sanic和echarts在前端页面生成对应股票的k线图 项目目录如下 index.html代码，前端页面 echarts的js代码在echarts官网案例里面复制K线图代码，替换数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src
echarts k线图日k图数据
10-25
echarts k线图日k图数据
如何使用Echarts设计专业的K线图
01-08
在本文中，我们将深入探讨如何使用Echarts库创建专业的K线图，这是一种广泛应用于金融数据分析的图表类型。Echarts是一个基于JavaScript的开源可视化库，它提供了丰富的图表类型和高度定制化的能力，使得开发者能够...
基于echarts的股票k线图分析和展示项目源码.zip
04-11
基于echarts的股票k线图分析和展示项目源码.zip基于echarts的股票k线图分析和展示项目源码.zip基于echarts的股票k线图分析和展示项目源码.zip基于echarts的股票k线图分析和展示项目源码.zip基于echarts的股票k线图...
vue+Echarts绘制k线图(二)-分时图和交易量图
最新发布
04-29
vue vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-...
C#MVC echart k线图实例
01-15
k线图，解决k线每个块颜色如何设置的问题。代码完整可运行
股票K线图php
12-23
采用的技术是echarts,数据是从一些网站获取到的，比如新浪、证券之星、雅虎等等，你可以去找，都是免费的，数据也是和股票市场一样的，这个例子使用php做的，效果可以说是非常完美
echarts-java类库K线图例子
qq_21228073的博客
12-01 1813
闲着无聊发个以前用echarts-java写的K线图，之前刚学，网上找了好久都没找到，包括bar，line，map，等图，自己摸索了好久，图片用的是百度的，自己的图片涉及到公司数据，不方便展示
java+web+股票图表_基于Echarts的股票K线图展示
weixin_39760857的博客
02-27 1030
一、概述这是一个简单的股票K线图展示，利用echarts第三方进行配置，用户可以进行放大缩小查看K线图，还可进行拖拽。二、演示效果三、目录结构其中dist文件夹是echart插件，jquery的引用是为了打开网页后F11自适应全屏四、详细步骤1、meta标签配置2、文件引用3、添加全局样式，图表容器*{margin:0;padding:0}html,body{width:100%;height:1...
ECharts pictorialBar错位问题, 一般在value为0时出现
qq_53702986的博客
04-03 883
ECharts pictorialBar错位问题, 当某一条柱子 pictorialBar 的值为0时, 就会出现错位导致影响其他柱子的点击事件 直接查看解决方法
Python + Echarts + PyQt5在量化软件中实现动态刷新K线
玄穹高金阙玉辰
03-06 8420
Echarts+ PyQt5在量化软件中实现实时刷新K线 先上效果图： 在上一篇博客 《如何使用Echarts设计专业的K线图》中我已经描述了怎么设计出专业漂亮的K线图，这里就不再累赘。 接下来我就上篇所设计的效果，移植到Python + PyQt5中，进行详细的过程分解。 1、首先使用QT设计师，Qt Designer创建一个主窗体 在我们新建的窗体中放置一个Grid布局，并将整体...
百度 echarts K线图使用
u011927449的博客
07-24 724
看个效果图先 首先在需要插入图例的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是我改动后的。原...
php k线图 echarts,利用ECharts.js画K线图的方法示例
weixin_32019329的博客
03-18 553
前言最近有一个统计的项目要做，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。MSChart这个是Visual Studio里的自带控件，使用比较简单，不过数据这块需要在后台绑定。ichartjs是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 支持饼图、环形图、折线图、面积图、柱形图、条形图等。Chart.js也...
Vue+TS Echarts股票图
qq_42683219的博客
07-22 2191
一、效果图 二、echarts 股票配置 根据dom 生成echarts 实例 (this as any)[instance] = echarts.init(this.$refs[ref] as HTMLBaseElement); //创建实例 注:instance,ref是变量需要外部传入 2. 股票基础配置 import ECHARTSOPTIONSCONFIG from './config/echartConfig';//导入 /* ...... ... .. */ (this a
echarts k线图
08-23
要在网页中使用 ECharts 来绘制 K 线图，你需要引入 ECharts 库，并编写相应的代码来配置和绘制图表。 以下是一个简单的示例，展示了如何使用 ECharts 绘制一个基本的 K 线图： HTML： ```html ; height: 500px;">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值