echarts经验总结

使用echarts将尽五个年头，发现很多之前遇到的问题回头又遇到了却忘记了当初解决问题的方法，因为公司是做大数据开发，对数据可视化使用频繁且需(fei)求(chang)各(bian)异(tai)，所以echarts使用频率很高，从今天开始想通过这篇文章对之前和之后使用时遇到的问题进行记录总结，方便以后查阅。

关于echarts实例获取的方法

echarts提供init方法获取实例，但是有时会出现反复在一个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
        }
})

这样获取可以避免报错，且在创建实例的时候可以通过echarts.init(dom, theme || "macarons")添加主题样式，并且当浏览器缩放是可通过myChart.resize()自适应

关于双Y轴，折线图要求在柱图上边

这种情况可以通过控制个系列Y所在Y轴的max值来控制，可以通过调整柱图的yAxis的max值去控制柱图高度，也可以通过调整折线图所在yAxis的max值去提升或下降折线的位置

关于折线图item图标自定义的问题

这个需求是在大屏项目中出现的，起初是使用图片去代替默认设置，但是图片的颜色是无法根据默认颜色改变的，你配置的图片是什么颜色，显示的就是什么颜色，但是出现多系列图表就需要配置多个颜色的图片，很麻烦，这个问题解决办法是可以用svg去代替图片，svg会根据默认颜色自动渲染。

image.png

以该图标为例，首先在aliicon中找到相应图标，然后在下载页面复制svg

image.png

复制的svg如果是多path标签的，各个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配置中的应该是以下形式

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"
    }]
}

关于tooltip和label的formatter设置

在tooltip中和label中自定义文本内容是，换行在tooltip的formatter中使用<br/>，在label中则使用\n，这是应为tooltip的formatter中支持html，但在label中的formatter则不支持，label中的样式设置可以采用rich的方式添加样式

var option = {
  tooltip:{
    formatter:function(params){
      return "<div class='chart-tooltip'>"+params.name+"</div>"
    }
  }
}

var option = {
  series:{
    label:{
      formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{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
        }
    }
  }
}

关于echarts背景图片

image.png

项目中有些echarts需要背景图片修饰，这种情况开始的时候使用css去设置，在饼图div父级设置背景图片并调整大小且居中显示，效果也可以，只是浏览器放大缩小的时候背景图片大小和位置调整有延迟，所以查看官方文档发现可以使用graphic配置渲染canvas图片背景

var option = {
  graphic:{
     elements:[{
        type: "image",
        left:"center",
        top:"middle",
        style:{
            image:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAACbCAYAAACXvfL1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2Rp",
            width:180,
            height:180
         }
      }]
  }
}

这样背景图片就渲染上去了，而且浏览器放大缩小时背景图片位置大小渲染没有延迟