首页 > 其他 > 详细

ECharts 学习日记

时间:2019-08-05 17:56:30      阅读:80      评论:0      收藏:0      [点我收藏+]

这篇文章主要是写自己用到的echarts图表配置,我们都知道,自己手动在ECharts配置文件去找一

些自己想要的方法是很难找到的,这篇文章就是我把常用的配置整理出来,希望能帮到各位(此文章随时更新,建议收藏到标签)

做了很多种图表,有很多都没有整理,由于时间原因,只能慢慢整理

饼状图/环形图

series:[
  minAngle: 5,   //默认最小值,值在0~360之间
  center: [‘50%‘, ‘50%‘],  //改变饼状图位置
  radius : ‘55%‘,   //改变饼状图大小
  radius: [‘35%‘, ‘50%‘],  //改变环形图扇形的厚度
  hoverAnimation: false, //是否开启鼠标hover环形图变大
  avoidLabelOverlap: true, //是否启用防止标签重叠策略
  silent: false, //是否关闭扇区所有hover事件
  avoidLabelOverlap: false, //是否启用防止标签重叠策略,防止标签间文字的重叠
  itemStyle: {
    normal:{
      color:function(params) {
        var colorList = [‘#4a98ff‘, ‘#ffa338‘, ‘#a33bff‘];//自定义颜色
        return colorList[params.dataIndex]
       },
      label:{
        show: false,  //是否显示标示线和标签
        formatter: ‘{b} : {c} ({d}%)‘
      },
      labelLine :{
        show:true
      }
    }
  },
  label: {
    //normal: {//去掉标示线和标示文字(上面那句不起作用的时候请使用这段代码)
      //position: ‘inner‘,
      //show : false
    //}
  }
]

 

 
如果项目需求需要把每一条数据显示在legend上面,如下图
技术分享图片

 

不要着急,这个也是很简单的,我们只需要把legend的data数据和series的data里name数据设置一样就可以了,如下图

技术分享图片

 

这个时候就有部分同学问了,怎么把总计写在环形图中间呢?并且总计和标识线都同时存在,如下图

技术分享图片

 

 首先,对于环形图,官网上面是没有总计这个配置的,官网上面能显示在正中间的只有鼠标hover选中的这条数据。

这里我只是提供思路:显示标示线的同时显示总计,总计是我们自己手写的元素,垂直水平居中就可以了,注意微调一下你的环形图位置,确保你的总计在正中间

如果装图表的盒子是动态宽度(百分比);手动改变屏幕大小,总计不居中了怎么办?

ECharts有一个方法是,监听装图表盒子的宽度,图表会根据当前盒子的大小改变重新去绘制图表

window.addEventListener("resize", function () {
    myChart.resize();
});

这段代码放在你的渲染之后就可以了,注意,需要放在option对象外面

 

 

 

 

 

ECharts 学习日记

原文:https://www.cnblogs.com/chensv/p/11304473.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!