实现效果
实现的效果就是鼠标悬浮在饼图上，提示的数据加上单位，且单位可以不一样
代码实现——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}千克`,
