使用echarts进行数据可视化展示(饼状图)
一、echarts的配置
- 使用npm命令进行安装echarts(方法一)
npm init
npm install echarts --save
引入echarts.min.js的文件
<script src="./node_modules/echarts/dist/echarts.min.js"></script>
注意:需要配置node环境
- 下载echarts.js的文件包,引入echarts.min.js的文件(方法二)
<script src="./echarts/echarts.min.js"></script>
二、准备一个数据可视化展示的容器
<div id="main" style="width:600px;height:600px"></div>
三、创建并初始化echarts实例
var myEchart = echarts.init(document.querySelector('#main'));
四、指定图表的配置项和数据
var option = {
//设置
title:{
text:'某某班学生当月的考试成绩分布',
subtext:'9月',
x:'center'
},
tooltip:{
trigger:'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//对图例组件的不同系列进行标记说明
legend:{
orient:'vertical', //设置图例列表的布局朝向
left:'left',
data:['A(90以上)','B(80-89)','C1(70-79)','C2(60-69)','D(0-59)']
},
//系列列表
series:[
//系列1
{
name:'学生成绩分布',
type:'pie', //数据统计图的类型
//放置要展示的数据
data:[
{value:3,name:'A(90以上)'},
{value:11,name:'B(80-89)'},
{value:25,name:'C1(70-79)'},
{value:23,name:'C2(60-69)'},
{value:8,name:'D(0-59)'}
]
}
]
}
五、使用刚指定的配置项和数据显示图表。
myEchart.setOption(option);