vue-charts作用：

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

第一步:下载

npm i v-charts echarts -S

第二部:导入同时配置

import { CanvasRenderer } from 'echarts/renderers'
import { use, connect } from 'echarts/core'
import { ScatterChart, BarChart, CandlestickChart } from 'echarts/charts'
import {
    MarkPointComponent,
    DataZoomComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
} from 'echarts/components'
import ECharts from 'vue-echarts'
use([
    DataZoomComponent,
    MarkPointComponent,
    BarChart,
    ScatterChart,
    CanvasRenderer,
    CandlestickChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
])

注意我开始导入使用的是如下方式，发现不起作用，会经常报一些看不出来的错误，所以直接使用echarts原生导入效果更好且更易理解

import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/candlestick'

第三步设置组件和option配置

 components: {
        ECharts,
    },
     setup() {
        const chartData = {
            color: 'rgb(163, 163, 9)',
            title: {
                text: '主流机构持仓比例图',
                textStyle: {
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                },
                left: 'center',
                top: '5%',
            },
            grid: {
                left: '5%',
                top: '25%',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                },
            },
            xAxis: {
                type: 'category',
                data: data0.categoryData,
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                // scale: true,
                splitArea: {
                    show: true,
                },
                axisLabel: {
                    formatter: (value: number) => {
                        return value + '.00%'
                    },
                },
            },
            series: [
                {
                    name: '持仓比',
                    type: 'bar',
                    // showBackground: true, //是否显示柱条的背景色
                    label: {
                        show: true, //图形上的文本标签
                        position: 'top',
                        formatter: (value: any): string => {
                            return value.data + '%'
                            console.log(value)
                        },
                    },
                    backgroundStyle: {
                        Color: '#fff',
                    },
                    data: data0.values,
                },
            ],
        }
        const state = reactive({
            chartData,
        })
        return {
            ...toRefs(state),
        }
    },
    

第四步：组件标签

<e-charts :option="chartData" :auto-resize="true"></e-charts>

注意下option以前版本是options(小伙伴看下自己版本)

附赠
vue-charts文档