柱状图
<!DOCTYPE html>
<html>
<head>
<title>ECharts Example</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 基于准备好的 DOM，初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '户型预订情况'
},
tooltip: {},
legend: {
data:['预订数']
},
xAxis: {
data: ["户型A", "户型B", "户型C", "户型D", "户型E"]
},
yAxis: {},
series: [{
name: '预订数',
type: 'bar',
data: [5, 20, 36, 10, 10]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
饼图自定义百分比
tooltip : {
trigger: 'item',
formatter: function(a){
return (a['name']+'<br/>'+a['value'] +':'+a['data'].datas[0]); //自定义百分比
}
},
calculable: false,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问', datas: ['11.20%']},
{value: 310, name: '邮件营销', datas: ['31%']},
{value: 234, name: '联盟广告', datas: ['24%']},
{value: 135, name: '视频广告', datas: ['16%']},
{value: 1548, name: '搜索引擎', datas: ['13.31%']},
]
}
]
本文详细介绍了如何使用ECharts配置饼图，并展示了具体的配置项示例，包括触发器、自定义提示信息以及系列数据设置等关键部分。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
