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 @   新*  阅读(254)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示