echarts读取数据库数据画环形图
时间: 2023-10-16 08:06:07 浏览: 117
Echarts-读取动态数据demo
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中即可。
阅读全文