Echarts饼图样式与点击

2020-12-11 15:28

101 0 0

1.饼图所需要的数据格式

2.饼图样式

{
  "legend": {
    "orient": "vertical",     //图例列表的布局朝向。
    "data": [
      "直接访问",
      "邮件营销",
      "联盟广告",
      "视频广告",
      "搜索引擎"
    ],
    "left": 10.0
  },
  "tooltip": {              //提示框组件
    "trigger": "item",
    "formatter": "{a} <br/>{b}: {c} ({d}%)"
  },
  "series": [
    {
      "type": "pie",      //饼图类型 :pie  折线图:line 柱状图:bar                          
      "radius": [
        "30%",             //饼图内宽
        "70%"             //饼图外宽
      ],
      "avoidLabelOverlap": false,
      "label": {
        "normal": {
          "show": true,  // 是否显示便签名称
          "position": "inner", //标签显示位置
          "textStyle": {
            "fontWeight": 100.0, //字体样式
            "fontSize": 8.0
          },
          "formatter": "{d}%" //显示标签的同时加上百分比
        },
        "emphasis": {    //内圈标签样式
          "show": true,
          "textStyle": {
            "fontSize": "15",
            "fontWeight": "bold"
          }
        }
      },  
      "itemStyle": {  
        "normal": {    //饼图块之间的间距和颜色
          "borderWidth": 10.0,  
          "borderColor": "#ffffff"
        }
      },
      "labelLine": {
        "normal": {     //标签的视觉引导线样式
          "show": false
        }
      },
      "data": "data"
    }
  ]
}

3.饼图的点击事件

event="$fenzu=com.alibaba.fastjson.JSONObject.parseObject(event.data).getString('name');if($fenzu!='echarts'){go('OWCP301',3);}"//创建一个变量去接点击时传出的标签中文,传到go的功能,,对这个值做对应的操作和判断

还可以输入500个字
表情
Ctrl+Enter
全部评论(0)
最新/最热

Donalda

用户暂未设置地址信息 |

关注
私信
技巧分享
写私信×
Donalda
还可以输入500个字