星空网 > 软件开发 > 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='/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标准饼图解读(一)——基本配置demo

 

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




原标题:echarts标准饼图解读(一)——基本配置demo

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流