echarts样式调整

echarts官网：

这真的是绝好用的插件了，直接照着官网用就ok了~

---

样式问题——柱状图：

1.纵坐标显示不全

因为纵坐标有时会字数特别多，导致字显示不全的情况。只需要一行代码即可解决

grid: {
    x: 100
   },                    

 

2.值为0时柱体显示0==》值为0时柱体不显示0

在series中每一个元素中都加上fomatter函数

当然，要是后台数据处理的比较好，就直接循环里面写一段就可以啦

（反正我都是后台数据处理好返回前台的hiahiahia）

 series: [
        {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            label: {
                show: true,
                formatter: function (params) {
                       if (params.value > 0) {
                            return params.value;
                         } else {
                             return '';
                         }
                   }
            },
            emphasis: {
                focus: 'series'
            },
            data: [0, 302, 301, 334, 390, 330, 320]
        },
        {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            label: {
                show: true,
                formatter: function (params) {
                       if (params.value > 0) {
                            return params.value;
                         } else {
                             return '';
                         }
                   }
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
}

3.鼠标经过时值为0的显示==》鼠标经过时值为0的不显示

tooltip: {
      trigger: 'axis',
      axisPointer: { 
          type: 'shadow' 
         },              
      formatter: function (params) {
          var html = '';
          if (params.length != 0) {
              var getName = params[0].name;
              html += getName + '<br/>';
              for (var i = 0; i < params.length; i++) {
                 if (params[i].value != null && params[i].value != 0 && params[i].value != '') {
                     html += params[i].seriesName + ': ' + params[i].value + '<br/>';
                  }
                }
             }
          return html;
         },
     },

 

---

样式问题——饼图：

1.饼图太小想放大

改变radius就可以啦，想改多大改多大，只要你电脑页面足够大

series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]

---

后续遇到各种奇奇怪怪小问题将继续补充，，，，