Echarts参数属性学习:formatter字符串&返回函数的实战案例

简介: Echarts参数属性学习:formatter字符串&返回函数的实战案例

formatter内容格式器,支持字符串模板和回调函数两种形式。

回调函数格式:(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

{
    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,
}


示例A:

        formatter: function (obj) {
            var value = obj.value;
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + obj.seriesName + ' ' + value[0] + '日:'
                + value[7]
                + '</div>'
                + schema[1].text + ':' + value[1] + '<br>'
                + schema[2].text + ':' + value[2] + '<br>'
                + schema[3].text + ':' + value[3] + '<br>'
                + schema[4].text + ':' + value[4] + '<br>'
                + schema[5].text + ':' + value[5] + '<br>'
                + schema[6].text + ':' + value[6] + '<br>';
        }
相关文章
|
6天前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
44 3
ECharts综合案例一:近七天跑步数据
|
7天前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts展示近七天跑步数据,结合雷达图和折线图揭示运动表现。雷达图多维度呈现全程距离、速度和时间,对比平均指标;折线图清晰展示里程趋势。图表具有交互性和动画效果,通过[代码地址](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454698)可获取详情。#ECharts #跑步数据 #数据可视化 #雷达图 #折线图
26 3
ECharts综合案例一:近七天跑步数据
|
9天前
|
JavaScript 前端开发 搜索推荐
ECharts词云图(案例一)+配置项详解
ECharts,百度的JavaScript图表库,支持词云图(自5.0版起),借助`echarts-wordcloud`插件。配置词云图涉及`tooltip`(如显示、颜色、边框等)和`series`(类型、形状、大小范围等)。示例代码展示了如何在HTML中引入依赖并配置词云图,包括数据、形状、大小、颜色等。完整代码和依赖可下载。调整这些配置可创建个性化词云图。参阅官方文档获取不同版本详情。
42 4
 ECharts词云图(案例一)+配置项详解
|
1天前
|
数据采集 自然语言处理 数据可视化
ECharts 词云案例四—电影《千与千寻》部分短评
**使用ECharts和电影《千与千寻》短评创建的词云案例展示了数据可视化的力量。通过Python处理评论,提取关键词并计算频率,利用jieba和WordCloud生成词云,ECharts进一步增强了视觉效果。词云突出了角色如“千寻”、“无脸男”及关键词“勇气”、“成长”,揭示了观众的情感共鸣。示例代码和资源可在链接中获取。**
6 0
 ECharts 词云案例四—电影《千与千寻》部分短评
|
7天前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
28 0
 ECharts 雷达图案例001-自定义节点动画
|
7天前
|
数据可视化 黑灰产治理
📊 ECharts 雷达图案例002 - 诈骗性质分析
**ECharts 案例展示了诈骗性质的雷达图分析,以创新可视化揭示诈骗模式。定制化雷达图配色鲜明,多维度剖析不同诈骗手段,如网络刷单、冒充公检法。交互式设计允许用户深入探究细节。[点击这里](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454384)查看完整案例。#ECharts #数据可视化 #雷达图 #诈骗分析**
15 0
📊 ECharts 雷达图案例002 - 诈骗性质分析
|
8天前
|
数据可视化 前端开发 搜索推荐
ECharts 词云案例三:2024年阅读关键词
探索ECharts词云图进阶,使用蒙版创造个性化2024年阅读关键词云。预览图展示渐变色背景与随机色词汇。蒙版概念引入,通过HTML结构和JavaScript配置实现词云与图像蒙版结合。代码及依赖下载链接提供,展示五种创意蒙版效果,激发数据可视化的创新思维。
13 0
ECharts 词云案例三:2024年阅读关键词
|
8天前
|
搜索推荐 数据可视化 前端开发
ECharts 词云图案例【用户画像】:创意蒙版应用
使用ECharts创建词云图,结合蒙版技术提升可视化创意。通过设置`maskImage`属性,将自定义图像作为词云的外形,如用户画像。案例中详细介绍了HTML结构、ECharts配置及蒙版图像加载过程,鼓励探索SVG路径和CSS样式以实现更多个性化效果。代码和依赖可下载,激发更多数据可视化灵感。
13 0
 ECharts 词云图案例【用户画像】:创意蒙版应用
|
8天前
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
10 0
ECharts 蓝色系-荧光图标折线图01案例
|
1天前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法