ECharts是一款开源的JavaScript可视化库，它能够帮助开发者在
网页上制作各种各样的
图表，如柱状
图、折线
图、散点
图、饼
图、
雷达图、地
图等等。如果想要通过ECharts读取数据库数据画环形
图，需要以下步骤：
1. 连接数据库
首先需要用语言如PHP、Java、Python等程序语言连接数据库，从中读取数据。这些语言都有相应的数据库连接类，可以根据具体情况进行选择和使用。
2. 处理数据
从数据库中读取数据后，需要对数据进行处理。环形
图通常需要两个数据，一个是名称，一个是数量。因此需要将从数据库中获取的数据按照这个格式进行处理。
3. 使用ECharts绘制环形
图
处理数据后，就可以使用ECharts绘制环形
图了。ECharts提供了很多种类型的
图表，这里选择环形
图。绘制环形
图需要先在HTML页面中引入ECharts的js文件，然后创建一个div容器，设置其宽度和高度，代码如下：
```
<div id="chart" style="width: 600px;height:400px;"></div>
<script src="echarts.js"></script>
```
接下来需要在js文件中编写绘制环形
图的代码，代码如下：
```
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定
图表的配置项和数据
var option = {
title : {
text: '环形
图',
subtext: '演示数据'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['数据1','数据2','数据3','数据4','数据5']
},
series : [
{
name: '环形
图',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'数据1'},
{value:310, name:'数据2'},
{value:234, name:'数据3'},
{value:135, name:'数据4'},
{value:1548, name:'数据5'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示
图表。
myChart.setOption(option);
```
其中，option是
图表的配置项和数据，可以根据实际需求进行修改。在数据中，value表示数量，name表示名称，需要将从数据库中处理好的数据放到data中即可。最后使用setOption方法将
图表显示在
网页上。
4. 完整代码示例
完整的代码示例如下：
HTML代码：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts环形
图</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('chart'));
var option = {
title : {
text: '环形
图',
subtext: '演示数据'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['数据1','数据2','数据3','数据4','数据5']
},
series : [
{
name: '环形
图',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'数据1'},
{value:310, name:'数据2'},
{value:234, name:'数据3'},
{value:135, name:'数据4'},
{value:1548, name:'数据5'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
```
以上代码只是演示了一个静态的环形
图，如果要从数据库中读取数据，需要在js代码中添加相应的处理数据的代码，将数据放到option的data中即可。
2150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
