ECharts3.0饼状柱状退(环形图)------------手把手教你每一项的样式设计

最新推荐文章于 2024-05-20 10:10:11 发布

jianchileiliang

最新推荐文章于 2024-05-20 10:10:11 发布

阅读量515

点赞数

分类专栏：工作文章标签： java

本文链接：https://blog.csdn.net/jianchileiliang/article/details/78697311

版权

工作专栏收录该内容

21 篇文章 0 订阅

订阅专栏

案例Demo1

步骤 1.直接新建一个html文件

2.代码直接CV进去就可以，js应用我已经给大家引用好了

Demo2会有详细的标签的注解

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AzzanTest</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
<div id="echartsPie" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var echartsPie;
var json = [
{value:30,name:'高圆圆'},
{value:26,name:'赵丽颖'},
{value:24,name:'江莱'}
];
var option = {
title : {
text: '女神年龄分布',
subtext: '独家报道',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} 岁"
},
legend: {
orient : 'vertical',
x : 'left',
data:['高圆圆','赵丽颖','江莱']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'女神',
type:'pie',
radius : '55%',//饼图的半径大小
center: ['50%', '60%'],//饼图的位置
data:json
}
]
};

echartsPie = echarts.init(document.getElementById('echartsPie'));
$(function(){
echartsPie.setOption(option);

});
</script>
</body>

</html>

Demo2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AzzanTest</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>

<div id="main2" style="width: 250px;height:200px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
var option = {
tooltip : { //提示框组件
trigger: 'item', //触发类型(饼状图片就是用这个)
formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
},
color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'], //手动设置每个图例的颜色
legend: { //图例组件
//right:100, //图例组件离右边的距离
orient : 'horizontal', //布局纵向布局图例标记居文字的左边 vertical则反之
width:40, //图行例组件的宽度,默认自适应
x : 'right', //图例显示在右边
y: 'center', //图例在垂直方向上面显示居中
itemWidth:10, //图例标记的图形宽度
itemHeight:10, //图例标记的图形高度
data:['30%','10%','15%','20%','25%'],
textStyle:{ //图例文字的样式
color:'#333', //文字颜色
fontSize:12 //文字大小
}
},
series : [ //系列列表
{
name:'随访次数', //系列名称
type:'pie', //类型 pie表示饼图
center:['30%','50%'], //设置饼的原心坐标不设置就会默认在中心的位置
radius : ['50%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
itemStyle : { //图形样式
normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
label : { //饼图图形上的文本标签
show : false //平常不显示
},
labelLine : { //标签的视觉引导线样式
show : false //平常不显示
}
},
emphasis : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
label : { //饼图图形上的文本标签
show : true,
position : 'center',
textStyle : {
fontSize : '10',
fontWeight : 'bold'
}
}
}
},
data:[
{value:30, name:'30%'},
{value:10, name:'10%'},
{value:15, name:'15%'},
{value:20, name:'20%'},
{value:25, name:'25%'}
]
}
]
}
myChart.setOption(option);
</script>
</div>

</body>
</html>

jianchileiliang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts3.0饼状柱状退(环形图)------------手把手教你每一项的样式设计

案例Demo1步骤 1.直接新建一个html文件 2.代码直接CV进去就可以，js应用我已经给大家引用好了Demo2会有详细的标签的注解 AzzanTest var echartsPie; var json = [
复制链接

扫一扫