echarts圖錶配置參數,web前端開發發展趨勢

mb6130455f7bea2 2021-09-18 11:46:54 阅读数:551

echarts 配置 web 前端

. axisLabel.inside 刻度標簽是否朝內,默認朝外

. axisLabel.rotate 刻度標簽旋轉的角度,在標簽顯示不下的時候可對標簽進行旋轉防止重疊

. axisLabel.formatter 刻度標簽的內容格式器

. axisLabel.color(fontize/fontStyle/align/lineHeight/backgroundColor) 刻度標簽常用css樣式設置

4.圖錶區域線條顏色等

·areaStyle 區域填充顏色
·lineStyle 線條顏色
·itemStyle 折線點顏色

series: [{
// 折線區域顏色
areaStyle: { color: '#0c229f45'},
// 折線線條顏色
lineStyle: { color: '#0c229f45'},
// 折線點顏色(散點圖顏色描邊等樣式)
itemStyle: { color: '#0c229f45'}
}]

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

5.圖錶上文本標簽設置 label.normal


series: [{
label: {
normal: {
show: true, // 是否顯示
position: top, //值還可以是(/left/right/inside/insideTop,[50%, 50%]相對圖形左上角的比特置)
distance: 30,// 當positon值為'top'等有效
rotate: 30, // 旋轉角度
offset: true, //文字偏移量
formatter: function(val) {
var strs = val.name.split('') //字符串數組
var str = ''
for(var i = 0, s; s = strs[i++];) { //遍曆字符串數組
str += s
if(!(i % 4)) str += '\n' //按需要求餘
}
return `${str}: ${val.value}%`
},//文本格式設置
color: red // (fontSize, fontStyle, fontWeight等css常用屬性)
}
}
}]

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.

6.圖錶上圖錶的高亮樣式label.emphasis


series: [
label: {
normal: {},
emphasis: {
show: true, //是否有高亮效果
textStyle: {
fontWeight: 'bold'
}
}
}
]

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

7.標簽的視覺引導線樣式


series: [
labelLine: {
normal: {
show: true, // 是否顯示
length: 30, // 第一段線長度
length2: 40, // 第二段線長度
smooth: false, // 是否平滑視覺引導線,也可以是錶示平滑程度的數值
lineStyle: {
color: 'red', // 線的顏色
width: 3, // 線的寬度
type: 'solid' // 線的類型
},
emphasis: {
show: true,
lineStyle: {
}
} // 高亮狀態下引導線的樣式
}
}
]

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.

8.橫向柱形圖顯示不同類別所占整體百分比

橫向柱形圖實現思路為將每個類別名稱設置為y軸,然後將x軸隱藏

顯示所占百分比思路為設置兩個數據區域,然後讓兩個數據區域重疊,其中一個將數據都設置成100,另一個就設置自己所占百分比就行了


xAxis: {
show: false, //將x軸隱藏
type: 'value',
boundaryGap: [0, 0], //坐標軸兩邊留白策略,即圖形在坐標軸內距離坐標軸線的邊距,在未設置min和max值時,[0,0]錶示兩邊不留白,圖錶緊挨坐標軸線,[0.3, 0.8]即錶示圖錶距離軸線有留白
//min: 1000000 當設置min值是坐標軸起點的數值,如果Min值小於數據中的最小值,則圖形會到坐標軸左側顯示,設置的boundrayGap: [x, y]中的x值無效,坐標軸刻度按max值和數據值來設定
//max: 2000000 當設置max值是坐標軸終點的數值,設置的boundrayGap: [x, y]中的y值無效
}
yAxis: {
axisLine: {
show: false
}, // y軸坐標軸線隱藏,注意不是y軸隱藏,我們還要顯示文字的
axisTick: [{
show: false
}] // y軸坐標軸刻度隱藏
}
// 設置兩個數據區域
series: [
{
type: 'bar',
data: [2.3, 64.2, 73.2, 63.4, 63.4],
tooltip: { show: false},
barMinHeight: 30, //最小柱高
barWidth: 10, // 柱寬度
barMaxWidth: // 最大柱寬度
z: 10, // 控制圖錶前後順序
itemStyle: { // 柱子樣式
normal: {
color: '#ff6600', // 柱狀圖顏色
label: {
### ajax
1)ajax請求的原理/ 手寫一個ajax請求?
2)readyState?
3)ajax异步與同步的區別?
4)ajax傳遞中文用什麼方法?
![echarts圖錶配置參數,web前端開發發展趨勢_程序員](https://s5.51cto.com/images/20210918/1631936381581177.jpg)
![echarts圖錶配置參數,web前端開發發展趨勢_前端_02](https://s6.51cto.com/images/20210918/1631936381651628.jpg)
**[CodeChina開源項目:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】](https://ali1024.coding.net/public/P7/Web/git)**
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
版权声明:本文为[mb6130455f7bea2]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210918114653750N.html