echarts显示直线图和饼图的代码
时间: 2023-09-04 16:10:54 浏览: 49
以下是使用 echarts 显示直线图和饼图的示例代码:
直线图:
```html
<!DOCTYPE html>
<html>
<head>
<title>ECharts - Line example</title>
<meta charset="utf-8">
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个 div 容器用于显示 echarts 图表 -->
<div id="line-chart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('line-chart'));
// 配置项
var option = {
title: {
text: 'Line Chart Example'
},
tooltip: {},
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
饼图:
```html
<!DOCTYPE html>
<html>
<head>
<title>ECharts - Pie example</title>
<meta charset="utf-8">
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个 div 容器用于显示 echarts 图表 -->
<div id="pie-chart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('pie-chart'));
// 配置项
var option = {
title: {
text: 'Pie Chart Example'
},
tooltip: {},
series: [{
name: 'Sales',
type: 'pie',
radius: '50%',
data: [
{value: 120, name: 'Product A'},
{value: 200, name: 'Product B'},
{value: 150, name: 'Product C'},
{value: 80, name: 'Product D'},
{value: 70, name: 'Product E'}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)