使用echarts將盡五個年頭，發(fā)現(xiàn)很多之前遇到的問題回頭又遇到了卻忘記了當(dāng)初解決問題的方法，因為公司是做大數(shù)據(jù)開發(fā)，對數(shù)據(jù)可視化使用頻繁且需(fei)求(chang)各(bian)異(tai)，所以echarts使用頻率很高，從今天開始想通過這篇文章對之前和之后使用時遇到的問題進行記錄總結(jié)，方便以后查閱。
關(guān)于echarts實例獲取的方法
echarts提供init方法獲取實例，但是有時會出現(xiàn)反復(fù)在一個dom上初始化echarts實例，這樣性能不高且容易報錯，所以我在獲取實例的時候采用以下方法
$.extend({
// 獲取echarts實例方法
initChartInstance: function (domId, theme) {
var dom = document.getElementById(domId);
var myChart = echarts.getInstanceByDom(dom);
if (myChart) {
myChart.clear();
} else {
myChart = echarts.init(dom, theme || "macarons");
}
$(window).resize(function () {
myChart.resize();
})
return myChart
}
})
這樣獲取可以避免報錯，且在創(chuàng)建實例的時候可以通過echarts.init(dom, theme || "macarons")添加主題樣式，并且當(dāng)瀏覽器縮放是可通過myChart.resize()自適應(yīng)
關(guān)于雙Y軸，折線圖要求在柱圖上邊
這種情況可以通過控制個系列Y所在Y軸的max值來控制，可以通過調(diào)整柱圖的yAxis的max值去控制柱圖高度，也可以通過調(diào)整折線圖所在yAxis的max值去提升或下降折線的位置
關(guān)于折線圖item圖標(biāo)自定義的問題
這個需求是在大屏項目中出現(xiàn)的，起初是使用圖片去代替默認(rèn)設(shè)置，但是圖片的顏色是無法根據(jù)默認(rèn)顏色改變的，你配置的圖片是什么顏色，顯示的就是什么顏色，但是出現(xiàn)多系列圖表就需要配置多個顏色的圖片，很麻煩，這個問題解決辦法是可以用svg去代替圖片，svg會根據(jù)默認(rèn)顏色自動渲染。
以該圖標(biāo)為例，首先在aliicon中找到相應(yīng)圖標(biāo)，然后在下載頁面復(fù)制svg
復(fù)制的svg如果是多path標(biāo)簽的，各個path之間需要用
,隔開，例如上圖圓點的path格式為
<svg t="1604641432983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3454" width="200" height="200">
<path d="M512 51c62.26 0 122.62 12.18 179.43 36.21 54.89 23.22 104.2 56.46 146.55 98.82 42.35 42.35 75.6 91.66 98.82 146.55C960.82 389.38 973 449.74 973 512s-12.18 122.62-36.21 179.43c-23.22 54.89-56.46 104.2-98.82 146.55-42.35 42.35-91.66 75.6-146.55 98.82C634.62 960.82 574.26 973 512 973s-122.62-12.18-179.43-36.21c-54.89-23.22-104.2-56.46-146.55-98.82-42.35-42.35-75.6-91.66-98.82-146.55C63.18 634.62 51 574.26 51 512s12.18-122.62 36.21-179.43c23.22-54.89 56.46-104.2 98.82-146.55 42.35-42.35 91.66-75.6 146.55-98.82C389.38 63.18 449.74 51 512 51m0-51C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0z" p-id="3455"></path>
<path d="M512 512m-256 0a256 256 0 1 0 512 0 256 256 0 1 0-512 0Z" p-id="3456"></path>
</svg>
改svg含兩個path最后在echarts配置中的應(yīng)該是以下形式
option:{
series:[{
symbol:"path://M512 51c62.26 0 122.62 12.18 179.43 36.21 54.89 23.22 104.2 56.46 146.55 98.82 42.35 42.35 75.6 91.66 98.82 146.55C960.82 389.38 973 449.74 973 512s-12.18 122.62-36.21 179.43c-23.22 54.89-56.46 104.2-98.82 146.55-42.35 42.35-91.66 75.6-146.55 98.82C634.62 960.82 574.26 973 512 973s-122.62-12.18-179.43-36.21c-54.89-23.22-104.2-56.46-146.55-98.82-42.35-42.35-75.6-91.66-98.82-146.55C63.18 634.62 51 574.26 51 512s12.18-122.62 36.21-179.43c23.22-54.89 56.46-104.2 98.82-146.55 42.35-42.35 91.66-75.6 146.55-98.82C389.38 63.18 449.74 51 512 51m0-51C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0z,M512 512m-256 0a256 256 0 1 0 512 0 256 256 0 1 0-512 0Z"
}]
}
關(guān)于tooltip和label的formatter設(shè)置
在tooltip中和label中自定義文本內(nèi)容是，換行在tooltip的formatter中使用<br/>，在label中則使用\n，這是應(yīng)為tooltip的formatter中支持html，但在label中的formatter則不支持，label中的樣式設(shè)置可以采用rich的方式添加樣式
var option = {
tooltip:{
formatter:function(params){
return "<div class='chart-tooltip'>"+params.name+"</div>"
}
}
}
var option = {
series:{
label:{
formatter: [
'{a|這段文本采用樣式a}',
'{b|這段文本采用樣式b}這段用默認(rèn)樣式{x|這段用樣式x}'
].join('\n'),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
}
}
}
}
關(guān)于echarts背景圖片
項目中有些echarts需要背景圖片修飾，這種情況開始的時候使用css去設(shè)置，在餅圖div父級設(shè)置背景圖片并調(diào)整大小且居中顯示，效果也可以，只是瀏覽器放大縮小的時候背景圖片大小和位置調(diào)整有延遲，所以查看官方文檔發(fā)現(xiàn)可以使用graphic配置渲染canvas圖片背景
var option = {
graphic:{
elements:[{
type: "image",
left:"center",
top:"middle",
style:{
image:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAACbCAYAAACXvfL1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2Rp",
width:180,
height:180
}
}]
}
}
這樣背景圖片就渲染上去了，而且瀏覽器放大縮小時背景圖片位置大小渲染沒有延遲
