<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Echart.js</title>
<script src="./echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px; height:400px;"></div>
</body>
<script type="text/javascript">
// 初始化
let myChartPie = echarts.init(document.getElementById('main'));
myChartPie.setOption({
title: {
text: '本月数据',
},
tooltip: {},
legend: {
orient: 'vertical',
x: 'right',
// 标题
data: ['预约', '预到', '已到', '未到', '全流失', '半流失', '已诊治'],
},
series: [
{
name: '本月数据',
type: 'pie',
radius: '55%',
// 数据块 与以上标题顺序对应
data: [
{value: 20, name: '预约'},
{value: 30, name: '预到'},
{value: 25, name: '已到'},
{value: 28, name: '未到'},
{value: 40, name: '全流失'},
{value: 22, name: '半流失'},
{value: 15, name: '已诊治'}
],
}
],
});
</script>
</html>
// 内部数据可以直接写后台传过来的变量， 例如： {value: {$sort}, name: {$arrival}};
// echartjs 下载地址: echarts.baidu.com