Echarts切换图表（k线图·折线图 互相切换）

现有一需求，要求图表k线 、折线 相互切换

依赖

npm install echarts -S

html

<div id="chart" style="width: 100%;height: 350px;"></div>

引入

import Vue from 'vue'
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

  mounted () {
    this.initData()
  },
  methods:{
	initData() {
		const myChart = this.$echarts.init(document.getElementById('chart'))
		myChart.setOption({
			// 图表配置 **********
      })
	}
  }

完整js

实现原理：父组件调用此子组件val方法，并传相应的参数，改变子组件的状态，子组件根据不同的状态，实现图表的相互切换

<script>
import dayjs from 'dayjs' // 一个js日期处理库
import Vue from 'vue'
import * as echarts from 'echarts'
import { graph } from '../../api/Echarts'
Vue.prototype.$echarts = echarts

export default {
  name: 'LineCharts',
  data () {
    return {
      kCharData: undefined, // 数据
      myChart: undefined, // k线 is 折线
      graphics: 1, // 显示图形 1k 2line
      loading: false, // 加载
      dateTime: undefined // 去抖变量
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    val (val) { // 父组件直接调用此方法传参实现渲染哪一种图表
      if (val.unit === 'k') {
        this.graphics = 1
      } else {
        this.graphics = 2
      }
      this.initData()
    },
    async initData () {
      const dateTime = new Date().getTime() + `${Math.random()}`
      this.dateTime = dateTime
      this.kCharData = undefined
      try {
        this.loading = true
        const res = await graph({ period: this.time, symbol: this.symbol })
        if (this.dateTime !== dateTime) return
        this.loading = false
        this.kCharData = res.data
        if (this.graphics === 1) {
          // console.log('k线图')
          this.drawCharts()
        } else {
          // console.log('折线图')
          this.categoryCharts() // 调用折线图
        }
      } catch (err) {
        if (this.dateTime !== dateTime) return
        this.loading = false
      }
    },
    
    // 渲染折线数据
    categoryCharts () {
      // eslint-disable-next-line no-unused-expressions
      const myChart = this.$echarts.init(document.getElementById('chart'))
      this.myChart = myChart
      myChart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.kCharData.map(item =>
            dayjs(item.id * 1000).format('YYYY-MM-DD')
          )
        },
        tooltip: {
          trigger: 'axis',
          showContent: true
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          top: 20,
          bottom: 70,
          left: 0
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [{
          data: this.kCharData.map(item => item.close),
          type: 'line',
          areaStyle: {},
          symbol: 'none',
          markLine: {
            symbol: ['none'],
            data: [{
              yAxis: this.kCharData[this.kCharData.length - 1].close
            }]
          }
        }]
      })
    },

    // 渲染k线数据
    drawCharts () {
      const myChart = this.$echarts.init(document.getElementById('chart'))
      this.myChart = myChart

      // [open, close, low, high]

      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          showContent: false,
          axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
              color: '#376df4',
              width: 2,
              opacity: 1
            }
          }
        },
        xAxis: {
          type: 'category',
          data: this.kCharData.map(item =>
            dayjs(item.id * 1000).format('HH: mm')
          ),
          axisLine: { lineStyle: { color: '#8392A5' } }
        },
        yAxis: {
          scale: true,
          axisLine: { lineStyle: { color: '#8392A5' } },
          splitLine: { show: false }
        },
        grid: {
          top: 40,
          bottom: 70,
          left: 50
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'candlestick',
            name: '日K',
            data: this.kCharData.map(item => [
              item.open,
              item.close,
              item.low,
              item.high
            ]),
            itemStyle: {
              color: '#FD1050',
              color0: '#0CF49B',
              borderColor: '#FD1050',
              borderColor0: '#0CF49B'
            },
            markLine: {
              symbol: ['none'],
              data: [
                [
                  {
                    coord: [0, this.kCharData[this.kCharData.length - 1].close],
                    value: this.kCharData[this.kCharData.length - 1].close
                  },
                  {
                    coord: [59, this.kCharData[this.kCharData.length - 1].close]
                  }
                ]
              ]
            }
          }
        ]
      })
    }
  }
}
</script>