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

以饼状图为例子:

1.首先import

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

2.在<template>加上<ve-ring>

 <ve-ring :extend="extendRing" ></ve-ring>

3.在:extend里就可以根据E-charts的配置方式来修改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

v-charts好像很久没有更新了。。。建议还是直接用E-charts吧。
posted @ 2022-12-06 08:53  新*  阅读(240)  评论(0编辑  收藏  举报