當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

009_调色盘和高亮样式

發布時間：2025/5/22 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 009_调色盘和高亮样式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. color調色盤

1.1. 調色盤, 可以在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']// ...}] };

1.2. 如果系列沒有設置顏色, 則會依次循環從該列表中取顏色作為系列顏色。默認為: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']。

1.3. 支持使用RGB表示顏色, 比如: 'rgb(128, 128, 128)', 如果想要加上alpha通道表示不透明度, 可以使用RGBA, 比如: 'rgba(128, 128, 128, 0.5)', 也可以使用十六進制格式, 比如: '#ccc'。

1.4. 支持漸變色或者紋理填充。

1.5. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>全局調色盤</title><script type="text/javascript" src="echarts.js"></script></head><body><div id="main" style="width: 600px; height:400px; border: 1px solid;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '全局調色盤'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['訪問來源']},// 全局調色盤color: ['#FF0000','#00FF00','#0000FF','#000000','#800000'],// 系列列表series: [{name: '訪問來源', // 系列名稱type: 'pie', // 系列圖表類型radius: '55%', // 餅圖的半徑, 直徑為可視區尺寸(容器高寬中較小一項)的55%長度。data: [ // 系列中的數據內容{ value: 235, name: '視頻廣告' },{ value: 274, name: '聯盟廣告' },{ value: 310, name: '郵件營銷' },{ value: 335, name: '直接訪問' },{ value: 400, name: '搜索引擎' }]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>

1.6. 效果圖

2. 高亮的樣式

2.1. 在鼠標懸浮到圖形元素上時, 一般會出現高亮的樣式。默認情況下, 高亮的樣式是根據普通樣式自動生成的。但是高亮的樣式也可以自己定義, 主要是通過emphasis屬性來定制。emphsis中的結構, 和普通樣式的結構相同。

2.2. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>高亮的樣式</title><script type="text/javascript" src="echarts.js"></script></head><body><div id="main" style="width: 600px; height:400px; border: 1px solid;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '高亮的樣式'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['訪問來源']},// 全局調色盤color: ['green','#00FF00','#0000FF','#000000','#800000'],// 系列列表series: [{name: '訪問來源', // 系列名稱type: 'pie', // 系列圖表類型radius: '55%', // 餅圖的半徑, 直徑為可視區尺寸(容器高寬中較小一項)的55%長度。data: [ // 系列中的數據內容{ value: 235, name: '視頻廣告' },{ value: 274, name: '聯盟廣告' },{ value: 310, name: '郵件營銷' },{ value: 335, name: '直接訪問' },{ value: 400, name: '搜索引擎' }],emphasis: { // 高亮樣式。itemStyle: {color: '#FF0000' // 高亮時點的顏色。}}}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>

2.3. 效果圖

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的009_调色盘和高亮样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。