Echarts餅圖之圓環圖

• 需求：

頁面上加載一個echarts環形圖。

• 來由：

身為一個Java開發人員，被項目經理拉過來寫頁面，心里也是很苦逼~可是也沒辦法，只能硬着頭皮干啊，直接上代碼

// 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('t_2')); // 指定圖表的配置項和數據 var option = { title: { text: '工業園區預警總數', subtext: '178658', x: 'center', y: 'center', textStyle: { fontWeight: 'normal', fontSize: 15, color: '#00eeff' }, // 標題 subtextStyle: { fontWeight: 'normal', fontSize: 17, color: '#00eeff' }, // 副標題 }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, color: ['#fcee21', '#fbb03b', '#22b573', '#2e3192', '#0071bc', '#29abe2', '#00ffff'], series: [{ name: '訪問來源', type: 'pie', radius: ['42%', '53%'], // 半徑 center: ['50%', '51%'], // 位置 label: { normal: { formatter: '{b}\n {c}', }, }, data: [{ value: 44, name: '水上派出所' }, { value: 48, name: '湖東派出所' }, { value: 51, name: '湖西派出所' }, { value: 36, name: '東沙湖派出所' }, { value: 10, name: '永安橋派出所' }, { value: 36, name: '斜塘派出所' }, { value: 20, name: '水下派出所' } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); 

• 效果
  
   

  

   

   

  圓環圖.png

 

 

 

 

 

作者：國家二級殘序員
鏈接：https://www.jianshu.com/p/9fe6b0128801
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。