echarts中环形图加边框

最新推荐文章于 2025-06-09 16:36:47 发布

依旧平凡

最新推荐文章于 2025-06-09 16:36:47 发布

阅读量6.7k

点赞数

分类专栏： echarts 文章标签： echarts

echarts 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了使用ECharts库创建饼图的过程，包括HTML页面结构搭建、ECharts库的引入及配置，展示了如何通过JavaScript代码定制图表样式，如图例、提示框、系列数据等，适合初学者学习。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<script src="../js/echarts.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../theme/dark.js"></script>
<title>柱状图</title>
</head>
<body>

<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip: {//提示框，可以在全局也可以在
show:false,
trigger: 'item', //提示框的样式
formatter: "{a} <br/>{b}: {c} ({d}%)",
color:'#000', //提示框的背景色
textStyle:{ //提示的字体样式
color:"black",
}
},
legend: { //图例
orient: 'vertical', //图例的布局，竖直 horizontal为水平
x: 'right',//图例显示在右边
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
textStyle:{ //图例文字的样式
color:'#333', //文字颜色
fontSize:12 //文字大小
}
},
series: [
{
name:'访问来源',
type:'pie', //环形图的type和饼图相同
radius: ['50%', '70%'],//饼图的半径，第一个为内半径，第二个为外半径
avoidLabelOverlap: false,
color:['#17acf6','#fff',],
label: {
normal: { //正常的样式
show: true,
position: 'left',
formatter: "{d}%",
},
emphasis: { //选中时候的样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
}, //提示文字
labelLine: {
normal: {
show: false
}
},
itemStyle:{
show:false,
borderColor:'#17acf6',
borderWidth:1,
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>