echarts标准饼图解读共分为四部分,
一、基本配置demo
二、标题(title)配置
三、提示框(tooltip)配置
四、图例(legend)配置
五、系列列表(series )配置
下面是一个基本配置demo,复制下方代码,下载并引入正确路径的echarts.js即可得到echarts标准饼图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- jquery cdn引入 --> <script src='/images/loading.gif' data-original="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- echarts 引入 --> <script src='/images/loading.gif' data-original="echarts.js"></script> <style type="text/css"> </style></head><body><div id="main" style="width:500px;height:500px;"></div><script> var myChart=echarts.init(document.getElementById('main')); //init初始化接口,返回ECharts实例,其中dom为图表所在节点 var option = {
//标题
title : {
text: '主标题',//主标题 subtext: '副标题',//副标题 x:'center'//标题水平位置,left,right,center },
//提示框,鼠标悬浮交互时的信息提示 tooltip : { trigger: 'item',//触发类型,默认数据触发,可选为:'item' | 'axis' formatter: "{a} <br/>{b} : {c} ({d}%)"//内容格式器 },
//图例,每个图表最多仅有一个图例 legend: { orient: 'vertical',//布局方式,默认为水平布局,可选为:'horizontal' | 'vertical' left: 'left',//图例位置 data: ['第一部分','第二部分','第三部分','第四部分']//图例内容数组 },
// 系列列表,每个系列通过 type 决定自己的图表类型 series : [ { name: '访问',//系列名称,如启用legend,该值将被legend.data索引相关 type: 'pie',//图表类型 radius : '62%',//半径,支持绝对值(px)和百分比,百分比计算比,min(width, height) / 2 * 75%, 传数组实现环形图,[内半径,外半径] center: ['50%', '65%'],//圆心坐标,支持绝对值(px)和百分比,百分比计算min(width, height) * 50% minAngle:'15',//最小角度,可用于防止某item的值过小而影响交互 data:[ {name:"第一部分",value:4}, {name:"第二部分",value:7}, {name:"第三部分",value:3}, {name:"第四部分",value:1}, ],//类目对应数据 itemStyle: {//图形样式 normal:{//默认样式 label:{//标签,饼图默认显示在外部,离饼图距离由labelLine.length决定, show:true,//标签显示策略,可选为:true(显示) | false(隐藏) formatter: "{b} :\n {c} \n ({d}%)",//内容格式器 position:"inner"//标签显示位置。饼图可选为:'outer'(外部) | 'inner'(内部) } } } } ], }; myChart.setOption(option);// 为echarts对象加载数据</script></body></html>
结果显示:
为了更好得运用echarts插件,可以继续了解接下来饼状图的详细配置。
原标题:echarts标准饼图解读(一)——基本配置demo
关键词: