Vue.js：v-charts根据E-charts修改样式

以饼状图为例子：

首先import

import VeRing from 'v-charts/lib/ring'

在<template>加上<ve-ring>

 <ve-ring style="background:#F9F9F9" :data="chartDataRing" :settings="chartSettingsRing" :extend="extendRing" ></ve-ring>

在:extend里就可以根据echarts的配置方式来修改v-charts图表的样式了。

export default {
  data () {
    return {      
      extendRing:
      {
        title: {
          text: '***',
          subtext: '***',
          left: 'left'
        },
       legend: {
          //show: false
          orient: 'vertical',
          type: 'scroll',
          right: 5,
          top: 5,
          bottom: 5,
          textStyle: {
            fontSize: 8
          }
        },
      }
    }
  },
  components: { VeRing }
}

需要设置的样式可以参考E-charts的官网：

https://echarts.apache.org/zh/index.html