本文共 2481 字，大约阅读时间需要 8 分钟。

最近在作数据分析，绘制图表时用到了echart库，官网上官方实例有很多，大部分直接套用即可，少部分需要个根据需求自由定制。下面说下使用echart库的一些心得：

1、添加“进度条”：

主要是设置option下dataZoom参数，根据

dataZoom: [                {                    // 鼠标缩放效果                               type: 'inside',                    start: 50,                    end: 100                },                {                    // 进度条初始显示                    show: true,                    type: 'slider',                    y: '90%',                    start: 50,                    end: 100                }            ],

2、鼠标悬停显示内容设置：

默认是显示x轴（名称）,y轴（数值）的内容，可自定义显示格式和内容

// 默认tooltip : {            trigger: 'axis'            },// 自定义formatter函数tooltip: {            formatter:function(a){                  return (a['seriesName'] +'
'+a['name']+'：'+a['value']);             }        },

注：

1. formatter中参数a包含整个图标的信息，可添加断点调试，选择想要显示的参数；

2. formatter: “{a}

   {b}: {c} ({d}%)”这种简写方式暂未了解其原理；

   tooltip对应鼠标悬停的显示效果，itemStyle对应图标中文字的显示效果，也可以设置formatter函数；例如根据‘-’分割文字，换行显示：

// series中：data:[        {
  value:'{
   {wins.0}}', name:'Windows-7/8/10', selected:true},        {
  value:'{
   {wins.1}}', name:'Windows-Server'},        {
  value:'{
   {wins.2}}', name:'Vista'},        {
  value:'{
   {wins.3}}', name:'Windows-XP'},        {
  value:'{
   {wins.4}}', name:'未-知'},    ],itemStyle: {     normal:{       label:{           show:true,           formatter:function(val){   //让series 中的文字进行换行               return val.name.split("-").join("\n");}           },           labelLine:{           show:true           }       },         emphasis: {             shadowBlur: 10,             shadowOffsetX: 0,             shadowColor: 'rgba(0, 0, 0, 0.5)'         }     },

3、柱状上显示数值设置：

设置normal-label，show-是否显示，formatter-显示格式，position-显示位置（’right’、‘inne…）：

itemStyle: {        normal: {                label: {                      show: true,//是否展示                  }  },

4、柱状图最大、最小、平均线显示：

最大、最小值，平均线能根据当前显示界面内的柱状图动态计算。显示类型 type: ‘min’,’max’,’average’等。

markLine : {            data : [                        {
  type : 'average', name: '平均值'}                    ]    },    markPoint: {        label: {                normal: {                    formatter: function (param) {                        return param != null ? Math.round(param.value) : '';                    }                }        },        data : [                {
  type : 'max', name: '最大值'},                {
  type : 'min', name: '最小值'}            ]    },

菜鸟用echart，刚开始觉得模板很强大，实际用的时候发现很多想实现的效果不知道在修改哪个参数，希望能通过这样总结对比来拓宽理解。