vue中v-charts/echarts如何显示标题以及配置项

Vue中使用v-charts默认展示图表，引入依赖：

package.json:

"dependencies": {
    "echarts": "^4.9.0",
    "v-charts": "^1.19.0"
  }

类似如下代码：

<VeRing :data="chartData" :title="titleObject"></VeRing>
// or 
<ve-pie :title="titleObject"  :data="chartData" ></ve-pie>

//其中
titleObject: {'text':'按来源统计','top':'30', 'left':'center','textStyle':{'color':'#01A0EB'}}

titleObject，可以根据文档：https://echarts.apache.org/zh/option.html#title来参考

v-chart的文档，请参考：http://woolen.gitee.io/v-charts

不过发现虽然按照以上设置，v-chart中并没有显示标题，原因是引入了v-chart，但是没有引入echart相关的组件（title）

问题解决

import VeRing from 'v-charts/lib/ring'
import VePie from 'v-charts/lib/ring'
// 引入echarts的title组件，解决v-chart中title不显示的问题
import "echarts/lib/component/title";

标题常见属性

详细说明，请参考文档：https://echarts.apache.org/zh/option.html#title

titleObject: {
    text: '标题文本',
    // 标题样式
    textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter', 100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
    },
    // 标题的位置
    // left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
    // 如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐。
    left: 'center',

    subtext: '副标题',
    //副标题文本样式，同上面标题样式
    subtextStyle: {},

    // 主副标题之间的间距 默认为10
    itemGap: 20
}