vue3 echarts 大数据量K线图 代码

以下是一个简单的 Vue3 Echarts 大数据量 K 线图代码示例：

1. 安装 Echarts：

  npm install echarts --save

2. 在 Vue3 中使用 Echarts：

  <template>
    <div ref="echarts" style="width:100%;height:500px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'KLineChart',
    props: {
      // K线图的数据
      data: {
        type: Array,
        required: true
      }
    },
    mounted() {
      this.initEcharts();
    },
    methods: {
      initEcharts() {
        const chart = echarts.init(this.$refs.echarts);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          xAxis: {
            type: 'category',
            data: this.data.map(item => item[0]),
            scale: true,
            boundaryGap: false,
            axisLine: {
              onZero: false
            },
            splitLine: {
              show: false
            },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
          },
          yAxis: {
            scale: true,
            splitArea: {
              show: true
            }
          },
          series: [
            {
              type: 'candlestick',
              data: this.data,
              itemStyle: {
                color: '#ef232a',
                color0: '#14b143',
                borderColor: '#ef232a',
                borderColor0: '#14b143'
              },
              markPoint: {
                label: {
                  formatter: function (param) {
                    return param != null ? Math.round(param.value) : '';
                  }
                },
                data: [
                  {
                    name: 'XX标点',
                    coord: ['2013/5/31', 2300],
                    value: 2300,
                    itemStyle: {
                      color: 'rgb(41,60,85)'
                    }
                  },
                  {
                    name: 'highest value',
                    type: 'max',
                    valueDim: 'highest'
                  },
                  {
                    name: 'lowest value',
                    type: 'min',
                    valueDim: 'lowest'
                  },
                  {
                    name: 'average value on close',
                    type: 'average',
                    valueDim: 'close'
                  }
                ],
                tooltip: {
                  formatter: function (param) {
                    return param.name + '<br>' + (param.data.coord || '');
                  }
                }
              },
              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'
                  }
                ]
              }
            }
          ]
        };
        chart.setOption(option);
      }
    }
  }
  </script>

3. 在其他组件中使用 KLineChart 组件，并传递数据：

  <template>
    <div>
      <KLineChart :data="klineData" />
    </div>
  </template>
  
  <script>
  import KLineChart from '@/components/KLineChart';
  
  export default {
    name: 'MyComponent',
    components: { KLineChart },
    data() {
      return {
        klineData: [
          ['2017/7/3', 2797.38, 2818.31, 2796.01, 2825.08],
          ['2017/7/4', 2815.18, 2845.35, 2815.02, 2852.09],
          ['2017/7/5', 2843.01, 2854.4, 2836.34, 2859.04],
          ['2017/7/6', 2871.02, 2871.02, 2840.7, 2875.88],
          ['2017/7/7', 2870.5, 2871.42, 2842.1, 2878.21],
          ['2017/7/10', 2841.35, 2852.22, 2837.4, 2853.55]
        ]
      }
    }
  }
  </script>