Echarts柱状图配置

1. 单个柱子自定义圆角
2. 定义柱子渐变颜色
完整代码

1. 单个柱子自定义圆角

Echarts bar 系列提供了改变单个柱子的配置属性 series-bar.data.itemStyle，通过 borderRadius 可以调整柱子圆角半径。

// series-bar.data.itemStyle
// 自定义单个柱子圆角
itemStyle: {borderRadius: value < 0 ? [0, 0, 10, 10] : [10, 10, 0, 0]
}

效果如图：

2. 定义柱子渐变颜色

Echarts bar 系列提供了全局定义柱子样式的配置属性 series-bar.itemStyle，通过 color 可以全局定义柱子渐变颜色。

// series-bar.itemStyle.color
// 全局定义柱子样式
itemStyle: {color: {type: 'linear',// x,y渐变起点位置x: 0,y: 0,// x2, y2 渐变终点位置x2: 0,y2: 1,colorStops: [{ offset: 0, color: 'yellow' }, // 0% 处的颜色{ offset: 1, color: 'red' } // 100% 处的颜色]}
}

效果如图：

完整代码

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{type: 'bar',data: [120, -200, 150, -200, 70, 110, 130].map((value) => {return {value,// 自定义单个柱子圆角itemStyle: {borderRadius: value < 0 ? [0, 0, 10, 10] : [10, 10, 0, 0]}};}),// 全局定义柱子样式itemStyle: {color: {type: 'linear',// x,y渐变起点位置x: 0,y: 0,// x2, y2 渐变终点位置x2: 0,y2: 1,colorStops: [{ offset: 0, color: 'yellow' }, // 0% 处的颜色{ offset: 1, color: 'red' } // 100% 处的颜色]}}}]
};

Echarts柱状图配置相关推荐

点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...
echarts柱状图上增加icon图标
echarts柱状图上增加icon图标效果图基于echarts5.3.2版本以下是option中的内容 getData(){let datas={ws:{jz:25,sz:30},fq:{jz: ...
echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。
echarts柱状图,不同颜色,立体,lable不同颜色,lable有背景图. 文章目录 echarts柱状图,不同颜色,立体,lable不同颜色,lable有背景图. 配置上下椭圆配置柱状图,和配 ...
echarts柱状图数据过多
echarts柱状图之数据过多时,实现横向拖动展示数据 dataZoom: [{type: 'slider',realtime: true,start: 0,// end: 20, // 数据窗口范围 ...
echarts 柱状图添加排序图标/序号
echarts 柱状图添加排序图标/序号一.实现效果二.核心代码(图片序号) 三.核心代码(文字序号) 四.源码(这里用了vue) 一.实现效果使用echarts的柱状图实现下面效果,须在名称前 ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
前端vue显示柱状图_Vue—Echarts 柱状图
使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例. ee05abaf9633184a9c012631b642d970.png ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
echarts 文本标签配置 label文字样式
字体基本样式设置:fontStyle.fontWeight.fontSize.fontFamily. 文字颜色:color. 文字描边:textBorderColor.textBorderWidth. ...
Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把元离图表远一些,怎么操作? option = ...

Echarts柱状图配置

Echarts柱状图配置

1. 单个柱子自定义圆角

2. 定义柱子渐变颜色

完整代码

Echarts柱状图配置相关推荐

最新文章

热门文章