基于echarts写一个无人售货机的销售金额及其环比增长率的半圆环图HTML文件
时间: 2024-03-03 11:48:56 浏览: 118
好的,以下是一个基于ECharts的无人售货机销售金额及其环比增长率的半圆环图HTML文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>无人售货机销售统计</title>
<!-- 引入ECharts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<h1>无人售货机销售统计</h1>
<!-- 绘制ECharts图表的容器 -->
<div id="chart" style="width: 800px;height: 500px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化ECharts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '无人售货机销售统计',
subtext: '销售金额(元)',
x: 'center',
y: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal'
},
subtextStyle: {
fontSize: 24,
fontWeight: 'bold',
color: '#333'
}
},
tooltip: {
trigger: 'item',
formatter: "{b}: {c} ({d}%)"
},
series: [
{
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data:[
{value:9000, name:'销售金额'},
{value:12.5, name:'环比增长率'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
在这个HTML文件中,我们使用了ECharts库来绘制一个半圆环图,分别表示销售金额和环比增长率。我们首先引入了ECharts库,然后创建一个用于显示图表的div容器,并使用JavaScript代码初始化了一个ECharts实例。接下来,我们定义了图表的配置项和数据,包括标题、提示框、系列等。其中,我们使用了饼图(pie)系列来绘制半圆环图,并设置了内外半径、标签、高亮等样式。最后,我们使用myChart.setOption()方法将配置项和数据应用到图表中,从而显示出来。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231044901.png)