你的位置:首页 > Java教程

[Java教程]echarts标准饼图(一)——基本配置demo


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="http://code.jquery.com/jquery-1.11.0.min.js"></script>  <!-- echarts 引入 -->  <script src="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'    },
    //提示框,鼠标悬浮交互时的信息提示    tooltip : {      trigger: 'item',      formatter: "{a} <br/>{b} : {c} ({d}%)"    },
    //图例,每个图表最多仅有一个图例    legend: {      orient: 'vertical',      left: 'left',      data: ['第一部分','第二部分','第三部分','第四部分']    },
    // 系列列表,每个系列通过 type 决定自己的图表类型    series : [      {        name: '访问',        type: 'pie',        radius : '62%',        center: ['50%', '65%'],        minAngle:'15',        data:[          {name:"第一部分",value:4},          {name:"第二部分",value:7},          {name:"第三部分",value:3},          {name:"第四部分",value:1},        ],        itemStyle: {          normal:{            label:{              show:true,              formatter: "{b} :\n {c} \n ({d}%)",              position:"inner"            }          }        }      }    ],  };  myChart.setOption(option);// 为echarts对象加载数据</script></body></html>

结果显示:

 

为了更好得运用echarts插件,可以继续了解接下来饼状图的详细配置。