echart php mysql简书_echart 踩坑之路
資料
漫漫踩坑路
1. 在低分辨率的電腦上使用時(shí)，出現(xiàn)文字和圖表模糊的情況。
問(wèn)題解決前后的展示截圖(截圖被壓縮了，實(shí)際效果比較明顯)
顯示模糊的展示截圖
問(wèn)題解決后的展示
產(chǎn)生問(wèn)題的原因
canvas 在使用的時(shí)候給的 width 和 height 與實(shí)際展示出來(lái)的寬高比例不為 1:1，造成像素值的偏離
canvas 標(biāo)簽截圖
解決問(wèn)題
解決參考地址
具體添加代碼
null, {devicePixelRatio: 2}
2. 隱藏掉柱形圖表的數(shù)據(jù)分裂線(xiàn)，因?yàn)閮纱蔚谋壤煌斐芍丿B了
示例圖片
隱藏前
隱藏后
設(shè)置的方法
option.yAxis[index].splitLine.show: false
3. 多種數(shù)據(jù)時(shí) series[index] 引用不同的 yAxis 設(shè)置，以及在 series[index] 中嵌套數(shù)據(jù)
示例圖片
示例圖片
【月收入】數(shù)據(jù)使用的是左側(cè)的數(shù)據(jù)作參考，【同比】使用的是右側(cè)的百分比數(shù)據(jù)作參考，【TO】使用的也是左側(cè)的數(shù)據(jù)作參考
總的展示方案：
【月收入】數(shù)據(jù)中單獨(dú)展示出【TO】的一行數(shù)據(jù)，這兩個(gè)數(shù)據(jù)都是以左側(cè)為參照，【同比】數(shù)據(jù)單獨(dú)展示，并 以右側(cè)為參考
option 配置代碼展示
opation = {
title: {
text: '月收入趨勢(shì)',
textStyle: {
fontSize: 17,
fontWeight: 800,
color: "#37394C"
},
left: '1%',
top: "5%"
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '2%',
right: '2%',
top: "20%",
bottom: '5%',
containLabel: true
},
legend: {
data: ['月收入', '同比',
{
name: 'T0',
icon: 'image:///static/img/module/index/S.png'
}
],
top: 15,
selectedMode: false,
formatter: function (data) {
return data + " ";
}
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
},
axisLine: {
show: false,
color: '#8795A8'
},
axisTick: {
show: false
},
axisPointer: {
type: 'line'
},
axisLabel: {
textStyle: {
color: '#8795A8',
}
}
}],
yAxis: [
{
// 月收入 規(guī)則
type: 'value',
min: 0,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#8795A8',
}
}
},
{
// 同比 規(guī)則
type: 'value',
min: -5,
// 起始線(xiàn)是否顯示
axisLine: {
show: false
},
// 起始線(xiàn)延長(zhǎng)出的分裂線(xiàn)是否展示
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value} %',
textStyle: {
color: '#8795A8',
}
}
}
],
series: [
{
name: '月收入',
type: 'bar',
color: '#3E82FE',
barWidth: 20,
// 嵌套【TO】數(shù)據(jù)
markLine: {
symbol: 'none',
silent: false,
itemStyle: {
normal: {
borderWidth: 2,
lineStyle: {
type: 'dashed',
color: '#D0021B',
width: 1.5
},
}
},
data: [{
yAxis: $T0
}]
},
data: $incom
},
{
name: '同比',
type: 'line',
symbolSize: 8,
color: '#01BF8F',
// 使用【同比】規(guī)則
yAxisIndex: 1,
data: $percent
}
]
}
4. 讓地圖中顯示的文字居中
默認(rèn)的文字顯示位置的規(guī)則
全國(guó)：省份名稱(chēng)默認(rèn)位置是在省會(huì)的位置；
這個(gè)規(guī)則是 jsonData.features[index].properties.cp 字段的經(jīng)緯度，兩個(gè)數(shù)值設(shè)置的
默認(rèn)顯示截圖
解決方法
let mapJson = require("@/utils/map/json/china.json");
mapJson.features.forEach(element => {
delete element.properties.cp;
});
最后的顯示效果
調(diào)整后的顯示效果
5. 地圖的默認(rèn)大小和滾動(dòng)縮放的功能設(shè)置
series: [
{
name: "測(cè)試",
type: "map",
// 默認(rèn)展示的比例
zoom: 1.2,
// 是否開(kāi)啟平游或縮放
roam: true,
// 滾輪縮放的極限控制
scaleLimit: {
min: 1,
max: 10
},
}
]
6. 為 series.label.formatter 函數(shù)內(nèi)部的內(nèi)容單獨(dú)設(shè)置樣式
思路
使用上面官方網(wǎng)站提供的方法添加一個(gè)樣式變量，之后在 formatter 中使用
配置源碼
// 漏斗形
funnelChart: {
calculable: true,
color: ["#FFA944", "#39A0FF"],
series: [
{
name: "漏斗圖",
type: "funnel",
gap: 1,
width: "40%",
left: "0",
right: "0",
top: "0",
bottom: "0",
minSize: "0%",
maxSize: "100%",
sort: "ascending",
label: {
show: true,
formatter: params => {
console.log(params);
const { name = "", data = "", money = "" } =
params.data || {};
return `${name} ${data} {gray| ${money}元}`;
},
// 這里是增加自定義樣式的地方，可在 label.formatter 中使用
rich: {
gray: {
color: "gray"
}
}
},
labelLine: {
length: 20,
lineStyle: {
width: 1,
type: "solid"
}
},
data: [
{
value: "10",
data: "1000",
money: 1000,
name: "頭部客戶(hù)"
},
{
value: "20",
data: "3000",
money: 3000,
name: "其他客戶(hù)"
}
]
}
]
},
最終演示效果
最終演示效果.png
7. 將 series[0].type = funnel 的漏斗圖，強(qiáng)行展示成一個(gè)固定的 "金字塔" 三角形
查閱了很多資料，發(fā)現(xiàn) echarts 一直都沒(méi)有做 金字塔 圖形的打算，由于 funnel 的本身的機(jī)制，很容易就造成生成出來(lái)的圖表 "變形" 的問(wèn)題，為了解決上述 "變形" 的問(wèn)題，我只好取巧設(shè)置：將 value 的屬性設(shè)置成 1:2 的值，注意 這個(gè) vlue 值，最終只是為了顯示起來(lái)好看，顯示數(shù)據(jù)的字段并不是這個(gè)，所以需要手動(dòng)增加展示數(shù)據(jù)的字段 data(這個(gè)屬性可以自定義，只要在 formatter 時(shí)取對(duì)即可)
配置源碼
// 漏斗形
funnelChart: {
calculable: true,
color: ["#FFA944", "#39A0FF"],
series: [
{
name: "漏斗圖",
type: "funnel",
gap: 1,
width: "40%",
left: "0",
right: "0",
top: "0",
bottom: "0",
minSize: "0%",
maxSize: "100%",
sort: "ascending",
label: {
show: true,
formatter: params => {
console.log(params);
const { name = "", data = "", money = "" } =
params.data || {};
return `${name} ${data} {gray| ${money}元}`;
},
// 這里是增加自定義樣式的地方，可在 label.formatter 中使用
rich: {
gray: {
color: "gray"
}
}
},
labelLine: {
length: 20,
lineStyle: {
width: 1,
type: "solid"
}
},
data: [
{
value: "10",
data: "1000",
money: 1000,
name: "頭部客戶(hù)"
},
{
value: "20",
data: "3000",
money: 3000,
name: "其他客戶(hù)"
}
]
}
]
},
最終演示效果
最終演示效果.png
總結(jié)
以上是生活随笔為你收集整理的echart php mysql简书_echart 踩坑之路的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java css是什么_Java 之 C
- 下一篇： mysql dba失业_DBA要失业了？