資料

漫漫踩坑路

1. 在低分辨率的電腦上使用時，出現文字和圖表模糊的情況。

問題解決前后的展示截圖(截圖被壓縮了，實際效果比較明顯)

顯示模糊的展示截圖

問題解決后的展示

產生問題的原因

canvas 在使用的時候給的 width 和 height 與實際展示出來的寬高比例不為 1:1，造成像素值的偏離

canvas 標簽截圖

解決問題

解決參考地址

具體添加代碼

null, {devicePixelRatio: 2}

2. 隱藏掉柱形圖表的數據分裂線，因為兩次的比例不同造成重疊了

示例圖片

隱藏前

隱藏后

設置的方法

option.yAxis[index].splitLine.show: false

3. 多種數據時 series[index] 引用不同的 yAxis 設置，以及在 series[index] 中嵌套數據

示例圖片

示例圖片

【月收入】數據使用的是左側的數據作參考，【同比】使用的是右側的百分比數據作參考，【TO】使用的也是左側的數據作參考

總的展示方案：

【月收入】數據中單獨展示出【TO】的一行數據，這兩個數據都是以左側為參照，【同比】數據單獨展示，并 以右側為參考

option 配置代碼展示

opation = {

title: {

text: '月收入趨勢',

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: [

{

// 月收入 規則

type: 'value',

min: 0,

axisLine: {

show: false

},

axisTick: {

show: false

},

axisLabel: {

formatter: '{value}',

textStyle: {

color: '#8795A8',

}

}

},

{

// 同比 規則

type: 'value',

min: -5,

// 起始線是否顯示

axisLine: {

show: false

},

// 起始線延長出的分裂線是否展示

splitLine: {

show: false

},

axisTick: {

show: false

},

axisLabel: {

formatter: '{value} %',

textStyle: {

color: '#8795A8',

}

}

}

],

series: [

{

name: '月收入',

type: 'bar',

color: '#3E82FE',

barWidth: 20,

// 嵌套【TO】數據

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',

// 使用【同比】規則

yAxisIndex: 1,

data: $percent

}

]

}

4. 讓地圖中顯示的文字居中

默認的文字顯示位置的規則

全國：省份名稱默認位置是在省會的位置；

這個規則是 jsonData.features[index].properties.cp 字段的經緯度，兩個數值設置的

默認顯示截圖

解決方法

let mapJson = require("@/utils/map/json/china.json");

mapJson.features.forEach(element => {

delete element.properties.cp;

});

最后的顯示效果

調整后的顯示效果

5. 地圖的默認大小和滾動縮放的功能設置

series: [

{

name: "測試",

type: "map",

// 默認展示的比例

zoom: 1.2,

// 是否開啟平游或縮放

roam: true,

// 滾輪縮放的極限控制

scaleLimit: {

min: 1,

max: 10

},

}

]

6. 為 series.label.formatter 函數內部的內容單獨設置樣式

思路

使用上面官方網站提供的方法添加一個樣式變量，之后在 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: "頭部客戶"

},

{

value: "20",

data: "3000",

money: 3000,

name: "其他客戶"

}

]

}

]

},

最終演示效果

最終演示效果.png

7. 將 series[0].type = funnel 的漏斗圖，強行展示成一個固定的 "金字塔" 三角形

查閱了很多資料，發現 echarts 一直都沒有做 金字塔 圖形的打算，由于 funnel 的本身的機制，很容易就造成生成出來的圖表 "變形" 的問題，為了解決上述 "變形" 的問題，我只好取巧設置：將 value 的屬性設置成 1:2 的值，注意 這個 vlue 值，最終只是為了顯示起來好看，顯示數據的字段并不是這個，所以需要手動增加展示數據的字段 data(這個屬性可以自定義，只要在 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: "頭部客戶"

},

{

value: "20",

data: "3000",

money: 3000,

name: "其他客戶"

}

]

}

]

},

最終演示效果

最終演示效果.png

總結

以上是生活随笔為你收集整理的echart php mysql简书_echart 踩坑之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。