使用echarts进行数据可视化展示（饼状图）

一、echarts的配置

npm initnpm 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);

六、效果展示