项目要求移动端适配和 分段视觉映射在ECharts框架里的运用【高级ECharts技术】

简介: 项目要求移动端适配和 分段视觉映射在ECharts框架里的运用【高级ECharts技术】

移动端适配

满足多个查询时的优先级:
请注意,可以同时满足多个查询,并且它们都将由mergeOption合并,mergeOption稍后由merge定义(即更高的优先级)。
默认查询:
如果媒体中有一项不写入查询,则表示“默认值”。也就是说,如果不符合所有规则,则采用此选项。
容器尺寸实时变化时的注意事项:
在这里插入图片描述

在许多情况下,不需要通过拖动任意改变容器DOM节点的大小,而是根据不同的终端设置几个典型的大小。
但是,如果容器DOM节点需要能够通过拖动任意更改其大小,那么在当前使用它时应该注意这一点:如果配置项出现在查询选项中,那么它也必须出现在其他查询选项中。否则,它无法返回到原始状态。(左/右/上/下/宽/高不受此限制。)

   {
        query: {
            maxWidth: 500               // 当容器宽度小于 500 时。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右侧中间。
                top: '15%',
                orient: 'vertical'      // 纵向布局。
            },
            series: [                   // 两个饼图上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

复合选项中的媒体不支持合并
也就是说,当设置了setOption(rawOption)时,如果rawOption是一个复合选项(包括媒体列表),则新的rawOption媒体列表不会与旧媒体列表合并,而是简单地替换。当然,baseOption通常仍会与旧选项合并。
事实上,很少有场景需要使用“复合选项”多次设置该选项。我们建议的做法是,在使用mediaQuery时,对第一个setOption使用“复合选项”,而对后面的setOption只使用“原子选项”,也就是说,只使用setOption更改baseOption。

{
    minWidth: 200,
    maxHeight: 300,
    minAspectRatio: 1.3
}

现在支持三个属性:width、height和aspectRatio。每个属性的前缀都可以是min或max。例如,minWidth:200表示“大于或等于200px宽度”。这两个属性写在一起表示“和”。例如,{minWidth:200,maxHeight:300}表示“宽度大于或等于200px,高度小于或等于300px”。
选项:
由于媒体中的选项是原子选项,理论上,可以编写任何选项配置项。但通常情况下,我们只写布局定位,例如拦截上面示例中的一些查询选项:

option = {
    // 这里是基本的『原子option』。
    title: {...},
    legend: {...},
    series: [{...}, {...}, ...],
    ...,
    media: [ //
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 
            option: {       // 
                legend: {...},
                ...
            }
        }
    ]
};

这里定义了 media query 的逐条规则。这条里没有写规则,表示『默认』,即所有规则都不满足时,采纳这个option。

数据和维度

ECharts中的数据通常存储在系列数据中。根据图表的类型,数据的具体形式可能略有不同。例如,它可以是线性表、树或图形。但它们都有一个共同点:它们是“数据项”的集合。每个数据项包含“值”和其他信息(如有必要)。每个数据值可以是单个数值(一维)或数组(多维)。
例如,series最常见的数据形式是“线性表”,即常见的数组:
这里每一个项就是数据项(dataItem),这是数据项的数据值(value)

series: {
    data: [
        {    
            value: 2323, // 
            itemStyle: {...}
        },
        1212,   // 
        2323,   // 
        4343,
        3434
    ]
}

也可以直接是 dataItem 的 value,这更常见。每个 value 都是『一维』的。

分段视觉映射组件

分段视觉映射组件(visualMapPiecewise)有三种模式:
连续数据的平均分割:根据visualMap Peerswise SplitNumber自动平均分割成几个块。
连续数据的自定义分割:根据visualMap Piecewise Pieces定义每个块的范围。
离散数据(分类数据):类别在visualMap pricewise Categories中定义。
可视化映射模式的配置
由于这是“数据”到“视觉元素”的映射,因此可以在visualMap中指定数据的“哪个维度”(参见visualMap.dimension),以映射到哪个“视觉元素“(参见visualMap.inRange和visualMap.outOfRange)。

option = {
    visualMap: [
        {
            type: 'piecewise',
            min: 0,
            max: 5000,
            dimension: 3,      
            seriesIndex: 4,     
            inRange: {          
                color: ['blue', '#121122', 'red'],
                symbolSize: [30, 100]               
            },
            outOfRange: {       // 选中范围外的视觉配置
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};

series.data 的第四个维度(即 value[3])被映射,series.data 的第四个维度(即 value[3])被映射。

事件和行为

myChart.on('click', function (params) {
    console.log(params.name);
});

在ECharts中,事件可以分为两种类型:一种是用户用鼠标单击时触发的事件,或者是悬停图表的图形;另一种是用户使用可以交互的组件后触发的行为事件,例如切换图例开关时触发的“legendseletchanged”事件(请注意,切换图例开关不会触发“legendselect tchchanged”事件),缩放数据区域时触发的”datazoom“事件。

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        if (params.seriesIndex === 5) {
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
            }
            else {
            }
        }
    }
});

点击到了 markPoint 上,点击到了 index 为 5 的 series 的 markPoint 上。点击到了 graph 的 edge(边)上。点击到了 graph 的 node(节点)上。在ECharts中,几乎所有的组件交互都会触发相应的事件。事件文档中列出了常见事件和事件对应参数。

相关文章
|
4月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
172 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
2月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
47 1
|
4月前
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
366 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
4月前
|
前端开发 数据挖掘 关系型数据库
基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
本文介绍了一个基于Python的哔哩哔哩数据分析系统,该系统使用Flask框架、MySQL数据库、echarts数据可视化技术和Layui前端框架,旨在提取和分析哔哩哔哩用户行为数据,为平台运营和内容生产提供科学依据。
275 9
|
4月前
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图
|
4月前
|
JavaScript 数据可视化 搜索推荐
在Vue项目中使用Echarts图表库
这篇文章介绍了如何在Vue项目中集成ECharts图表库,并通过具体的代码示例展示了如何创建并配置一个饼图来展示数据。
62 0
在Vue项目中使用Echarts图表库
|
6月前
|
JavaScript 开发工具 git
大事件项目17----Vue项目引入Echarts
大事件项目17----Vue项目引入Echarts
大事件项目17----Vue项目引入Echarts
|
5月前
|
JavaScript
【vue】 在vue2项目中使用echarts
【vue】 在vue2项目中使用echarts
136 0
|
6月前
|
JavaScript 容器
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
465 0

热门文章

最新文章