vue+Echarts绘制k线图–分时图和交易量图写出实现的具体代码

以下是基于vue和Echarts绘制k线图以及分时图和交易量图的具体代码：

1. 绘制k线图

template:

<template>
  <div ref="kLineChart" style="width: 100%; height: 500px;"></div>
</template>

script:

<script>
import * as echarts from 'echarts';

export default {
  name: 'KLineChart',
  data() {
    return {
      chart: null,
      option: null,
    };
  },
  mounted() {
    this.initChart();
    this.renderChart();
  },
  methods: {
    // 初始化图表
    initChart() {
      this.chart = echarts.init(this.$refs.kLineChart);
    },
    // 渲染图表
    renderChart() {
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        legend: {
          data: ['K线图'],
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
        },
        xAxis: {
          type: 'category',
          data: ['2022/01/01', '2022/01/02', '2022/01/03', '2022/01/04', '2022/01/05'],
          axisLine: {
            lineStyle: {
              color: '#8392A5',
            },
          },
        },
        yAxis: {
          scale: true,
          axisLine: {
            lineStyle: {
              color: '#8392A5',
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: 'K线图',
            type: 'candlestick',
            data: [
              [100, 200, 80, 180],
              [150, 280, 120, 250],
              [120, 220, 100, 200],
              [180, 260, 160, 240],
              [160, 240, 120, 200],
            ],
            itemStyle: {
              color: '#00da3c',
              color0: '#ec0000',
              borderColor: '#00da3c',
              borderColor0: '#ec0000',
            },
            markLine: {
              symbol: ['none', 'none'],
              lineStyle: {
                type: 'dashed',
              },
              data: [
                [{ name: '2022/01/01' }, { name: '2022/01/05' }],
              ],
            },
          },
        ],
      };

      this.chart.setOption(this.option);
    },
  },
};
</script>

2. 绘制分时图和交易量图

template:

<template>
  <div ref="timeVolumeChart" style="width: 100%; height: 500px;"></div>
</template>

script:

<script>
import * as echarts from 'echarts';

export default {
  name: 'TimeVolumeChart',
  data() {
    return {
      chart: null,
      option: null,
    };
  },
  mounted() {
    this.initChart();
    this.renderChart();
  },
  methods: {
    // 初始化图表
    initChart() {
      this.chart = echarts.init(this.$refs.timeVolumeChart);
    },
    // 渲染图表
    renderChart() {
      this.option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['分时图', '交易量'],
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
        },
        xAxis: [
          {
            type: 'category',
            data: ['2022/01/01', '2022/01/02', '2022/01/03', '2022/01/04', '2022/01/05'],
            axisLine: {
              lineStyle: {
                color: '#8392A5',
              },
            },
          },
          {
            type: 'category',
            data: ['2022/01/01', '2022/01/02', '2022/01/03', '2022/01/04', '2022/01/05'],
            axisLine: {
              lineStyle: {
                color: '#8392A5',
              },
            },
            gridIndex: 1,
            axisLabel: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            scale: true,
            axisLine: {
              lineStyle: {
                color: '#8392A5',
              },
            },
            splitLine: {
              show: false,
            },
          },
          {
            scale: true,
            axisLine: {
              lineStyle: {
                color: '#8392A5',
              },
            },
            splitLine: {
              show: false,
            },
            gridIndex: 1,
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '分时图',
            type: 'line',
            data: [100, 150, 120, 180, 160],
            smooth: true,
            lineStyle: {
              color: '#00da3c',
            },
            areaStyle: {
              color: '#00da3c',
              opacity: 0.1,
            },
            symbol: 'none',
            xAxisIndex: 0,
            yAxisIndex: 0,
          },
          {
            name: '交易量',
            type: 'bar',
            data: [200, 280, 220, 260, 240],
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: '#7cb5ec',
            },
          },
        ],
      };

      this.chart.setOption(this.option);
    },
  },
};
</script>
``