echarts實現餅圖與樣式設置
餅圖
餅圖主要是通過扇形的弧度表現不同類目的數據在總和中的占比,它的數據格式比柱狀圖更簡單,只有一維的數值,不需要給類目。因為不在直角坐標系上,所以也不需要 xAxis,yAxis。
myChart.setOption({ series : [ { name: '訪問來源', type: 'pie', // 設置圖表類型為餅圖 radius: '55%', // 餅圖的半徑,外半徑為可視區(qū)尺寸(容器高寬中較小一項)的 55% 長度。 data:[ // 數據數組,name 為數據項名稱,value 為數據項值 {value:235, name:'視頻廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:400, name:'搜索引擎'} ] } ] })
我們也可以通過設置參數 roseType: 'angle' 把餅圖顯示成南丁格爾圖。
option = { series : [ { name: '訪問來源', type: 'pie', radius: '55%', roseType: 'angle', data:[ {value:235, name:'視頻廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:400, name:'搜索引擎'} ] } ] };
陰影的配置
itemStyle 參數可以設置諸如陰影、透明度、顏色、邊框顏色、邊框寬度等:
option = { series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:235, name:'視頻廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:400, name:'搜索引擎'} ], roseType: 'angle', itemStyle: { normal: { shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };
樣式設置
ECharts 可以通過樣式設置來改變圖形元素或者文字的顏色、明暗、大小等。
顏色主題
ECharts4 開始,除了默認主題外,內置了兩套主題,分別為 light 和 dark。
使用方式如下:
var chart = echarts.init(dom, 'light'); //或者 var chart = echarts.init(dom, 'dark');
另外,我們也可以在官方的 主題編輯器 選擇自己喜歡的主題下載。
目前主題下載提供了 JS 版本和 JSON 版本。
如果你使用 JS 版本,可以將 JS 主題代碼保存一個 主題名.js 文件,然后在 HTML 中引用該文件,最后在代碼中使用該主題。
比如上圖中我們選中了提個主題,將 JS 代碼保存為 wonderland.js。
<!-- 引入主題 --> <script src="https://www.runoob.com/static/js/wonderland.js"></script> ... // HTML 引入 wonderland.js 文件后,在初始化的時候調用 var myChart = echarts.init(dom, 'wonderland'); // ...
如果主題保存為 JSON 文件,那么可以自行加載和注冊。
比如上圖中我們選中了提個主題,將 JSON 代碼保存為 wonderland.json。
//主題名稱是 wonderland $.getJSON('wonderland.json', function (themeJSON) { echarts.registerTheme('wonderland', themeJSON) var myChart = echarts.init(dom, 'wonderland'); });
注意:我們使用了 $.getJSON,所以需要引入 jQuery。
調色盤
調色盤可以在 option 中設置。
調色盤給定了一組顏色,圖形、系列會自動從其中選擇顏色。
可以設置全局的調色盤,也可以設置系列自己專屬的調色盤。
option = { // 全局調色盤。 color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], series: [{ type: 'bar', // 此系列自己的調色盤。 color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], ... }, { type: 'pie', // 此系列自己的調色盤。 color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], ... }] }
全局調色盤實例:
// 全局調色盤。 color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
系列調色盤實例:
series: [{ type: 'pie', // 此系列自己的調色盤。 color: ['#ff0000','#00ff00', '#0000ff', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], ... }]
直接的樣式設置 itemStyle, lineStyle, areaStyle, label, ...
直接的樣式設置是比較常用設置方式??v觀 ECharts 的 option
中,很多地方可以設置 itemStyle
、lineStyle
、areaStyle
、label
等等。這些的地方可以直接設置圖形元素的顏色、線寬、點的大小、標簽的文字、標簽的樣式等等。
一般來說,ECharts 的各個系列和組件,都遵從這些命名習慣,雖然不同圖表和組件中,itemStyle
、label
等可能出現在不同的地方。
直接樣式設置的可以參考上半段 ECharts 餅圖。
高亮的樣式:emphasis
在鼠標懸浮到圖形元素上時,一般會出現高亮的樣式。默認情況下,高亮的樣式是根據普通樣式自動生成的。
如果要自定義高亮樣式可以通過 emphasis 屬性來定制:
// 高亮樣式。 emphasis: { itemStyle: { // 高亮時點的顏色 color: 'red' }, label: { show: true, // 高亮時標簽的文字 formatter: '高亮時顯示的標簽內容' } },
到此這篇關于echarts餅圖與樣式設置的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- React項目搭建與Echarts工具使用詳解
- vue+echarts封裝氣泡圖的方法
- echarts 3D地圖為區(qū)域自定義顏色的解決方法
- 在vue中使用echarts實現上浮與下鉆效果
- 使用GetInvalidFileNameCharts生成文件名
- 解決echarts中餅圖標簽重疊的問題
- echarts餅圖扇區(qū)添加點擊事件的實例
- echarts餅圖指示器文字顏色設置不同實例詳解
- echarts餅圖各個板塊之間的空隙如何實現
- echarts餅圖標簽formatter使用及餅圖自定義標簽
- 基于Echarts實現餅圖效果
- Vue ECharts餅圖實現方法詳解
- Echarts實現點擊列表聯動餅圖的示例代碼
相關文章
Javascript下IE與Firefox下的差異兼容寫法總結
總結一部分IE和Firefox的javascript差異寫法,對于像書寫多瀏覽器兼容性更好的代碼,可以參考下。2010-06-06Javascript調試之console對象——你不知道的一些小技巧
這篇文章主要總結了console對象的一些有用的方法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-07-07Web前端框架bootstrap實戰(zhàn)【第一次接觸使用】
Bootstrap是Twitter推出的一個開源的前端框架。這篇文章主要介紹了Web前端框架bootstrap實戰(zhàn),需要的朋友可以參考下2016-12-12