饼图多个value怎么同时显示

goffwo

前言

echarts提供了formatter内容格式器

支持字符串模板和回调函数两种形式。

这里因为饼图有多个value，所以使用回调函数
回调函数格式：

[HTML] 纯文本查看 复制代码

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]

支持返回 HTML 字符串或者创建的 DOM 实例。第一个参数 params 是 formatter 需要的数据集。格式如下：

[HTML] 纯文本查看 复制代码

{
     componentType: 'series',
     // 系列类型
     seriesType: string,
     // 系列在传入的 option.series 中的 index
     seriesIndex: number,
     // 系列名称
     seriesName: string,
     // 数据名，类目名
     name: string,
     // 数据在传入的 data 数组中的 index
     dataIndex: number,
     // 传入的原始数据项
     data: Object,
     // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
     value: number|Array|Object,
     // 坐标轴 encode 映射信息，
     // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
     // value 必然为数组，不会为 null/undefied，表示 dimension index 。
     // 其内容如：
     // {
     //     x: [2] // dimension index 为 2 的数据映射到 x 轴
     //     y: [0] // dimension index 为 0 的数据映射到 y 轴
     // }
     encode: Object,
     // 维度名列表
     dimensionNames: Array<String>,
     // 数据的维度 index，如 0 或 1 或 2 ...
     // 仅在雷达图中使用。
     dimensionIndex: number,
     // 数据图形的颜色
     color: string,
     // 百分比
     percent: number
     }

案例基本数据

• 饼图只应该有一个name，一个value，是最主要的内容，
• 其他的value作为实现甲方需求的附加值，只展示，并无实际作用
  

[HTML] 纯文本查看 复制代码

var data = [{
         value: 150,
         value1: 20,
         name: 'ds'
     }, {
         value: 150,
         value1: 15,
         name: 'cs'
     }, {
         value: 280,
         value1: 28,
         name: 'ee'
     }, {
         value: 200,
         value1: 20,
         name: 'vd'
     }];

提示框

• 百分比是以value作为计算
  

[HTML] 纯文本查看 复制代码

tooltip: {
     show: true,
     trigger: 'item',
     formatter:  function(params){
         console.log(params.data)
         var html = params.marker + params.data.name +'</br> '
         html = html + '数据1 ：' + params.data.value +'</br> '
         html = html + '数据2 ：' + params.data.value1 +'</br>'
         html = html + params.percent +'%'
         return html
     }
}

展示的页面数据

• 百分比是以value作为计算
  

[HTML] 纯文本查看 复制代码

series: [{
     type: 'pie',
     label: {
         formatter: function(params){
             console.log(params.data)
             var str = params.data.name +'户 \n '
             str = str +'数据1 ：' + params.data.value +' \n '
             str = str + '数据2 ：' + params.data.value1 +' \n'
             str = str + params.percent +'%'
             return str
         }
     },
     data: data
}]

除此之外有没有其他的解决方案？

d199212

formatter: '{@name}户 \n数据1：{@value}\n数据2：{@value1}\n{d}%'

d199212

d199212 发表于 2023-4-13 17:59
formatter: '{@name}户 \n数据1：{@value}\n数据2：{@value1}\n{d}%'

这个是展示页面的formatter，其他formatter类似。

goffwo

d199212 发表于 2023-4-13 18:01
这个是展示页面的formatter，其他formatter类似。

谢谢，好像饼图不能获取到@value1，但是柱状图可以获取到@value1，我并不知道是不是我哪里操作有误

d199212

goffwo 发表于 2023-4-15 11:34
谢谢，好像饼图不能获取到@value1，但是柱状图可以获取到@value1，我并不知道是不是我哪里操作有误

可以吧，文档里面的type=‘pie’的formatter也有吧