Vue3+echarts 水球图标题的数据动态传递以及样式自定义

程序媛小白白

于 2023-03-17 09:59:53 发布

阅读量492

点赞数

文章标签：前端 vue echarts js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_46382462/article/details/129612199

版权

文章介绍了如何在Vue3应用中使用Echarts创建水球图，并重点讲解了如何设置包含动态数据的主副标题，通过`ref`传递变量值到Echarts的`title.subtext`中，同时自定义了标题的样式。

摘要由CSDN通过智能技术生成

Vue3+echarts开发-水球图

首先在option中找到title标签普通的title标签一般是

title: {
      text: '全市',
      textStyle: {
          fontSize: 20,
          fontFamily: "Microsoft Yahei",
          fontWeight: "normal",
          color: "#fff",
         },
    },

如果需要两个标题类似这种效果

首先定义需要传递的数据

const decreaseData = ref(65);//定义动态数值

然后设置title

title: {
      name: '全市',
      text: '{a|全市}',
      subtext:'{b|下降' + decreaseData.value + '%}',//关键代码-传递数值
      left: 'center',//主副标题的水平位置
      top: 85,//主副标题的垂直位置
      textStyle: {
        rich:{
          a:{//设置主标题text的样式
            fontSize: '16',
            fontWeight: '400',
            fontFamily: 'Source Han Sans CN',
            color: '#fff',
          }
        },
      },
      subtextStyle: {
        rich:{//设置副标题subtext的样式
          b:{
            fontSize: '16',
            fontWeight: '400',
            fontFamily: 'Source Han Sans CN',
            color: '#63FAFA',
          }
        },
      },
    },

可以根据自己的需求进行标题样式的自定义