echarts 开发股票净值走势图记录

需求：使用echarts插件制作类似股票价值的图表。

先获取官网实例制作k线图，自己再自定义配置tooltip。

• 标记：
  需要在图表上自定义标点，可使用 markPoint ；自定义标记对应数据， coord: [x轴值，对应数据value]。
• 自定义tooltip内容：
  可使用 formatter ，可接收String or Function(params, ticket, callback)。
  函数返回值，可返回html结构值。

先上代码：

// 将获取到的json格式转换成所需要的格式
function splitData(rawData) {
    var categoryData = [];
    var values = [];
    var max = [];
    var min = [];
    var options = [];
    var volumes = [];
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i][0]);
        values.push(rawData[i][1]);
        min.push(rawData[i][2]);
        max.push(rawData[i][3]);
        options.push([i, Math.abs(rawData[i][4]), rawData[i][4] > 0 ? 1 : -1]);
        volumes.push(rawData[i][5]);
    }
    return {
        categoryData: categoryData,
        values: values,
        min: min,
        max: max,
        options: options,
        volumes: volumes
    };
}
// 过滤是否有 买卖 操作
function fliterData(data) {
  var len = data.options.length
  var point = []
  for (var i = 0; i < len; i ++) {
    if (data.options[i][1]) {
      point.push({
        name: data.options[i][2] > 0 ? '买入' : '卖出',
        coord: [data.categoryData[i], data.values[i]],
        itemStyle: {
          color: 'red'
        }
      })
    }
  }
  return point
}
// ajax xxxxxxxxxxxxxxxxxxxxxx
// ajax获取到的json格式数组  [["05-03\n2020", 1.331, 1.21, 1.51, 0, 333]]
rawData = []

var data = splitData(rawData);
var point = fliterData(data)
option = {
          backgroundColor: '#fff',
          animation: true,
          legend: {
              bottom: 0,
              left: 'center',
              data: ['单位净值', '最高', '最低']
          },
          tooltip: {
            trigger: 'axis',
            triggerOn: 'click',
            show: true,
            axisPointer: {
              animation: true,
              type: 'cross',
              label: {
                
              },
            },
            formatter: function (params, ticket, callback) {
              var index = params[0].dataIndex
              var str = ''
              var color = '#00da3c'
              if (data.options[index][1]) {
                var _o = data.options[index][2] > 0 ? '买入' : '卖出'
                color =  data.options[index][2] > 0 ? '#00da3c' : 'red'
                str = '操作: ' + _o + data.options[index][1] + '份'
              }
              return `
              <div style="min-width: 200px">
                ${params[0].axisValue} <br>
                ${params[0].seriesName}: ${params[0].value} <br>
                ${params[1].seriesName}: ${params[0].value} <br>
                ${params[2].seriesName}: ${params[0].value} <br>
                ${params[3].seriesName}: ${params[0].value} <br>
                <b style="color: ${color}">${str}</b>
              </div>
              `
            },
            position: function (pos, params, el, elRect, size) {
              var obj = {top: 10};
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
              return obj;
            }
          },
          axisPointer: {
            link: {
              xAxisIndex: 'all'
            },
          },
          grid: [
            {
              left: '10%',
              right: '8%',
              height: '50%'
            },
            {
              left: '10%',
              right: '8%',
              top: '63%',
              height: '16%'
            }
          ],
          xAxis: [
            {
                type: 'category',
                data: data.categoryData,
                scale: true,
                boundaryGap: true,
                axisLine: {onZero: false},
                splitLine: {show: false},
                axisPointer: {
                  z: 100
                }
            },
            {
              type: 'category',
              gridIndex: 1,
              data: data.categoryData,
              scale: true,
              boundaryGap: true,
              axisLine: {onZero: false},
              axisTick: {show: false},
              splitLine: {show: false},
              axisLabel: {show: false},
            }
          ],
          yAxis: [
              {
                scale: true,
                splitArea: {
                    show: true
                }
              },
              {
                scale: true,
                gridIndex: 1,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              }
          ],
          dataZoom: [
              {
                show: true,
                xAxisIndex: [0, 1],
                type: 'slider',
                top: '85%',
                start: 0,
                end: 100
              }
          ],
          series: [
              {
                  name: '单位净值',
                  type: 'line',
                  data: data.values,
                  smooth: true,
                  itemStyle: {
                    color: upColor
                  },
                  symbolSize: 1,
                  hoverAnimation: false,
                  markPoint: {
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                      show: true
                    },
                    data: point
                  },
              },
              {
                  name: '最高',
                  type: 'line',
                  data: data.max,
                  smooth: true,
                  symbolSize: 0,
                  hoverAnimation: false,
              },
              {
                name: '最低',
                type: 'line',
                data: data.min,
                smooth: true,
                symbolSize: 0,
                hoverAnimation: false,
              },
              {
                name: '持仓份额',
                type: 'bar',
                itemStyle: {
                  color: upColor
                },
                smooth: true,
                data: data.volumes,
                xAxisIndex: 1,
                yAxisIndex: 1
              }
          ]
      }

效果如下：