| echarts饼图： 图例自定义、数值直观显示、标题位置 | 您所在的位置：网站首页 › 图例怎么设置在底部显示 › echarts饼图： 图例自定义、数值直观显示、标题位置 |
echarts饼图： 图例自定义、数值直观显示、标题位置
|
简单暴力，亲测有效！！！ 一、图例自定义 核心步骤是在option中添加legend对象 代码如下： legend: { orient: "vertical",//图例的布局，水平布局、垂直布局 type:'scroll',//是否添加滚动页码 data:count, right:15, top:'middle', icon:'circle', itemWidth: 8,//图例宽度 itemHeight: 8,//图例高度 textStyle: {//图例字体样式 color: "#000", fontSize: 14, fontFamily: "微软雅黑" } }二、数值直观显示 核心步骤是在option下series中添加itemStyle对象 代码如下： //直观显示饼图数值 itemStyle:{ normal:{ label:{ show: true, formatter: '{b} : {c}家 ({d}%)'//显示格式 }, labelLine :{show:true} } }三、标题位置 核心步骤是在option下title中定义x,y属性 代码如下： x:'center', y:'bottom'四、全部代码 Title $(function () { var year=2021; var count=[ {value: 160, name: '山林类'}, {value: 140, name: '河湖湿地类'}, {value: 36, name: '滨海类'}, {value: 55, name: '温泉类'}, {value: 6, name: '冰雪类'}, {value: 9, name: '沙漠草原类'}, {value: 20, name: '古城古镇类'}, {value: 44, name: '主题文化类'}, {value: 26, name: '主题乐园类'}, {value: 24, name: '乡村田园类'} ] var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: year+'年全国旅游度假区分类型数量状况', //控制标题位置 x:'center', y:'bottom' }, //鼠标移入提示 tooltip: { trigger: 'item', //控制提示格式 formatter:'{b}:{c}家({d}%)' }, toolbox: { show: true, feature: { //数据视图按钮 dataView: {readOnly: false}, //另存为图片按钮 saveAsImage: {} } }, legend: { orient: "vertical",//图例的布局，水平布局、垂直布局 type:'scroll', data:count, right:15, top:'middle', icon:'circle', itemWidth: 8,//图例宽度 itemHeight: 8,//图例高度 textStyle: {//图例字体样式 color: "#000", fontSize: 14, fontFamily: "微软雅黑" } }, series: [ { type: 'pie', data: count, radius:'50%', //直观显示饼图数值 itemStyle:{ normal:{ label:{ show: true, formatter: '{b} : {c}家 ({d}%)' }, labelLine :{show:true} } } } ] }; myChart.setOption(option); })五、显示效果 |
【本文地址】
公司简介
联系我们