Echarts例項整理（持續更新）
阿新 • • 發佈：2020-11-25
Echarts 使用過的例項整理
目錄柱狀圖_01（左右分佈）
var option = { tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效 type: 'shadow' // 預設為直線，可選為：'line' | 'shadow' }, formatter: (params) => { if (!params.length) return '' let s = params[0].axisValueLabel + '<br/>' for (const iterator of params) { // 如果是負數則反轉 let d = iterator.data < 0 ? -iterator.data : iterator.data s += iterator.marker + iterator.seriesName + '：' + d + '<br/>' } return s } }, legend: { data: ['男', '女'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'value', axisLabel: { formatter: (value) => { // 負數取反 顯示的就是正數了 if (value < 0) return -value else return value } } }], yAxis: [{ type: 'category', axisTick: { show: false }, data: ['兒童', '少年', '青年', '中年', '老年'] }], series: [{ name: '男', type: 'bar', stack: '人口', label: { show: true }, data: [320, 302, 341, 374, 390] }, { name: '女', type: 'bar', stack: '人口', label: { show: true, position: 'inside', formatter: (value) => { // 值都是負數的 所以需要取反一下 return -value.data } }, data: [-120, -132, -101, -134, -190] } ] };
例項效果
柱狀圖_02（象形柱狀圖）
var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'none' }, formatter: function(params) { return params[0].name + ': ' + params[0].value; } }, xAxis: { data: ['小區數', '樓棟數', '出租房', '空房數'], axisTick: { show: false }, axisLine: { show: false }, axisLabel: { textStyle: { color: '#0DC3B4', } } }, yAxis: { splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { show: false } }, color: ['#0DC3B4'], series: [{ name: 'hill', type: 'pictorialBar', barCategoryGap: '-130%', symbol: 'path://M0,10 L10,10 L5,0 L0,10 z', // symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', itemStyle: { opacity: 0.1 }, emphasis: { itemStyle: { opacity: 1 } }, data: [13, 60, 25, 18], z: 10 }] }; // 加個動態顯示提示框 myChart.setOption(option); var countRoom = 0; var timmerOneAnimRoom = null; if (timmerOneAnimRoom) { clearInterval(timmerOneAnimRoom); } timmerOneAnimRoom = setInterval(() => { myChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: countRoom % 4 //列數 }); countRoom++; }, 4000);
圖例效果
雷達圖_01
var option = { title: { text: '{bb|重點人員總數:}{ii|50}{bb|人}', x: 'right', //水平安放位置，預設為'left'，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px） y: '5%', //垂直安放位置，預設為top，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px） textStyle: { //主標題文字樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} fontFamily: 'Source Han Sans CN', fontSize: 25, fontStyle: 'normal', fontWeight: 'normal', lineHeight: 20, rich: { bb: { fontFamily: 'Source Han Sans CN', fontSize: 15, fontWeight: 600, color: '#333333' }, ii: { color: '#5797D6', fontSize: 18, fontWeight: 600 } } }, }, tooltip: {}, // legend: { // data: ['預算分配（Allocated Budget）', '實際開銷（Actual Spending）'] // }, radar: { // shape: 'circle', name: { textStyle: { color: '#fff', backgroundColor: '#999', borderRadius: 3, padding: [3, 5] } }, center: ['50%', '50%'], radius: ['10%', '60%'], indicator: [{ name: '重點青少年', max: 6500 }, { name: '刑滿釋放人員', max: 16000 }, { name: '嚴重精神障礙患者', max: 30000 }, { name: '重點信訪人員', max: 38000 }, { name: '社群矯正人員', max: 52000 }, { name: '吸毒人員', max: 25000 } ] }, series: [{ name: '', type: 'radar', // areaStyle: {normal: {}}, data: [{ value: [4300, 10000, 28000, 35000, 50000, 19000], name: '重點人員分析', areaStyle: { opacity: 0.5, color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [{ color: 'rgba(23,200,189)', offset: 0 }, { color: 'rgba(211,252,254)', offset: 1 } ]) } }, ] }] };
例項效果
環形圖_01
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
// grid: {
// top: 3%
// },
series: [{
name: '',
type: 'pie',
radius: ['35%', '50%'],
center: ['50%', '60%'],
startAngle: 100,
minAngle: 5, //最小的扇區角度（0 ~ 360），用於防止某個值過小導致扇區太小影響互動
avoidLabelOverlap: true,
label: {
normal: {
show: true,
formatter: '{b|{b}}\n{hr|}\n{b|{c}次|{d}%}',
textStyle: {
fontSize: this.standSize / 150,
color: "black"
},
rich: {
b: {
color: 'black',
lineHeight: 20
},
hr: {
borderColor: '#A5B5F9',
width: '100%',
borderWidth: 1,
height: 0
},
}
}
},
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#EFEFF4',
color: function(params) {
//自定義顏色
var colorList = [
'#444349', '#F7A35B', '#7CB5EC', ' #F25C00 ', '#9090E0', '#4AC2A1', '#06cfbf', '#017717', '#ff467a','#1c61fe', '#fec61c', '#e61cfe'
];
return colorList[params.dataIndex]
}
},
// emphasis: {
// shadowBlur: 5,
// shadowOffsetX: 0,
// shadowColor: 'rgba(30, 144, 255，0.5)'
// }
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
normal: {
lineStyle: {
type: 'solid'
},
length: 10,
length2: 25,
}
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視訊廣告'},
{value: 1548, name: '搜尋引擎'}
]
}]
};
例項效果
data不是一樣的，圖片效果是後臺返回的資料顯示的。
折線圖_01（顏色漸變）
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ["2020-11-19", "2020-11-20", "2020-11-21", "2020-11-22", "2020-11-23", "2020-11-24", "2020-11-25"],
axisTick: { //x軸刻度線
"show": false
},
axisLine: { //x軸
"show": false,
lineStyle: {
color: "#999999",
}
},
},
yAxis: {
show: false,
type: 'value'
},
tooltip: {
//滑鼠懸停提示內容
trigger: 'axis', // 觸發型別，預設資料觸發，可選為：'axis' item
triggerOn: "click",
formatter: "{b} {c}次",
},
series: [{
center: ['50%', '60%'],
name: '樣例3',
smooth: true,
type: 'line',
// symbol: "none",
symbol: 'circle',
showSymbol: false,
itemStyle: {
color: '#6A5ACD',
normal: {
color: '#6A5ACD',
lineStyle: { // 系列級個性化折線樣式
width: 1,
type: 'solid',
//顏色漸變函式 前四個引數分別表示四個位置依次為左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(45,156,251)'
}, {
offset: 1,
color: 'rgba(228,242,255)'
}])
}
},
emphasis: {
color: '#6A5ACD',
lineStyle: { // 系列級個性化折線樣式
width: 2,
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#1E90FF'
}, {
offset: 1,
color: '#0000FF'
}])
}
}
}, //線條樣式
areaStyle: {
normal: {
//顏色漸變函式 前四個引數分別表示四個位置依次為左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(45,156,251)'
}, {
offset: 1,
color: 'rgba(228,242,255)'
}])
}
}, //區域顏色漸變
data: ["6", "1", "1", "0", "0", "0", "0"]
}]
};
例項效果
折線圖_02（實點網格線）
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ["2020-11-19", "2020-11-20", "2020-11-21", "2020-11-22", "2020-11-23", "2020-11-24", "2020-11-25"],
axisTick: { //x軸刻度線
"show": false
},
axisLine: { //x軸
"show": true,
lineStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(211, 211, 211, 0.2)'
}
}
},
yAxis: {
type: 'value',
axisTick: { //y軸刻度線
"show": false
},
name: '單位：' + type,
axisLine: { //y軸
"show": true,
lineStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(211, 211, 211, 0.2)'
}
}
},
tooltip: {
//滑鼠懸停提示內容
trigger: 'axis', // 觸發型別，預設資料觸發，可選為：'axis' item
triggerOn: "click",
formatter: "{b} {c}",
backgroundColor: "#0DC3B4"
},
series: [{
center: ['50%', '60%'],
name: '單位:次',
type: 'line',
symbol: 'circle', //拐點設定為實心
symbolSize: 6, //拐點大小
itemStyle: {
color: '#6A5ACD',
normal: {
color: '#0DC3B4', //拐點顏色
lineStyle: { // 系列級個性化折線樣式
width: 2,
type: 'solid',
color: '#0DC3B4',
},
emphasis: {
color: '#0DC3B4' //hover拐點顏色定義
}
}
}, //線條樣式
data: ["6", "1", "1", "0", "0", "0", "0"]
}]
};
例項效果
折線圖_03（空心點）
var option = {
xAxis: {
type: 'category',
data: ["2020-11-19", "2020-11-20", "2020-11-21", "2020-11-22", "2020-11-23", "2020-11-24", "2020-11-25"],
axisLine: { //x軸
lineStyle: {
color: '#999999',
},
},
},
yAxis: {
show: false,
type: 'value'
},
tooltip: {
//滑鼠懸停提示內容
trigger: 'axis', // 觸發型別，預設資料觸發，可選為：'axis' item
triggerOn: "click",
formatter: "{b} {c}次" + type
},
series: [{
center: ['50%', '60%'],
data: ["0", "0", "2", "0", "0", "0", "0"],
type: 'line',
symbolSize: 8, //拐點圓的大小
color: ['#E142F4'], //折線條的顏色
smooth: true
}]
};