实现效果
实现的效果就是鼠标悬浮在饼图上，提示的数据加上单位，且单位可以不一样
代码实现——HTML、CSS部分
这一部分没什么好说的，就是引入Echarts
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Referer of a Website - Apache ECharts Demo</title> <style> * { margin: 0; padding: 0; } #chart-container { position: relative; height: 100vh; overflow: hidden; } </style> </head> <body> <div id="chart-container"></div> <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> </body> </html>
代码实现——JS部分
实现提示数据加单位的的关键代码在tooltip上
tooltip提示框浮层内容格式器，支持字符串模板和回调函数两种形式。本次案例使用的是回调函数
浅看一下回调函数格式：
支持返回 HTML 字符串或者创建的 DOM 实例。
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
第一个参数 params是 formatter 需要的数据集。格式如下：
{ 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 }
可能看着有点眼花缭乱，咱们实际点，打印出来看看它是个什么东西，这样你就能看出来哪些字段对应的是什么啦
（打印即console.log(params)，是写在tooltip里的formatter里的，你直接打开控制台是看不到的，得让鼠标悬浮在饼图上，触发到这个提示，才能打印出来)
到这里就简单了，直接拿到我们要的是数据，用一个变量装我们想要的数据格式，把数据拼接拼接就好了（是不是很简单，单位直接给它拼接起来）记得return啊
formatter: (params) => { const str = `${params.seriesName}<br/>${params.data.name}：${params.data.value}${params.data.unit}` return str },
data里的数据格式如下给后端，让他返回这样的格式，这样就不用我们后续再去处理数据格式啦
data: [ { value: 1048, name: '大米', unit: '千克' }, { value: 735, name: '胡萝卜', unit: '吨' }, { value: 580, name: '玉米', unit: '吨'}, { value: 484, name: '莲藕' , unit: '千克' }, { value: 300, name: '排骨' , unit: '千克'}, ],
JS完整代码
var dom = document.getElementById('chart-container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; option = { title: { text: '美食材料', left: 'center' }, tooltip: { trigger: 'item', formatter: (params ) => { console.log(params) const str = `${params.seriesName}<br/>${params.data.name}：${params.data.value}${params.data.unit}` return str }, }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '美食', type: 'pie', radius: '50%', data: [ { value: 1048, name: '大米', unit: '千克' }, { value: 735, name: '胡萝卜', unit: '吨' }, { value: 580, name: '玉米', unit: '吨'}, { value: 484, name: '莲藕' , unit: '千克' }, { value: 300, name: '排骨' , unit: '千克'}, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } window.addEventListener('resize', myChart.resize);
顺便也说说字符串模板形式吧，这个比较简单点，如果你需要加的单位都一样，用这个会更简单点
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图、K线图 ：{a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
散点图（气泡）图 ：{a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
地图 ： {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
饼图、仪表盘、漏斗图：{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
示例：
formatter: `{a}<br />{b}: {c}千克`,
