项目需求: 在echarts地图上实现整体的渐变效果。
属性分析:
areaColor: {}
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 0.6)',
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0.5,
color: '#277aec' // 0% 处的颜色
}, {
offset: 1,
color: '#FF0033' // 100% 处的颜色
}],
global: true // 缺省为 false
},
},
emphasis: {
areaColor: 'rgba(147, 235, 248, 0)'
}
},
字体缩放
var myZoom;
myChart.on('georoam', function(params) {
if (params.dy || params.dx) {
return;
}
var _zoom = myChart.getOption().geo[0].zoom;
if (myZoom == _zoom) {
return;
}
option = myChart.getOption();
if (_zoom > myZoom) {
option.legend.selected = tempLegend;
var fontSize = option.series[0].label.fontSize;
if (fontSize + 1 > 26) {
option.series[0].label.fontSize = 26;
} else {
option.series[0].label.fontSize = fontSize + 1;
}
myChart.setOption(option);
} else {
var fontSize = option.series[0].label.fontSize;
if (fontSize - 1
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?