利用Echarts绘制饼状图等可视化图形

98 阅读 0 评论 65 点赞

我是靠谱客的博主无辜狗，最近开发中收集的这篇文章主要介绍利用Echarts绘制饼状图等可视化图形，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

可通过配置参数来实现想要的可视化图形！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼状图</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: "全国31个省份排名",
x: "center",
y: 45 //更改标题位置
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}个({d}%)"
},
series : [
{
name: "全国排名",
type: "pie", // 设置图表类型为饼图
radius: "50%", // 饼状图半径
center: ["52%", "52%"], //修改左右饼图位置
itemStyle: {
normal: {
label: {
show: true,
fontSize:19, //更改名称字体大小
formatter: "{b}: {c}个({d}%)"
}
}
},
data: [
{value: 3, name: "其他", itemStyle: { color: '#CDBA96' }}, //更改名称，占比，及名称字体的颜色
{value: 1, name: "第①名",itemStyle: { color: '#6699cc'}},
]
}
]
})
</script>
</body>
</html>

直接保存为.html格式的文本，用浏览器打开即可！！