vue3.0基础版封装

./echarts/index.vue
<template>
<!-- echart封装 -->
    <div  :style="{ width, height }" ref="myChart"></div>
</template>

<script lang="ts" scoped>
import {
  defineComponent,
  ref,
  PropType,
  watch
} from 'vue'
import * as echarts from 'echarts'
import { EChartsOption } from 'echarts'
export default defineComponent({
  props: {
    option: {} as PropType<EChartsOption>,
    width: { default: '100%' },
    height: { default: '100%' }
  },
  setup (prop) {
    const myChart = ref<HTMLElement>()
    function initChart () {
      if (prop.option) {
        const chart = echarts.init(myChart.value as HTMLElement)
        chart.setOption(prop.option as EChartsOption)
        window.addEventListener('resize', () => {
          if (chart) {
            chart.resize()
          }
        })
      }
    }
    watch(prop, () => {
      initChart()
    })
    return {
      myChart
    }
  }
})
</script>

./echarts/echartsData
import { EChartsOption } from 'echarts'

export function roadvibrationOption (): EChartsOption {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    textStyle: {
      color: '#333'
    },
    color: ['#7BA9FA', '#4690FA'],
    grid: {
      containLabel: true,
      left: '10%',
      top: '20%',
      bottom: '10%',
      right: '10%'
    },
    xAxis: {
      type: 'category',
      data: ['浩星', '妍仔', '哆啦a梦', '李强', '王颖', '老王'],
      axisLine: {
        lineStyle: {
          color: '#333'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 20, // 刻度标签与轴线之间的距离。
        textStyle: {
          color: '#000'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#B5B5B5'
        }
      },
      splitLine: {
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#B5B5B5'],
          type: 'dashed',
          opacity: 0.5
        }
      },
      axisLabel: {}
    },
    series: [{
      data: [4, 22, 1, 11, 23, 11],
      stack: 'zs',
      type: 'bar',
      barMaxWidth: 'auto',
      barWidth: 60,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [{
            offset: 0,
            color: '#5EA1FF'
          },
          {
            offset: 1,
            color: '#90BEFF'
          }
          ]
        }
      }
    },

    // 下面的立体,控制颜色是color第一个
    {
      data: [1, 1, 1, 1, 1, 1],
      type: 'pictorialBar',
      barMaxWidth: '20',
      symbol: 'diamond',
      symbolOffset: [0, '50%'],
      symbolSize: [60, 15],
      zlevel: 2
    },
    // 上面的立体,控制颜色是color第二个
    {
      data: [4, 22, 1, 11, 23, 11],
      type: 'pictorialBar',
      barMaxWidth: '20',
      symbolPosition: 'end',
      symbol: 'diamond',
      symbolOffset: [0, '-50%'],
      symbolSize: [60, 12],
      zlevel: 2
    }
    ]
  } as EChartsOption
}

使用
<template>
<div class="wrap">
  <echarts :option="displayData"></echarts>
</div>
</template>

<script lang="ts">
import echarts from './echarts/index.vue'
import i18n, { t } from '../locale/index'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { EChartsOption } from 'echarts'
import { roadvibrationOption } from './echarts/echartsData'
export default defineComponent({
  components: {
    echarts
  },
  setup () {
    const displayData = ref<EChartsOption>()
    
    onMounted(async () => {
      displayData.value = roadvibrationOption()
    
    })
    return { displayData }
  }
})
</script>

<style scoped lang="less">
.wrap{
  width: 160px;
  height: 100px;
}
</style>