先看實現效果
核心代碼
itemStyle:{
show:false,
borderColor:'#17acf6',
borderWidth:1,
},
完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--引入echarts文件--> <script src="../js/echarts.min.js"></script> <script src="../js/echarts.js"></script> <script src="../theme/dark.js"></script> <title>柱狀圖</title> </head> <body> <!--准備一個dom容器--> <div id="main" style="width:600px;height:400px"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts var myChart = echarts.init(document.getElementById('main')); option = { tooltip: {//提示框，可以在全局也可以在 show:false, trigger: 'item', //提示框的樣式 formatter: "{a} <br/>{b}: {c} ({d}%)", color:'#000', //提示框的背景色 textStyle:{ //提示的字體樣式 color:"black", } }, legend: { //圖例 orient: 'vertical', //圖例的布局，豎直 horizontal為水平 x: 'right',//圖例顯示在右邊 data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎'], textStyle:{ //圖例文字的樣式 color:'#333', //文字顏色 fontSize:12 //文字大小 } }, series: [ { name:'訪問來源', type:'pie', //環形圖的type和餅圖相同 radius: ['50%', '70%'],//餅圖的半徑，第一個為內半徑，第二個為外半徑 avoidLabelOverlap: false, color:['#17acf6','#fff',], label: { normal: { //正常的樣式 show: true, position: 'left', formatter: "{d}%", }, emphasis: { //選中時候的樣式 show: true, textStyle: { fontSize: '20', fontWeight: 'bold' } } }, //提示文字 labelLine: { normal: { show: false } }, itemStyle:{ show:false, borderColor:'#17acf6', borderWidth:1, }, data:[ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, ] } ] }; myChart.setOption(option); </script> </body> </html>