Echarts 圖表開發(fā)遇到的問題與總結(jié)
1.安裝導(dǎo)入
import * as echarts from 'echarts';
2.dom引用
<div style="width: 100%; height: 343px;" ref="chartDom" v-loading="isLoading"> </div>
3.基本使用:arrow_down:
3.1 bar 圖——按時間展示人數(shù)和占比
-
??沒有數(shù)據(jù)是no data 設(shè)置
-
tooltip 自定義設(shè)置
-
坐標軸線和label自定義設(shè)置
const chartDom = ref();
const colors = ['#EC4586', '#2675FF'];
const initChart = (): void => {
if (chartDom.value && chartDom.value.dispose) {
// 移去上次渲染的結(jié)果，確保本次不受影響
chartDom.value.dispose();
}
const chart = chartDom.value && echarts.init(chartDom.value)
// 指定圖表的配置項和數(shù)據(jù)
const option: any = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
// 指定圖表的配置項和數(shù)據(jù)
const option: any = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
grid: {
right: '20%', // margin-right 圖邊距
},
xAxis: [
{
type: 'category',
// prettier-ignore
data: XData.value,// 這里x軸就是后端返回的日期
axisTick: {
show: false,
gridIndex: 0,
},
axisLine: {
lineStyle: { // 設(shè)置x 軸顏色
color: '#ebedf0',
},
},
axisLabel: {
// x軸文字樣式設(shè)置
show: true,
textStyle: {
color: '#898a8c',
fontSize: '12px',
fontFamily: ' Roboto, Roboto-Regular',
fontWeight: 400,
textAlign: 'CENTER',
},
},
},
],
yAxis: [
{
type: 'value',
name: '活躍人數(shù)',
position: 'left',
// alignTicks: true,
},
{
type: 'value',
name: '活躍率',
position: 'right',
// alignTicks: true,
offset: 80,
axisLabel: {
formatter: '{value} %', // 自定義展示y軸標簽
},
},
],
series: [
{
name: chartTitle.activeDayCnt,
type: 'bar',// 此處為bar圖
yAxisIndex: 0,
data: y1,
barWidth: 16,// 可自定義設(shè)置barwidth
},
{
name: chartTitle.activeDayRate,
type: 'bar',
yAxisIndex: 1,
data: y2,
barWidth: 16
},
],
};
// 當數(shù)據(jù)為空的時候，在圖標中間展示“no data”
if (XData.value.length === 0) {
const optionEmpty = {
title: {
text: 'No data',
x: 'center',
y: 'center',
textStyle: {
fontFamily: 'Roboto, Roboto-Regular',
color: '#ccc',
fontWeight: 'normal',
fontSize: 16,
},
},
};
// option 重新渲染
chart.setOption(optionEmpty, true);
} else {
XData.value.length && chart.setOption(option, true); // 設(shè)置true 及時刷新
}
// 請求后端數(shù)據(jù)處理
const getTrend = async (): Promise<void> => {
try {
isLoading.value = true;
const data = await fetchTrendDiagram(searchForm.value);
XData.value = data.map((item: any) => dayjs(item.pDate).format('YYYY-MM'));// X 軸數(shù)據(jù)
chartsData.value = data;
// y軸數(shù)據(jù)
chartsData.value?.forEach((item: any) => {
y1.push(item.activeDayCnt);
y2.push(item.activeDayRate);
});
initChart(); // 觸發(fā)echarts
} catch (e) {
Message.error(e);
} finally {
isLoading.value = false;
}
};
其中tooltip自定義配置:
-
根據(jù)數(shù)據(jù)判斷是否展示%：
formatter: function (param: any): string {
return `
<div style="padding: 12px; line-height: 25px;font-size: 14px;font-family: Roboto, Roboto-Regular;
font-weight: 400;text-align: LEFT;color: #252626;">
${param[0].axisValue}</br>
${param
.map((item: any) => {
let str = '';
if ( item.seriesName ==="活躍率"
) {
str += `
${item.marker} ${item.seriesName}：${item.data}%
`;
} else {
str = `
${item.marker} ${item.seriesName}：${item.data}
`;
}
return str;
})
.join('<br>')}
</div>
`;
},
2. 使用三元表達式條件設(shè)置tooltip 中的樣式
formatter: function (param: any): string {
return `
<div style="padding: 12px; line-height: 25px;font-size: 14px;font-family: Roboto, Roboto-Regular;
font-weight: 400;text-align: LEFT;color: #252626;">
${param[0].axisValue}</br>
${param
.map((item: any) => {
let str = '';
// 使用三元表達式條件設(shè)置樣式
str = `
${item.marker}視頻數(shù)：<span style="font-size: 14px; ${item.data.videoStatus ? 'color:#FF4940;' : 'color: #005cff'
}" > ${item.data.video}${t('days')} </span>
</br>
`;
return str;
})
.join('<br>')}
</div>
`;
},
3. 在toolip中加入點擊事件
formatter: function (param: any): string {
let str;
// 節(jié)點hover自定義內(nèi)容
// * 字符串里寫事件，不能使用onclick，注意參數(shù)拼接方式, 目前不使用這個事件（需要在window.test 方式注冊）
str =
` <span onclick="test(\'` +
JSON.stringify(param.data).replace(/"/g, '"') +
`\')"
style="font-size: 14px; font-family: Roboto, Roboto-Regular; font-weight: 400; color: #333;">
${param.data.source} -- ${param.data.target}
<span style="font-weight: 500;color: #1f1f1f;">
${param.value}% ${param.data.num}</span></span>`;
return str;
},
window.test = function(param){
console.log(param)
}
3.2 sangkey 圖
記錄一些自定義的配置，主要是series：
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency',
},
lineStyle: {
color: 'gradient',
curveness: 0.5,
},
// 對節(jié)點標簽樣式單獨設(shè)置
label: {
fontSize: 12,
color: '#666',
formatter: function (params: any): any {
const { data } = params;
return `${data.name} ${data.value}% ${data.size}`;
},
},
left: '10%', // 圖邊距
right: '10%',
height: '90%', // 設(shè)置的高度 100% 可能會覆蓋部分數(shù)據(jù)
nodeGap: 20, // name 節(jié)點間距
data: sankeyNodeName.value,
links: sankeyNodeLink.value,
layoutIterations: 0, // *布局迭代次數(shù)，設(shè)置為0 可讓data按指定順序展示
},
3.3 折線圖
主要??記錄:
-
折線的漸變效果
const color = ['#005CFF', '#1AC7B5', '#9E9E9E', '#FFA442', '#FF4940'];//定義一組顏色 // 指定圖表的配置項和數(shù)據(jù) const option: any = { // 利用該屬性根據(jù)data的value值設(shè)置漸變的范圍, visualMap: [ { show: false, type: 'continuous', seriesIndex: 0, min: -20,// 圖表數(shù)據(jù)的最值 max: 30, target: { inRange: { color: color.reverse(), }, }, }, ], ... } -
折線圖y軸一般是數(shù)值，這里需要設(shè)置為文本表示類型，但是又需要有在x 軸下方的表示，因此不能直接設(shè)置category 屬性。value 為折線圖對應(yīng)的數(shù)據(jù)。
yAxis: [ { type: 'value', // 不設(shè)置category axisLabel: { formatter: function (value): any { const texts: any = []; if (value == 0) { texts.push('未上學(xué)'); } else if (value == 10) { texts.push('小學(xué)'); } else if (value == 20) { texts.push('中學(xué)'); } else if (value == 30) { texts.push('大學(xué)'); } else if (value == -10) { texts.push('中專'); } else if (value == -20) { texts.push('勸退'); } return texts; }, } ] -
設(shè)置折線下方顏色漸變效果
series:[ { name: '總數(shù)', yAxisIndex: 0, data: y1, color: '#005CFF', type: 'line', smooth: true, symbol: 'circle', showSymbol: false, // hover 時展示symbol symbolSize: 6, areaStyle: { opacity: 0.12, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#005CFF', }, { offset: 1, color: '#fff', }, ]), }; }, ]
