Misnice的博客

echarts折线图数据圆点默认不显示，鼠标划上再显示

echarts饼图label超出容器边界文字展示不全问题

饼图提示框显示百分比

legend: { show: true, // 是否显示图例 type: 'scroll', // 可滚动翻页的图例。当图例数量较多时可以使用。 orient:'horizontal', // 图例列表的布局朝向。 left: '0%', // 图例组件离容器左侧的距离。 top: '0%', // 图例组件离容器上侧的距离。 itemWidth: 8, // 图例标记的图形宽度。 itemHeight: 8, // 图例标记的图形高度。 text

xAxis: { splitLine:{ show: ture, // 是否显示x轴分割线 interval: 'auto', // 坐标轴分隔线的显示间隔 lineStyle: { color: ['#ccc'], // 分隔线颜色。 width: 1, // 分隔线线宽 type: 'dashed', // 线的类型 opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 }

labelLine属性为饼图引导线配置labelLine:{ normal:{ length:5, // 修改引导线的长度 lineStyle: { color: "red" // 修改引导线的颜色 } },},

直接上代码series: [ { type: 'pie', clickable:false,　　　　　　 //是否开启点击 minAngle: 5, 　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互 avoidLabelOverlap: true, //是否启用防止标签重叠策略

le对象中是修改图例样式的 var data = [ {value:40, name:'在线'}, {value:20, name:'离线'}, {value:40, name:'异常'} ] option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" },