image.png
直接上代碼
<div id="fftjChart"></div>
let fftjChart = null;
onMounted(()=>{
fftjChart = echarts.init(document.getElementById('fftjChart'));
drawFftjChart();
window.addEventListener('resize', () => {
fftjChart.resize();
})
})
function drawFftjChart() {
let yData = [300, 498, 778, 382, 299, 372];
fftjChart.setOption({
grid: {
left: '5%',
right: '5%',
top: '5%',
bottom: '5%',
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: function (parms) {
return parms.marker + " " + parms.name + "：" + parms.value + "萬元";
}
},
xAxis: {
type: 'category', // category(坐標(biāo)軸類型)
data: ['建安區(qū)', '魏都區(qū)', '長葛市', '禹州市', '襄城縣', '鄢陵縣'],
axisTick: { // 坐標(biāo)軸刻度相關(guān)配置
show: false // 是否顯示坐標(biāo)軸刻度
},
axisLine: { // 坐標(biāo)軸軸線相關(guān)配置
lineStyle: { // 坐標(biāo)軸軸線樣式
color: 'rgba(255,255,255,0.15)' // 坐標(biāo)軸軸線顏色
}
},
axisLabel: { // 坐標(biāo)軸刻度標(biāo)簽相關(guān)配置
color: '#ffffff',
fontSize: 14,
margin: 20
}
},
yAxis: {
type: 'value', // value(數(shù)值軸,適用于連續(xù)數(shù)據(jù))
axisTick: { // 坐標(biāo)軸刻度相關(guān)配置
show: false // 是否顯示坐標(biāo)軸刻度
},
axisLine: { // 坐標(biāo)軸軸線相關(guān)配置
show: false // 是否顯示坐標(biāo)軸軸線
},
axisLabel: { // 坐標(biāo)軸刻度標(biāo)簽相關(guān)配置
color: '#ffffff',
fontSize: 14
},
splitLine: { // 坐標(biāo)軸在 grid 區(qū)域中的分隔線
lineStyle: { // 分割線配置
color: 'rgba(255,255,255,0.15)' // 分割線顏色
}
}
},
series: [
// 底部的橢圓形(象形柱圖):pictorialBar
{
type: "pictorialBar", // pictorialBar(象形柱圖)
label: { // 圖形上的文本標(biāo)簽,可用于說明圖像的一些數(shù)據(jù)信息,比如值,名稱等
show: true, //是否顯示標(biāo)簽
position: ['17', '-30'], // 標(biāo)簽的位置(可以是絕對的像素值或者百分比['50%','50%',也可以是top,left等])
color: '#01E4FF',
fontSize: 14
},
symbolSize: [40, 20], // 圖形的大小用數(shù)組分別比表示寬和高,也樂意設(shè)置成10相當(dāng)于[10,10]
symbolOffset: [0, 10], // 圖形相對于原本位置的偏移
z: 12, // 象形柱狀圖組件的所有圖形的 z 值.控制圖形的前后順序.z 值小的圖形會被 z 值大的圖形覆蓋.
itemStyle: { // 圖形樣式
// echarts.graphic.LinearGradient(echarts內(nèi)置的漸變色生成器)
// 4個參數(shù)用于配置漸變色的起止位置,這4個參數(shù)依次對應(yīng)右 下 左 上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 這里 offset: 0 1 ,表示從下往上的漸變色
{
offset: 0, // 0%處的顏色
color: "rgba(31,155,255,1)"
},
{
offset: 1, // 100%處的顏色
color: "rgba(0,229,255,1)"
}
])
},
data: yData
},
// 中間的長方形柱狀圖(柱狀圖):bar
{
type: 'bar', // 柱狀圖
barWidth: 40, // 柱條的寬度,不設(shè)時自適應(yīng)
barGap: '0%', // 柱子與柱子之間的距離
itemStyle: { // 圖形樣式
// color支持(rgb(255,255,255)、rgba(255,255,255,1)跨跨、#fff,也支持漸變色和紋理填充)
// 下面就是使用線性漸變
color: {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0, // 0%處的顏色
"color": "rgba(0,229,255,0.5)"
}, {
"offset": 1, // 100%處的顏色
"color": "#1F9BFF"
}]
}
},
data: yData
},
// 頂部的橢圓形(象形柱圖):pictorialBar
{
type: "pictorialBar",
symbolSize: [40, 20],
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(31,155,255,1)"
},
{
offset: 1,
color: "rgba(0,229,255,1)"
}
], false)
},
data: yData
}
]
});
}
