echarts好看的图
时间: 2025-01-30 12:52:28 浏览: 42
### ECharts 数据可视化图表美化示例
#### 1. 饼图的高级样式设置
为了使饼图更加美观,可以调整颜色、标签位置和字体大小等属性。以下是创建一个具有自定义样式的饼图实例:
```javascript
option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'outside',
formatter: '{b|{b}}\n {c} ({d}%)', // 自定义标签格式
rich: {
b: {
fontSize: 16,
color: '#333'
}
}
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
```
此代码片段展示了如何通过 `itemStyle` 设置圆角边框并添加白色边界线来增强视觉效果;利用 `label.rich` 定制复杂的文本显示方式[^1]。
#### 2. 折线图中的动画与渐变填充
折线图可以通过启用平滑曲线和平滑过渡的效果让图形看起来更流畅自然。同时应用渐变色作为区域背景能显著提升整体美感:
```javascript
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ["周一","周二","周三","周四","周五","周六","周日"]
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
smooth: true, // 启用平滑线条
areaStyle: {}, // 开启面积填充模式
lineStyle: {
width: 3,
shadowColor: 'rgba(0,0,0,0.3)',
shadowBlur: 10
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
},
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle:{
normal:{color:'#FFA500'} // 设置默认状态下的颜色
},
emphasis :{
focus: 'series',
itemStyle : {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#ffeb3b'},
{offset: 0.5, color: '#ffc107'},
{offset: 1, color: '#f44336'}
]
)
}
}
}]
};
```
上述配置不仅实现了光滑变化的趋势线,还加入了阴影效果使其更具立体感,并且当鼠标悬停时会触发带有色彩梯度变换的重点提示信息[^4]。
#### 3. 地理热力地图的设计技巧
地理坐标系上的热点分布通常采用热力图形式呈现,在此基础上进一步优化配色方案可有效提高辨识度:
```javascript
var geoCoordMap = {
"北京":[116.46,39.92], ...
};
// ...省略部分初始化逻辑...
option = {
backgroundColor: '#404a59',
visualMap: {
min: 0,
max: 500,
calculable: true,
inRange: {
color: ['#e0ffff','#006edd'] // 渐层色由浅至深
},
textStyle: {
color: "#ddd"
}
},
series : [
{
name: 'PM2.5',
type: 'heatmap',
coordinateSystem: 'geo',
pointSize: 10,
blurSize: 5,
data : convertData(data),
itemStyle: {
opacity: 0.8
}
}
],
geo: {
map: 'china',
roam: true,
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
silent: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
}
```
这段脚本中设置了从淡蓝到深蓝色调的变化范围用于表达不同浓度级别的空气质量指数(AQI),并且配合黑色轮廓增强了对比度,使得整个画面既清晰又富有层次感[^5]。
阅读全文
相关推荐


















