eCharts----legend不显示

不显示的原因:配置中的legend的属性 data和另一个属性 series数组中的 name属性不一致;

修改的方法也就不言而语了 只需要对应起来即可

比如

后面太长 只截图部分。

  • 28
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Echarts-gl 是基于 ECharts 的 3D 版本,用于构建复杂的三维图表与地图应用。它能够渲染高质量的三维图形,并支持丰富的交互操作。在使用 echarts-gl 进行项目开发时,需要掌握一系列配置选项来定制图表的外观、功能以及数据展现。 下面是一些关键的 echarts-gl 配置项: ### 数据配置 (Series Data) 数据集是展示的基础,通过 `series` 来定义数据序列。每个序列通常包括以下属性: - **name**: 标识图表元素的名称,用于图例显示。 - **type**: 确定图表的类型,例如柱状图、线图等。 - **data**: 包含具体的数值数据点。 ### 地图与区域配置 (Map and Region) 对于地理信息展示,echarts-gl 提供了多种地图类型的配置选项,如: - **mapType**: 指定使用的地图类型,如 'world', 'china', 'usa' 等。 - **zoom**: 设置地图的缩放级别。 - **center**: 定义地图中心位置。 ### 图表样式配置 (Chart Styling) 样式配置主要用于调整图表的整体视觉效果: - **color**: 使用颜色来区分数据点或类别。 - **symbolSize**: 图标大小控制,适用于点状数据表示。 - **label**: 文本标签配置,提供额外的信息提示。 ### 动画与交互配置 (Animation and Interactivity) 动画与交互性增强了用户体验: - **animation**: 控制是否启用图表加载过程中的动画。 - **zoomScale**: 缩放操作的放大比例。 - **rotate`: 控制旋转操作的角度。 ### 组件与工具配置 (Components and Tools) 允许添加各种组件和服务,增强图表的功能: - **tooltip**: 显示数据详情的小提示框。 - **legend**: 图例,用于说明各个系列的颜色或标记含义。 - **toolbox**: 工具箱,包含常用的操作按钮,如平移、缩放、旋转等。 ### 性能优化配置 (Performance Optimization) 为了提升渲染性能,可以设置一些优化相关的配置: - **downsample**: 对大量数据进行降采样处理,减少计算量。 ### 脚本示例 ```javascript var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: '3D Scatter Plot' }, series: [{ type: 'scatter3d', coordinateSystem: 'geo', data: [ { name: '北京', value: [116.404, 39.915, 1] }, // 更多数据点... ], label: { normal: { formatter: '{b} ({c})' } }, geoIndex: 0, symbolSize: function(val) { return Math.sqrt(val) * 10; }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffaa00' }, { offset: 1, color: '#e35f1a' }]) } }], }); ``` 通过这些配置,你可以根据项目的特定需求定制出功能丰富、美观且高效的三维可视化应用。更多详细配置选项及使用指南可以参考官方文档或社区实例。 ---
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值