资讯

展开

ECharts:饼图中间title自定义,和鼠标划过时自定义

作者:快盘下载 人气:42

实现效果;

ECharts:饼图中间title自定义,和鼠标划过时自定义

 实现方法:

echats的配置项有很多;一般遇到什么问题去官网研究配置项就可以了;这里简单的记录几个小问题。

1.实现饼图中间title的自定义;

使用title属性;通过偏移来定位显示的位置;设置主、副标题的内容和样式

title: [
{
text: num.toFixed(2) ; %, // 主标题
x: ;center;,
y: ;center;,
textStyle: { // 主标题样式
fontSize: ;20;,
color: ;#06A17E;,
fontweight: ;bold;
},
// subtext: ;xxx;, // 副标题
// subtextStyle: { // 副标题样式
// color: ;red;,
// fontSize: 13,
// fontWeight: ;bold;
// },
},

2.实现饼图鼠标划过时饼状图上显示的数据;

 使用formatter,支持字符串模板和回调函数两种形式

tooltip: {
trigger: ;item;, //鼠标划过时饼状图上显示的数据
formatter:(item)=>{
let txtCon = ;${item.data.name}</br><b>${item.percent}%&nbsp;(${item.data.value}人)<b>;;
return txtCon
}
},

还有backgroundColor,textStyle等更多地配置项。

加载全部内容

相关教程
  • 用echarts生成的华容道状态关系图
  • 基于 Echarts + Python Flask 的动
  • 让Echarts柱状图动起来
  • 快速生成echarts基础配置-——(包含
  • ECharts-使用超详细,5分钟上手,闭眼
  • echarts-饼图-实例(动态获取数据/图
  • Echarts联动和共享数据集,多个数据
  • 基于vue+echarts 数据可视化大屏展
  • ECharts简单上手,实现数据可视化
  • MySQL InnoDB存储索引详解
  • 猜你喜欢
      用户评论
      快盘暂不提供评论功能!