Echarts — 可视化练习(pie05 — 普通饼图添加阴影效果)
微笑是岁月的使然,是生命的必然,它最能打动人的心弦。只要是发自内心的微笑,就能给人以舒坦。正所谓:智者微笑,庸者炫耀。心灵的愉悦,是来自精神的富有,来自心态的知足,至于那些浮华的东西只是表面,唯有发自内心的微笑,方可自在天地间。所以说:做人除了微笑,没有什么值得炫耀。
# -*- coding: utf-8
# @Time : 2020/12/10 16:03
# @Author : ZYX
# @File : pie05_nomalpie.py
# @software: PyCharm
from flask import Flask,render_template
app=Flask(__name__)
@app.route('/')
def index():
return render_template("pie05.html")
if __name__ == '__main__':
app.run(debug=True)
<!DOCTYPE html>
<html lang="en" style="height:">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:">
<div id="container" style="height:"></div>
<script type="text/javascript" src="../static/echarts_5.0.min.js"></script>
<script type="text/javascript">var dom = document.getElementById("container");
var myecharts = echarts.init(dom);
var option = null;
option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b}:{c}({d}%)'
},
legend:{
show:true,
orient:'vertical',
left:'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
label: {
position: 'outer',
alignTo: 'labelLine',
bleedMargin: 5 //文字的出血线大小,超过出血线的文字将被裁剪为 '...'。
// 仅当 label.position 为 'outer' 并且 label.alignTo 为 'none' 或 'labelLine' 的情况有效
},
emphasis: {
itemStyle: {
shadowBlur: 10, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
shadowOffsetX: 0, // 阴影水平方向上的偏移距离
shadowColor: 'rgba(0,0,0,0.5' // 阴影颜色
}
}
}
]
};
if (option && typeof option == 'object') {
myecharts.setOption(option);
}</script>
</body>
</html>
效果展示:
普通饼图添加阴影效果
知识点小归纳:
orient:'vertical', //图例列表的布局朝向。
emphasis: {
itemStyle: {
shadowBlur: 10, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
shadowOffsetX: 0, // 阴影水平方向上的偏移距离
shadowColor: 'rgba(0,0,0,0.5' // 阴影颜色
}
}