您现在的位置是:网站首页> 内容页

echarts - 特殊需求实现代码汇总之【柱图】篇

  • WilliamHill中国官网 首页
  • 2019-03-07
  • 410人已阅读
简介其实包括饼图、线图在内,和柱图都一样的感觉,他们的配置项基本也是对应的那几个,所以想实现某些相似的效果,只要找到对应的属性就可以了。1.柱图渐变色设置 还记得上篇线图中的实现是在are

其实包括饼图、线图在内,和柱图都一样的感觉,他们的配置项基本也是对应的那几个,所以想实现某些相似的效果,只要找到对应的属性就可以了。

1.柱图渐变色设置

 

还记得上篇线图中的实现是在areaStyle的里边设置normal状态下的color吗?

柱图和他异曲同工,不过柱图不是areaStyle,而是itemStyle

item有单项的意思,我的字面理解是设置每一个单柱的样式。渐变也可以。

itemStyle: {normal: {color: new echarts.graphic.LinearGradient0, 0, 1, [{offset: 0,color: "#83bff6"},{offset: 0.5,color: "#188df0"},{offset: 1,color: "#188df0"}])},emphasis: {color: new echarts.graphic.LinearGradient0, 0, 1, [{offset: 0,color: "#2378f7"},{offset: 0.5,color: "#83bff6"},{offset: 1,color: "#2378f7"}])}}

  

 

 

还有这种彩色渐变的效果,也是一个道理。

option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],nameTextStyle: {color: "red"}},yAxis: {type: "value"},series: [{itemStyle: {normal: {barBorderRadius: [50, 50, 0, 0],color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(248,65,126,0.90)"},{offset: 1,color: "#638FFF"}],globalCoord: false}},emphasis: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(248,65,126,0.90)"},{offset: 0.5,color: "rgba(113,23,103,0.40)"},{offset: 1,color: "#638FFF"}],globalCoord: false}}},data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],type: "bar"}]};

  

 

 

2.柱图根据x轴的数量决定是否展示label文案

 

 如上红圈,初始化定义个变量,默认展示label。如果判断x轴配置里,data的length大于(不满足)设定值的时候,变将此值设置为false,再次渲染即可。

let showLable = true;label: { normal: { show: showLable, position: "inside" } },

  

3.柱图鼠标hover时不用shadow和line模式

只是让柱图偏白色,类似官网示例,不过官网示例没有代码展示。

直接把tooltip去掉就行了。。

 就是这么草率。但是这个效果我当初一直调不出来。这还是无意中发现的。得记下来。

 

2018-08-11  19:08:37

文章评论

Top