echarts上根据时间戳打点

兜小糖的小秃毛

于 2024-04-11 15:13:01 发布

阅读量180

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Roy__Jason/article/details/137624283

版权

文章详细描述了一个JavaScript对象，展示了如何配置一个图表，用于显示股票的当前价格、成交量等信息，包括颜色、动画效果、轴标签和数据系列的样式。

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

  const options = {
    backgroundColor: 'transparent',
    animationDuration: 5000,
    title: {
      text: [`{a|[${fundInfo.stockName}] ${fundInfo.stockCode}}`, `{b|${(fundInfo.exunbusibuy / 10000).toFixed(2)}万元}`, `{c|${(fundInfo.exunbusisale / 10000).toFixed(2)}万元}`, `{${data.priceLimit == 0 ? 'd' : (data.priceLimit > 0 ? 'b' : 'c')}|${data.priceLimit}%}`].join(''),
      // text:fundInfo.stockName,
      left: 10,
      top: 0,
      textStyle: {
        rich: {
          a: {
            color: '#fff',
            fontSize: 13,
            // fontWeight: '550',
            marginRight: '10px',
          },
          b: {
            color: '#F50057',
            fontSize: 13,
            // fontWeight: '550',
            padding: [2, 4],
          },
          c: {
            color: '#1de9b6',
            fontSize: 13,
            // fontWeight: '550',
            padding: [2, 4],
          },
          d: {
            color: 'skyblue',
            fontSize: 13,
            // fontWeight: '550',
            padding: [2, 4],
          },
        },
      },
    },
    tooltip: {
      hideDelay: 500,
      trigger: 'axis',
      axisPointer: {
        crossStyle: {
          color: '#999',
        },
      },
    },

    visualMap: {
      show: false,
      seriesIndex: 1,
      dimension: 2,
      pieces: [
        {
          value: 1,
          color: '#F50057',
        },
        {
          value: -1,
          color: '#1DE9B6',
        },
      ],
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all',
        },
      ],
    },
    grid: [
      {
        left: 50, //图形距离左边的距离
        right: 10,
        top: 35,
        width: '75%',
        height: 120, // 图表的高度
      },
      {
        left: 50,
        right: 10,
        top: 165,
        bottom: 0,
        width: '75%',
        height: 45,
      },
    ],
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisPointer: {
          type: 'shadow',
        },

        axisLine: {
          show: false,
          lineStyle: {
            color: '#474747',
          },
        },
        data: timeLineGroup,
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E5E5E5',
            width: 0.3,
            type: 'solid',
          },
        },
        boundaryGap: true,
      },
      {
        gridIndex: 1,
        type: 'category',
        data: timeLineGroup,
        boundaryGap: false,
        axisLabel: {
          interval: 0,
          color: "#97DDFA",
          formatter: function (val: any, index: any) {
            if (index === 0) return '09:30';
            if (index === 60) return '10:30';
            if (index === 120) return '11:30/13:00';
            if (index === 180) return '14:00';
            if (index === 240) return '15:00';
            return '';
          },
        },
        axisTick: {
          interval: function (index: any, value: any) {
            const indexs = [0, 60, 120, 180, 240];
            if (indexs.includes(index)) return true;
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        color: '#fff',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E5E5E5',
            width: 0.1,
            type: 'solid',
          },
        },
        scale: true,
        interval: data.lineYvalueGap,
        min: data.lineYvalueMin,
        max: data.lineYvalueMax,
        z: 5,
        axisLabel: {
          show: true,
          inside: true,
          margin: -5,
          fontSize: 12,
          align: 'right',
          formatter: function (value: any) {
            if (value > data.preClosPrice) {
              return '{red|' + value + '}';
            } else {
              return '{green|' + value + '}';
            }
          },
          rich: {
            green: { color: '#1DE9B6' },
            red: { color: '#F50057' },
          },
        },
      },
      {
        scale: true,
        gridIndex: 1,
        type: 'value',
        min: data.barYvalueMin,
        max: data.barYvalueMax,
        splitNumber: 2,
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          inside: true,
          show: true,
          showMinlabel: true,
          showMaxlabel: true,
          color: '#fff',
          margin: -5,
          fontSize: 12,
          align: 'right',
          formatter: function (value: any, index: any) {
            if (index === 0) {
              return '0手';
            }
            return `${value}手`;
          },
        },
      },
      {
        gridIndex: 0,
        type: 'value',
        max: data.fractionYvaluemMax,
        min: data.fractionYvaluemMin,
        interval: data.fractionYvaluemGap,
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
            type: 'solid',
          },
        },
        axisLine: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        scale: true,
        // splitNumber: 1,
        z: 3,
        boundaryGap: false,
        axisLabel: {
          show: true,
          inside: true,
          margin: -5,
          fontSize: 12,
          align: 'left',
          formatter: function (val: any) {
            return `${val}%`;
          },
          textStyle: {
            color: function (val: any, index: any) {
              return val > 0 ? '#F50057' : val < 0 ? '#1DE9B6' : 'skyblue';
            },
          },
        },
      },
    ],
    series: [
      {
        name: '当前价格',
        type: 'line',
        animation: false,
        smooth: true,
        symbol: 'none',
        data: data.lineData,
        lineStyle: {
          color: 'skyblue',
          width: 1,
        },
        z: 3,
        markPoint: {
          data: markPointData
        },
      },
      {
        name: '成交量',
        type: 'bar',
        animation: false,
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: data.barData,
        barWidth: 1,
        itemStyle: {
          normal: {
            color: function (params: any) {
              if (params.data[2]) {
                // console.log(params.data[2],'params.data[2]')
                return '#F50057';
              } else {
                return '#1DE9B6';
              }
            },
          },
        },
      },
    ],
  };