1.引人echarts.js?

<script src="echarts.min.js"></script>

2. 為 ECharts 準備一個具備大小（寬高）的 DOM(文檔對象模型)

<div id="main" style="width: 600px;height:400px;"></div>

3.條形圖的一些配置參數：

'''1. 設置圖表的標題''' title: {text: '這是圖表的標題文字' } '''2. 鼠標放在圖標上面的顯示信息,不設置的話就是true''' tooltip: {show: true} '''3. 設置圖例''' legend: {data:['圖例文字'] } '''4. 設置x軸的數據''' xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] } '''5. 設置y軸的數據''' xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] } '''6. 設置畫圖的類型''' series: [{name: '鼠標放在圖上面的提示文字',type: 'bar', // 以及畫圖的類型data: [畫圖的數據] }] '''7.設置背景色，因為是全局的，所以直接在 option 下設置''' //可以通過顏色的英文設置 backgroundColor:'red' '''也可以通過#的方式設置''' backgroundColor:'#ffffff' '''8. 設置圖表中所有文本的顏色''' '''四個參數分別為RGB的三個顏色以及一個透明度alpha,如果不行設置透明度的話，直接把rgba中的a去掉然后分別再括號里寫上RGB對應的三個參數值''' textStyle: {color: 'rgba(255, 0, 255,0.8)' }, '''9. 設置loading動畫 數據加載時，需要時間等待，則可以加上這個動畫效果'''、 '''啟動動畫''' myChart.showLoading(); '''關閉動畫''' myChart.hideLoading(); '''10. 坐標軸觸發，主要在柱狀圖''' tooltip : {trigger: 'axis' } '''11. 相關工具欄的設置''' toolbox: {'''是否顯示工具欄'''show : true,'''顯示的工具欄是垂直的還是水平的，默認是水平的'''orient : 'vertical','''工具欄圖標的大小，默認是15'''itemSize:20,'''工具欄圖標之間的距離，默認是10'''itemGap:15,'''各工具配置項'''feature : {'''展現當前圖表所用的數據，編輯后可以動態更新，設置顯示該工具，只讀設置為false'''dataView : {show: true, readOnly: false},'''動態類型切換,顯示該工具，可以添加的類型為，line, bar, stack, tiled'''magicType : {show: true, type: ['line', 'bar']},'''配置項還原工具，設置顯示'''restore : {show: true},'''設置是否可以保存圖片'''saveAsImage : {show: true}} } '''12. ''' xAxis : [{ '''類目軸，適用于離散的類目數據，為該類型時必須通過 data 設置類目數據.還有'value' 數值軸，適用于連續數據,有'time' 時間軸等等'''type : 'category',name : '這是x軸的名稱','''設置x軸名稱的的位置，餐廚有('start','center','end')'''nameLocation : 'center','''設置x軸名稱與x軸的距離，默認是15'''nameGap:28,'''設置x軸的名稱旋轉的度數'''nameRotate:10,'''設置x軸的是否是反向坐標軸，默認就是false'''inverse:false,'''設置x軸的字體樣式'''nameTextStyle : {'''設置字體顏色'''color:'rgb(238,99,99)','''設置坐標軸名稱文字字體的粗細'''fontWeight:'bold','''設置字體的大小'''fontSize:17},data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']} ], '''13. ''' series : [{name:'蒸發量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],'''圖表標注'''markPoint : {'''標注的數據數組'''data : ['''type:特殊的標注類型，用于標注最大值最小值等,name為標注名稱'''{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {'''圖表標線'''data : [{type : 'average', name: '平均值'}]}},{name:'降水量',type:'bar',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,2.3],markPoint : {data : [{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}]},markLine : {data : [{type : 'average', name : '平均值'}]}},

? 顏色RGB對照大全

?Echarts里面內置了兩個屬性，'light'和'drak'

4. 餅圖的配置參數：

'''1. 設置餅圖的大小''' radius: '60%', '''2. 是否通過設置 roseType 顯示成南丁格爾圖。南丁格爾圖會通過半徑表示數據的大小。''' roseType: 'angle' '''3. 設置標簽的視覺引導線的顏色''' labelLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'} } '''4. 設置扇形的顏色''' itemStyle: {// 設置扇形的顏色color: '#c23531',//陰影shadowBlur: 200,//陰影顏色shadowColor: 'rgba(0, 0, 0, 0.5)' } ''' 5. 設置每個扇形的顏色''' data: [{ // 第一個扇形的大小value:400, name:'第一個標簽文本',// 設置樣式itemStyle: {color: '#c23531'}},{ // 第二個扇形的大小value:600, name:'第二個標簽文本',itemStyle: {color: '#c23531'}}...] '''6. 鼠標放在圖上的高亮顯示''' emphasis: {itemStyle: {// 高亮時點的顏色。color: 'blue'},label: {// 是否顯示，默認就是True，show: true,formatter: '高亮時標簽的文字。'} } '''7. series''' (1)series-pie.center : 餅圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。支持設置成百分比，設置成百分比時第一項是相對于容器寬度，第二項是相對于容器高度。例如： center: ['50%', '50%']

<script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));myChart.setOption({series : [{name: '訪問來源',type: 'pie',radius: '60%',data:[{value:235, name:'視頻廣告'},{value:274, name:'聯盟廣告'},{value:310, name:'郵件營銷'},{value:335, name:'直接訪問'},{value:400, name:'搜索引擎'}]}]}) </script>

5. 折線圖的配置參數

"""有關折線圖的setOption的參數""" '''1. 工具欄的相關設置''' toolbox: {show: true,feature: {'''數據區域縮放'''dataZoom: {'''指定哪些 yAxis 被控制。如果缺省(none)則控制所有的y軸'''yAxisIndex: 'none'},'''數據視圖，即工具欄中的數據視圖的相關配置'''dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}} '''2. x軸的相關設置'''xAxis: {type: 'category','''設置坐標的點是否與x軸的標簽對齊，false為對齊，true為不對齊'''boundaryGap: false,data: ['周一','周二','周三','周四','周五','周六','周日']}, '''3. y軸的相關設置''' yAxis: {type: 'value','''坐標軸刻度標簽的相關設置'''axisLabel: {'''刻度標簽的內容格式器，支持字符串模板和回調函數兩種形式。'''formatter: '{value} °C'}}, '''4. 系列列表。每個系列通過 type 決定自己的圖表類型''' series: [///第一個線{name:'最高氣溫',type:'line',data:[11, 11, 15, 13, 12, 13, 10],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},//圖表標注線markLine: {data: [{type: 'average', name: '平均值'}]}}, //第二個線{name:'最低氣溫',type:'line',data:[1, -2, 2, 5, 3, 2, 0],markPoint: {data: ['''valueL:設置值，xAxis:標注值的x軸位置，yAxis:標注的y軸設置'''{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]},markLine: {data: [//第一個標注線{type: 'average', name: '平均值'},[//第二個標注線文本{symbol: 'none','''標注相對容器的屏幕 x 坐標'''x: '90%',yAxis: 'max'}, // 第二個標注線{symbol: 'circle','''標線的文本位置和值的相關設置'''label: {'''設置標線文本的位置，start\middle\end''''position: 'start','''標簽內容格式器，支持字符串模板和回調函數兩種形式'''formatter: '最大值'}},type: 'max',name: '最高點'}]]}}]

6. 散點圖的配置參數

'''1. 直角坐標系內繪制網格，''' grid: {show:true,'''網格距離容器左邊的百分比'''left: '5%','''距離右邊的'''right: '7%','''距離底部的百分比'''bottom: '3%',//網格的區域是否包含坐標軸的標簽containLabel: true }, '''2. 數據項的設置，即鼠標放在點上的提示內容''' tooltip : {''' function(params) 回調函數的格式 '''formatter : function (params) {'''seriesName 系列名稱value 傳入的數據值'''if (params.value.length > 1) {return params.seriesName + ' :<br/>'+ params.value[0] + 'cm '+ params.value[1] + 'kg ';}else {return params.seriesName + ' :<br/>'+ params.name + ' : '+ params.value + 'kg ';}},axisPointer:{show: true,'''十字準星指示器'''type : 'cross',lineStyle: {'''線的類型'''type : 'solid'}} '''3. 散點圖的工具欄的相關設置 ''' toolbox: {feature: {'''數據區域縮放。'''dataZoom: {},brush: {'''使用的按鈕，rect:開啟矩形框選擇功能polygon:開啟任意形狀選擇功能clear: 清空所有選框'''type: ['rect', 'polygon', 'clear']}} }, '''4. x軸的相關設置''' xAxis : [{type : 'value','''是否脫離0刻度，設置成 true 后坐標刻度不會強制包含零刻'''scale:true,axisLabel : {formatter: '{value} cm'},'''坐標軸在 grid 區域中的分隔線。'''splitLine: {'''是否顯示分隔線，默認會顯示'''show: false}} ], '''5. series.markArea 圖標的標域 常用于標記圖表中某個范圍的數據''' markArea: {'''默認為 false，即響應和觸發鼠標事件。'''silent: true,'''該標域的樣式。'''itemStyle: {''' 設置標域為透明(transparent)，或者rgb(c,c,c)形式'''color: 'transparent','''描邊線寬，為0時無描邊'''borderWidth: 1,'''描邊類型： 默認為實線(solid)。/dashed/dotted'''borderType: 'dashed'},'''標域的數據數組''''''分別有標域的左上角的坐標數據以及右下角的數據'''data: [[{name: '女性分布區間',xAxis: 'min',yAxis: 'min'}, {xAxis: 'max',yAxis: 'max'}]] },

?

總結

以上是生活随笔為你收集整理的Echarts(自己整理的一些散点图、饼图、条形图、散点图的基本配置参数)的全部內容，希望文章能夠幫你解決所遇到的問題。

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