使用echarts的一點總結
阿新 • • 發佈：2018-12-30
首先要下載最新echarts，舊版可能很多功能不支援
1.餅圖中心寫文字
var myChart = echarts.init(document.getElementById('row-1-1')); var option = { color:["#53647E","#05B6F0"], title: { text: '23.5', textStyle: { fontSize:18, //fontFamily:'sans-serif', fontStyle:'normal', color:'#05B5EE', verticalAlign:"top" }, subtext: ['系統總體容量\n'], subtextStyle:{ fontSize:10, color: '#05B5EE' }, /*itemGap:'50px',*/ x: 'center', y: 'center', top:'35%' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [ { //name:'系統容量', type:'pie', radius: ['65%', '80%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: false, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:[ {value:11, name:'系統剩餘容量'}, {value:12.5, name:'系統使用容量'}, ] } ] }; myChart.setOption(option);
設定title中的text和subtext即可，樣式可以自定義
2.關於座標軸和分割線的設定
var myChart = echarts.init(document.getElementById('row-2-2')); var option = { color: ['#60CF54','#5EB95E','#c23531', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], tooltip : { trigger: 'axis', axisPointer : { // 座標軸指示器，座標軸觸發有效 type : 'shadow' // 預設為直線，可選為：'line' | 'shadow' } }, grid: { top:'15%', left: '3%', right: '4%', bottom: '5%', containLabel: true, borderColor:"#F5F5F5" }, xAxis :{ //x座標 type : 'category', data : [], axisTick: { //刻度 show:false, //不顯示刻度 }, show:false, //橫座標直接不顯示 }, yAxis : [ { type : 'value', nameTextStyle: { color:'#fff' }, axisLine:{ //座標軸軸線 show:false, //不顯示座標線 lineStyle:{ color:'#fff' } }, splitNumber:1, //左邊分割數，1位分割一次 axisTick: { //刻度 show:false, //不顯示刻度 }, axisLabel:{ //刻度標籤 color:"white", show:true, fontSize:10 }, splitLine: { show:false //分割線 } } ], series : [{ type:"bar", barCategoryGap:'50%', data:[100,80,60,50,20,60,70,90,20,100,50] }] }; myChart.setOption(option);
主要就是設定xAxis和yAxis中的axisLine,axisLabel,axisTick,splitLine,splitNumber等，具體引數看手冊即可
3.關於柱狀圖改變柱子間隔問題
series : [{
type:"bar",
barCategoryGap:'50%',
data:[100,80,60,50,20,60,70,90,20,100,50]
}]如果只有一組資料，想調整柱子間隔，在series中使用barCategoryGap調整即可
如果有多組資料，則需要使用barGap來調整類目之間的間距
4.關於一組資料改變柱狀圖顏色問題
series : [{ type:"bar", barCategoryGap:'70%', data:[100,80,60,50,20], itemStyle: { normal:{ color: function (params){ var colorList = ['#455B72','#A5AFB5','#D44191', '#45A5D5', '#15BCB5']; return colorList[params.dataIndex]; } }, }, markLine : { data : [ {type : 'average', name: '平均值'} ], lineStyle: { color: '#ddd', width: 1, type: 'dashed', /*shadowBlur: ..., shadowColor: ..., shadowOffsetX: 0, shadowOffsetY: 0, opacity: ..., curveness: 0,*/ } } }]
在series中設定itemStyle，像這個設定顏色即可
5.關於折線圖不同數值區間顏色不同問題
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
visualMap: {//區間內控制顯示顏色
show: false,
dimension: 1,
pieces: [[{gte: 7, lte: 15, color: '#7547A2'},{gte: 15, lte: 30, color: '#000'}]],//設定折線什麼區間顯示什麼顏色
seriesIndex:0,
outOfRange: { //設定區間外的顏色
color: 'red'
}
},
series: [{
name: '銷量',
type: 'line',
areaStyle: {normal: {}},//加上這個使折線下方填充顏色
data: [5, 20, 36, 10, 10, 20]
}
]
};在visualMap中設定pieces，其中可設定最大最小區間內折線的顏色，series中如果設定了areaStyle，則對應的區間內填充顏色也會相應改變，就像圖中那樣
附visualMap的配置
visualMap=[ //視覺對映元件，用於進行『視覺編碼』，也就是將資料對映到視覺元素。視覺元素可以是：symbol: 圖元的圖形類別。symbolSize: 圖元的大小。color: 圖元的顏色。
// colorAlpha: 圖元的顏色的透明度。opacity: 圖元以及其附屬物（如文字標籤）的透明度。colorLightness: 顏色的明暗度。colorSaturation: 顏色的飽和度。colorHue: 顏色的色調。
{
show:true, //是否顯示 visualMap-continuous 元件。如果設定為 false，不會顯示，但是資料對映的功能還存在
type: 'continuous', // 定義為連續型 viusalMap
min:10, //指定 visualMapContinuous 元件的允許的最小值
max:100, //指定 visualMapContinuous 元件的允許的最大值
range:[15, 40], //指定手柄對應數值的位置。range 應在 min max 範圍內
calculable:true, //是否顯示拖拽用的手柄（手柄能拖拽調整選中範圍）
realtime:true, //拖拽時，是否實時更新
inverse:false, //是否反轉 visualMap 元件
precision:0, //資料展示的小數精度，預設為0，無小數點
itemWidth:20, //圖形的寬度，即長條的寬度。
itemHeight:140, //圖形的高度，即長條的高度。
align:"auto", //指定元件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text:['High', 'Low'], //兩端的文字
textGap:10, //兩端文字主體之間的距離，單位為px
dimension:2, //指定用資料的『哪個維度』，對映到視覺元素上。『資料』即 series.data。 可以把 series.data 理解成一個二維陣列,其中每個列是一個維度,預設取 data 中最後一個維度
seriesIndex:1, //指定取哪個系列的資料，即哪個系列的 series.data,預設取所有系列
hoverLink:true, //滑鼠懸浮到 visualMap 元件上時，滑鼠位置對應的數值 在 圖表中對應的圖形元素，會高亮
inRange:{ //定義 在選中範圍中 的視覺元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{ //定義 在選中範圍外 的視覺元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"center", //元件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //元件離容器右側的距離,'20%'
bottom:"auto", //元件離容器下側的距離,'20%'
orient:"vertical", //圖例排列方向
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
textStyle:mytextStyle, //文字樣式
formatter: function (value) { //標籤的格式化工具。
return 'aaaa' + value; // 範圍標籤顯示內容。
}
},
{
show:true, //是否顯示 visualMap-continuous 元件。如果設定為 false，不會顯示，但是資料對映的功能還存在
type: 'piecewise', // 定義為分段型 visualMap
splitNumber:5, //對於連續型資料，自動平均切分成幾段。預設為5段
pieces: [ //自定義『分段式視覺對映元件（visualMapPiecewise）』的每一段的範圍，以及每一段的文字，以及每一段的特別的樣式
{min: 1500}, // 不指定 max，表示 max 為無限大（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定義label）'},
{value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // 表示 value 等於 123 的情況。
{max: 5} // 不指定 min，表示 min 為無限大（-Infinity）。
],
categories:['嚴重汙染', '重度汙染', '中度汙染', '輕度汙染', '良', '優'], //用於表示離散型資料（或可以稱為類別型資料、列舉型資料）的全集
min:10, //指定 visualMapContinuous 元件的允許的最小值
max:100, //指定 visualMapContinuous 元件的允許的最大值
minOpen:true, //介面上會額外多出一個『< min』的選塊
maxOpen:true, //介面上會額外多出一個『> max』的選塊。
selectedMode:"multiple", //選擇模式，可以是：'multiple'（多選）。'single'（單選）。
inverse:false, //是否反轉 visualMap 元件
precision:0, //資料展示的小數精度，預設為0，無小數點
itemWidth:20, //圖形的寬度，即長條的寬度。
itemHeight:140, //圖形的高度，即長條的高度。
align:"auto", //指定元件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text:['High', 'Low'], //兩端的文字
textGap:10, //兩端文字主體之間的距離，單位為px
showLabel:true, //是否顯示每項的文字標籤
itemGap:10, //每兩個圖元之間的間隔距離，單位為px
itemSymbol:"roundRect", //預設的圖形。可選值為： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
dimension:2, //指定用資料的『哪個維度』，對映到視覺元素上。『資料』即 series.data。 可以把 series.data 理解成一個二維陣列,其中每個列是一個維度,預設取 data 中最後一個維度
seriesIndex:1, //指定取哪個系列的資料，即哪個系列的 series.data,預設取所有系列
hoverLink:true, //滑鼠懸浮到 visualMap 元件上時，滑鼠位置對應的數值 在 圖表中對應的圖形元素，會高亮
inRange:{ //定義 在選中範圍中 的視覺元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{ //定義 在選中範圍外 的視覺元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"center", //元件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //元件離容器右側的距離,'20%'
bottom:"auto", //元件離容器下側的距離,'20%'
orient:"vertical", //圖例排列方向
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
textStyle:mytextStyle, //文字樣式
formatter: function (value) { //標籤的格式化工具。
return 'aaaa' + value; // 範圍標籤顯示內容。
}
}
];