echarts經(jīng)驗(yàn)總結(jié)

使用echarts將盡五個年頭吭从，發(fā)現(xiàn)很多之前遇到的問題回頭又遇到了卻忘記了當(dāng)初解決問題的方法粥惧，因?yàn)楣臼亲龃髷?shù)據(jù)開發(fā)，對數(shù)據(jù)可視化使用頻繁且需(fei)求(chang)各(bian)異(tai)，所以echarts使用頻率很高卷扮，從今天開始想通過這篇文章對之前和之后使用時遇到的問題進(jìn)行記錄總結(jié)，方便以后查閱。

關(guān)于echarts實(shí)例獲取的方法

echarts提供init方法獲取實(shí)例枪狂，但是有時會出現(xiàn)反復(fù)在一個dom上初始化echarts實(shí)例，這樣性能不高且容易報錯宋渔，所以我在獲取實(shí)例的時候采用以下方法

$.extend({
        // 獲取echarts實(shí)例方法
        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)建實(shí)例的時候可以通過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àng)目中出現(xiàn)的氧急，起初是使用圖片去代替默認(rèn)設(shè)置颗胡，但是圖片的顏色是無法根據(jù)默認(rèn)顏色改變的，你配置的圖片是什么顏色态蒂，顯示的就是什么顏色杭措，但是出現(xiàn)多系列圖表就需要配置多個顏色的圖片，很麻煩钾恢，這個問題解決辦法是可以用svg去代替圖片手素，svg會根據(jù)默認(rèn)顏色自動渲染鸳址。

image.png

以該圖標(biāo)為例，首先在aliicon中找到相應(yīng)圖標(biāo)泉懦，然后在下載頁面復(fù)制svg

image.png

復(fù)制的svg如果是多path標(biāo)簽的稿黍，各個path之間需要用,隔開，例如上圖圓點(diǎn)的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背景圖片

image.png

項(xiàng)目中有些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
         }
      }]
  }
}

這樣背景圖片就渲染上去了窖维，而且瀏覽器放大縮小時背景圖片位置大小渲染沒有延遲