帮我用echarts绘制饼图和玫瑰图
时间: 2023-08-04 13:14:36 浏览: 78
Echars 饼图制作
好的,下面是使用 echarts 绘制饼图和玫瑰图的示例代码:
饼图:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 饼图示例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<!-- 图表容器 -->
<div id="pieChart" style="width: 600px;height:400px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('pieChart'));
// 配置项
var option = {
title: {
text: '饼图示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问','邮件营销','联盟广告','视频广告']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
玫瑰图:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 玫瑰图示例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<!-- 图表容器 -->
<div id="roseChart" style="width: 600px;height:400px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('roseChart'));
// 配置项
var option = {
title: {
text: '玫瑰图示例',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问','邮件营销','联盟广告','视频广告']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'}
]
}
]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
你可以将上述代码复制到一个 HTML 文件中,然后在浏览器中打开该文件,即可看到绘制的饼图和玫瑰图。
阅读全文